بخش ۱: شروع کار 

آموزش بوت‌استرپ ۵ – شروع کار (Get Started)

بوت‌استرپ ۵ چیست؟

بوت‌استرپ محبوب‌ترین فریم‌ورک HTML، CSS و JavaScript در جهان برای ایجاد وب‌سایت‌های واکنش‌گرا و اول-موبایل است.

بوت‌استرپ ۵ (نسخه منتشر شده در سال ۲۰۲۱) جدیدترین نسخه از بوت‌استرپ است که با اجزای جدید، استایل‌شیت‌های سریع‌تر و پاسخگویی بهتر عرضه شده است.

چرا از بوت‌استرپ ۵ استفاده کنیم؟

  • استفاده آسان: هر کسی با دانش پایه از HTML و CSS می‌تواند شروع به استفاده از بوت‌استرپ کند.
  • ویژگی‌های واکنش‌گرا: طراحی‌های بوت‌استرپ با موبایل، تبلت و دسکتاپ سازگار است.
  • رویکرد اول-موبایل: در بوت‌استرپ ۵، استایل‌های اول-موبایل بخشی از هسته اصلی فریم‌ورک هستند.
  • سازگاری با مرورگرها: بوت‌استرپ ۵ با تمام مرورگرهای مدرن (Chrome، Firefox، Edge و Safari) سازگار است.

اولین صفحه با بوت‌استرپ ۵

برای شروع کار، می‌توانید از کد پایه زیر استفاده کنید. این مثال شامل یک هدر تمام‌عرض و سه ستون است که در موبایل به صورت خودکار زیر هم قرار می‌گیرند.

<!DOCTYPE html>

<html lang=”en”>

<head>

  <title>Bootstrap 5 Example</title>

  <meta charset=”utf-8″>

  <meta name=”viewport” content=”width=device-width, initial-scale=1″>

  <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

  <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>

</head>

<body>


<div class=”container-fluid p-5 bg-primary text-white text-center”>

  <h1>My First Bootstrap Page</h1>

  <p>Resize this responsive page to see the effect!</p>

</div>


<div class=”container mt-5″>

  <div class=”row”>

    <div class=”col-sm-4″>

      <h3>Column 1</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>

    </div>

    <div class=”col-sm-4″>

      <h3>Column 2</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco…</p>

    </div>

    <div class=”col-sm-4″>

      <h3>Column 3</h3>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco…</p>

    </div>

  </div>

</div>


</body>

</html>

خروجی بصری کد بالا:

My First Bootstrap Page

Resize this responsive page to see the effect!

Column 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit…

Column 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco…

Column 3

Ut enim ad minim veniam, quis nostrud exercitation ullamco…

تفاوت بوت‌استرپ ۵ با نسخه‌های ۴ و ۳

بوت‌استرپ ۵ جدیدترین نسخه است. اگرچه نسخه‌های ۳ و ۴ هنوز محبوب هستند، اما نسخه ۵ تغییرات زیر را ایجاد کرده است:

  • حذف وابستگی به jQuery: بوت‌استرپ ۵ اکنون از جاوااسکریپت خالص (Vanilla JS) استفاده می‌کند.
  • عدم پشتیبانی از Internet Explorer: نسخه ۵ دیگر از مرورگرهای IE 10 و ۱۱ پشتیبانی نمی‌کند.
  • بهبود سیستم گرید: اضافه شدن سطح جدید XXL برای نمایشگرهای بسیار بزرگ.
  • کتابخانه آیکون‌های جدید: بوت‌استرپ ۵ اکنون آیکون‌های SVG اختصاصی خود را دارد.

راه‌اندازی بوت‌استرپ ۵ از طریق CDN

اگر نمی‌خواهید فایل‌ها را دانلود کنید، می‌توانید با استفاده از لینک‌های شبکه توزیع محتوا (CDN)، بوت‌استرپ را مستقیماً در فایل خود فراخوانی کنید:

<!– Latest compiled and minified CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>

<!– Latest compiled JavaScript –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>

تگ Meta Viewport برای موبایل

بوت‌استرپ ۵ برای رندر صحیح در موبایل و دستگاه‌های لمسی، نیاز به تنظیم Viewport دارد. تگ زیر را حتماً در بخش <head> قرار دهید:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

محفظه‌ها (Containers)

بوت‌استرپ به یک عنصر نگهدارنده برای بسته‌بندی محتویات سایت نیاز دارد. دو کلاس اصلی برای این کار وجود دارد:

  1. کلاس .container: محفظه‌ای با عرض ثابت و واکنش‌گرا ایجاد می‌کند.
  2. کلاس .container-fluid: محفظه‌ای با عرض کامل (تمام عرض صفحه) ایجاد می‌کند.
<div class=”container”>
  <!– محتوا با عرض ثابت در اینجا قرار می‌گیرد –>
</div>

<div class=”container-fluid”>
  <!– محتوا با عرض کامل در اینجا قرار می‌گیرد –>
</div>
پایان بخش اول: شروع کار
بازگشت به دوره
درس بعدی