آموزش Bootstrap 5 به زبان ساده — شروع آسان و سریع برای مبتدی‌ها

محمد
برنامه نویسی و طراحی وب

1. مقدمه: Bootstrap چیست و چرا محبوب است؟

Bootstrap (بوت‌استرپ) یک فریم‌ورک رایگان و منبع باز CSS و JS است که برای توسعه سریع‌تر و آسان‌تر سایت‌های واکنش‌گرا (Responsive) استفاده می‌شود.
هدف اصلی Bootstrap اینه که با چند کلاس ساده بتونی صفحات شیک، حرفه‌ای و کاملاً واکنش‌نما بسازی؛ بدون اینکه درگیر کدنویسی پیچیده CSS بشی!

چرا Bootstrap محبوب شد؟

راحتی و سرعت بالا در طراحی
کلی المنت آماده (دکمه، فرم، جدول، منو و…)
صفحه‌هات به صورت خودکار روی موبایل و دسکتاپ درست نمایش داده می‌شن (Responsive)

2. نحوه اضافه کردن Bootstrap 5 به سایت (CDN و دانلود)

2.1 اضافه کردن با CDN (روش سریع و راحت)

کافی‌ست این دو خط را داخل <head> سایتت قرار بدی:

<!-- استایل‌های بوت‌استرپ -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- جاوااسکریپت بوت‌استرپ + پاپر/popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2.2 دانلود و استفاده از فایل

به سایت getbootstrap.com برو
ورژن موردنظرت رو دانلود کن (اغلب bootstrap.min.css) رو کپی کن داخل پروژه و بهش لینک بده:

<link rel="stylesheet" href="css/bootstrap.min.css">

3. ساختار کلی صفحات با Bootstrap (container، row، col)

بوت‌استرپ یه سیستم مشبک (Grid) داره که خیلی راحت با چند کلاس صفحه رو بخش‌بندی می‌کنی.

3.1 container (مرکزیت دادن صفحه):

<div class="container">
  محتوا اینجاست
</div>

3.2 row و col (ستون‌بندی):

<div class="container">
  <div class="row">
    <div class="col">ستون 1</div>
    <div class="col">ستون 2</div>
    <div class="col">ستون 3</div>
  </div>
</div>

هر ردیف (row) می‌تونه حداکثر ۱۲ واحد (col-1 تا col-12) داشته باشه.

مثال:

<div class="row">
  <div class="col-6">نیم صفحه</div>
  <div class="col-6">نیم دیگر</div>
</div>

4. تایپوگرافی و رنگ‌ها (متن‌ها، تیترها، رنگ‌بندی سریع)

4.1 تیتر و متن:

<h1 class="display-1">تیتر خیلی بزرگ</h1>
<p class="text-muted">متن کمرنگ و فرعی</p>
<p class="text-success">موفقیت!</p>
<p class="text-danger">خطا!</p>

4.2 رنگ بکگراند و متن:

<div class="bg-primary text-white">متن با زمینه آبی و متن سفید</div>
<div class="bg-warning text-dark">اخطار</div>

5. دکمه‌های آماده و استایل‌دهی آن‌ها

انواع دکمه‌ها فقط با تغییر کلاس:

<button class="btn btn-primary">دکمه اصلی</button>
<button class="btn btn-success">موفقیت</button>
<button class="btn btn-outline-danger">دکمه خالی قرمز</button>

سایزها:

<button class="btn btn-lg btn-info">بزرگ</button>
<button class="btn btn-sm btn-secondary">کوچک</button>

6. ساخت منو و نوار ناوبری (Navbar)

ایجاد منوی بالا با استایل حرفه‌ای:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">لوگو</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">خانه</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">درباره ما</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

7. فرم‌ و اعتبار سنجی ساده

فرم ساده با Bootstrap:

<form>
  <div class="mb-3">
    <label class="form-label">ایمیل</label>
    <input type="email" class="form-control">
  </div>
  <div class="mb-3">
    <label class="form-label">پیام</label>
    <textarea class="form-control"></textarea>
  </div>
  <button class="btn btn-primary">ارسال</button>
</form>

اعتبارسنجی ساده:

<input type="email" class="form-control is-invalid">
<div class="invalid-feedback">لطفا ایمیل معتبر وارد کنید.</div>

8. ساخت جدول، کارت و هشدارها (Alert)

جدول:

<table class="table table-striped">
  <tr>
    <th>نام</th>
    <th>ایمیل</th>
  </tr>
  <tr>
    <td>علی</td>
    <td>ali@email.com</td>
  </tr>
</table>

کارت:

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="تصویر">
  <div class="card-body">
    <h5 class="card-title">عنوان کارت</h5>
    <p class="card-text">توضیح مختصر...</p>
    <a href="#" class="btn btn-primary">بیشتر بخوانید</a>
  </div>
</div>

هشدار (Alert):

<div class="alert alert-success">عملیات موفق بود!</div>
<div class="alert alert-danger">خطایی رخ داد.</div>

9. ریسپانسیو کردن صفحات (واکنش‌گرا)

کافیه از کلاس‌های grid و تایپوگرافی بوت‌استرپ استفاده کنی تا صفحه‌ات توی موبایل و دسکتاپ کاملاً خودش رو هماهنگ کنه.

مثال:

<div class="row">
  <div class="col-12 col-md-6">در موبایل: کل عرض - دسکتاپ: نصف عرض</div>
  <div class="col-12 col-md-6">در موبایل: کل عرض - دسکتاپ: نصف عرض</div>
</div>

همین! بوت‌استرپ خودش بقیه کارها رو انجام می‌ده.

10. نکات و بهترین تمرین‌ها

فقط فایل‌های لازم بوت‌استرپ رو لود کن (سی‌اس‌اس و اچ‌تی‌ام‌ال)
وقتی نیاز داشتی، کدهای سفارشی CSS رو بعد از بوت‌استرپ بنویس تا اوورش کنه.
بخش مستندات Bootstrap Docs همیشه مرجع خوبیه!

11. سوالات پرتکرار درباره Bootstrap

آیا بوت‌استرپ برای مبتدی‌ها مناسبه؟
قطعاً! مخصوصاً برای ساخت سایت‌های ساده تا نیمه‌حرفه‌ای.

آیا سایت من مخصوص بوت‌استرپ سنگین میشه؟
در پروژه‌های کوچک تأثیر خاصی نداره، اما در پروژه‌های خیلی بزرگ بهتره فقط قسمت‌هایی که نیاز داری رو وارد کنی.

آیا Bootstrap جایگزین CSS می‌شود؟
خیر، تنها یک ابزار کمکی و سریع برای سبک‌دهی است. با یادگیری CSS بهتر از بوت‌استرپ استفاده خواهی کرد.

محمد وب‌سایت