آشنایی و نصب Bootstrap

اگر بخواهیم یک صفحه وب حرفه‌ای طراحی کنیم، تنها نوشتن HTML کافی نیست. برای اینکه صفحه ظاهر مناسبی داشته باشد، در اندازه‌های مختلف صفحه‌نمایش به‌درستی نمایش داده شود و ساختن بخش‌هایی مانند دکمه، فرم، منو، کارت و پنل‌های مختلف سریع‌تر شود، معمولاً به یک CSS Framework نیاز داریم.

Bootstrap یکی از شناخته‌شده‌ترین فریم‌ورک‌های Front-End برای طراحی رابط کاربری وب است که مجموعه‌ای بزرگ از کلاس‌های آماده CSS، ابزارهای کاربردی و کامپوننت‌های JavaScript را در اختیار توسعه‌دهنده قرار می‌دهد.

در این دوره از مفاهیم پایه شروع می‌کنیم و قدم‌به‌قدم به ساخت رابط‌های کاربری واقعی و Responsive با Bootstrap می‌رسیم.

Bootstrap چیست؟

Bootstrap یک فریم‌ورک Front-End است که برای ساخت سریع‌تر و منظم‌تر رابط کاربری وب استفاده می‌شود.

به زبان ساده، Bootstrap مجموعه‌ای از کلاس‌های CSS، کامپوننت‌های آماده و ابزارهای JavaScript است که بسیاری از نیازهای رایج هنگام طراحی یک وب‌سایت را از قبل آماده کرده است.

برای مثال، اگر بخواهیم یک دکمه ساده طراحی کنیم، بدون Bootstrap باید CSS مربوط به رنگ، اندازه، فاصله، Border، حالت Hover و موارد دیگر را خودمان بنویسیم.

اما Bootstrap بسیاری از این موارد را از قبل فراهم کرده است:

<button class="btn btn-primary">
    Save
</button>

همین چند خط یک دکمه با استایل آماده Bootstrap ایجاد می‌کند.

چرا از Bootstrap استفاده کنیم؟

یکی از مهم‌ترین دلایل استفاده از Bootstrap، افزایش سرعت توسعه رابط کاربری است.

Bootstrap امکانات مختلفی برای موارد زیر دارد:

• طراحی Responsive

• سیستم Grid

• دکمه‌ها

• فرم‌ها

• جدول‌ها

• کارت‌ها

• Navigation

• Modal

• Dropdown

• Accordion

• Carousel

• Alerts

• Toast

• Offcanvas

• Tooltip

• و بسیاری موارد دیگر

بنابراین به جای اینکه برای هر بخش CSS را از ابتدا طراحی کنیم، می‌توانیم از کلاس‌ها و کامپوننت‌های آماده استفاده کنیم.

Bootstrap برای چه کسانی مناسب است؟

Bootstrap برای گروه‌های مختلف توسعه‌دهندگان کاربرد دارد.

توسعه‌دهندگان مبتدی

اگر تازه HTML و CSS را یاد گرفته‌اید، Bootstrap می‌تواند به شما کمک کند تا سریع‌تر صفحات زیبا و Responsive ایجاد کنید.

توسعه‌دهندگان Front-End

توسعه‌دهندگان Front-End می‌توانند با استفاده از Bootstrap زمان پیاده‌سازی رابط کاربری را کاهش دهند و از کامپوننت‌های آماده استفاده کنند.

توسعه‌دهندگان Back-End

اگر بیشتر با تکنولوژی‌هایی مانند ASP.NET Core، PHP، Node.js یا Java کار می‌کنید و می‌خواهید برای پروژه خود یک رابط کاربری مناسب ایجاد کنید، Bootstrap گزینه‌ای کاربردی است.

Bootstrap چگونه کار می‌کند؟

Bootstrap در اصل مجموعه‌ای از فایل‌ها و کدهای آماده است که می‌توانیم آن‌ها را به پروژه خود اضافه کنیم.

به صورت ساده می‌توان ساختار آن را این‌گونه تصور کرد:

HTML
  |
  v
Bootstrap CSS
  |
  v
Bootstrap Components
  |
  v
Responsive Web Page

ما ساختار صفحه را با HTML ایجاد می‌کنیم و سپس با کلاس‌های Bootstrap ظاهر و Layout آن را مشخص می‌کنیم.

برای بعضی کامپوننت‌های تعاملی نیز Bootstrap از JavaScript استفاده می‌کند.

HTML
  |
  +---- Bootstrap CSS
  |
  +---- Bootstrap JavaScript
  |
  v
Interactive Web Page

Bootstrap در چه نسخه‌ای استفاده می‌شود؟

Bootstrap در طول سال‌ها نسخه‌های مختلفی داشته است.

نسخه‌های قدیمی مانند Bootstrap 3 و Bootstrap 4 هنوز ممکن است در پروژه‌های قدیمی دیده شوند، اما در این دوره از Bootstrap 5 استفاده می‌کنیم.

در زمان استفاده از این دوره، بهتر است همیشه نسخه رسمی و جدید Bootstrap 5 را بررسی کنید؛ زیرا شماره نسخه‌های جزئی ممکن است در طول زمان تغییر کنند.

یکی از تغییرات مهم Bootstrap 5 نسبت به نسخه‌های قدیمی، حذف وابستگی اجباری به jQuery است.

در Bootstrap 5 بسیاری از قابلیت‌های JavaScript با JavaScript معمولی پیاده‌سازی شده‌اند.

روش‌های نصب Bootstrap

برای اضافه کردن Bootstrap به پروژه، چند روش رایج وجود دارد:

1. استفاده از CDN

2. دانلود فایل‌های Bootstrap

3. نصب با npm

4. استفاده از Bootstrap در پروژه‌های Front-End مدرن

در این مقاله ابتدا ساده‌ترین روش یعنی CDN را یاد می‌گیریم.

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

استفاده از Bootstrap با CDN

CDN مخفف Content Delivery Network است.

در این روش لازم نیست فایل‌های Bootstrap را به صورت دستی دانلود کنیم. فقط کافی است لینک فایل CSS و در صورت نیاز JavaScript Bootstrap را در صفحه HTML قرار دهیم.

یک فایل ساده HTML ایجاد کنید:

index.html

سپس کد زیر را داخل آن قرار دهید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bootstrap Tutorial</title>

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

<body>

    <h1>Hello Bootstrap</h1>

</body>
</html>

در این کد، مهم‌ترین قسمت برای اضافه کردن Bootstrap این خط است:

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

این فایل، CSS مربوط به Bootstrap را وارد صفحه می‌کند.

نکته: شماره نسخه موجود در CDN ممکن است با گذشت زمان تغییر کند. در پروژه‌های واقعی، نسخه مورد استفاده را از مستندات رسمی Bootstrap بررسی کنید.

اولین کلاس Bootstrap

حالا می‌خواهیم از یک کلاس Bootstrap استفاده کنیم.

کد قبلی را به شکل زیر تغییر دهید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bootstrap Tutorial</title>

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

<body>

    <h1 class="text-primary">
        Hello Bootstrap
    </h1>

</body>
</html>

در اینجا از کلاس زیر استفاده کرده‌ایم:

text-primary

این کلاس باعث می‌شود متن از رنگ اصلی Bootstrap استفاده کند.

نکته مهم این است که ما هیچ CSS اختصاصی برای این رنگ ننوشته‌ایم.

Bootstrap این کلاس را از قبل تعریف کرده است.

ساخت اولین Button

حالا یک دکمه Bootstrap ایجاد کنیم:

<button class="btn btn-primary">
    Click Me
</button>

دو کلاس مهم در این مثال وجود دارد:

btn
btn-primary

کلاس btn پایه دکمه Bootstrap را ایجاد می‌کند.

کلاس btn-primary ظاهر رنگی دکمه را مشخص می‌کند.

برای مثال:

<button class="btn btn-primary">
    Primary
</button>

<button class="btn btn-success">
    Success
</button>

<button class="btn btn-danger">
    Delete
</button>

Bootstrap کلاس‌های مختلفی برای رنگ و مفهوم دکمه‌ها دارد.

یک صفحه ساده Bootstrap

حالا یک مثال کمی کامل‌تر بسازیم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My Bootstrap Page</title>

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

<body>

    <div class="container mt-5">

        <h1 class="text-primary">
            Welcome to Bootstrap
        </h1>

        <p>
            This is my first Bootstrap page.
        </p>

        <button class="btn btn-primary">
            Get Started
        </button>

    </div>

</body>
</html>

در این مثال برای اولین بار با دو کلاس دیگر نیز روبه‌رو می‌شویم:

container

و:

mt-5

در مقاله بعدی به صورت کامل درباره container و سیستم Grid صحبت خواهیم کرد.

فعلاً کافی است بدانیم:

• container برای ایجاد یک محدوده مناسب برای محتوای صفحه استفاده می‌شود.

• mt-5 برای ایجاد Margin از بالا استفاده می‌شود.

اضافه کردن Bootstrap JavaScript

همه امکانات Bootstrap فقط به CSS وابسته نیستند.

برخی کامپوننت‌ها مانند موارد زیر به JavaScript نیاز دارند:

• Modal

• Dropdown

• Collapse

• Offcanvas

• Carousel

• Tooltip

• Popover

برای استفاده از امکانات JavaScript، می‌توانیم فایل Bootstrap Bundle را نیز اضافه کنیم.

این اسکریپت را معمولاً قبل از بسته شدن body قرار می‌دهیم:

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

بنابراین یک صفحه پایه می‌تواند به شکل زیر باشد:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bootstrap Tutorial</title>

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

<body>

    <div class="container mt-5">

        <h1 class="text-primary">
            Bootstrap
        </h1>

        <p>
            Learn Bootstrap step by step.
        </p>

        <button class="btn btn-primary">
            Start Learning
        </button>

    </div>

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

</body>
</html>

تفاوت CSS و JavaScript در Bootstrap

یکی از نکات مهم برای شروع کار با Bootstrap، درک تفاوت این دو فایل است.

Bootstrap CSS مسئول مواردی مانند:

• رنگ

• فونت

• فاصله

• اندازه

• Grid

• Layout

• Responsive Design

• Button Styling

است.

در مقابل، Bootstrap JavaScript رفتار تعاملی برخی کامپوننت‌ها را مدیریت می‌کند.

برای مثال:

Bootstrap CSS
     |
     +---- Layout
     +---- Colors
     +---- Spacing
     +---- Typography
     +---- Buttons

Bootstrap JavaScript
     |
     +---- Modal
     +---- Dropdown
     +---- Collapse
     +---- Carousel
     +---- Offcanvas

نصب Bootstrap با npm

اگر با پروژه‌های مدرن Front-End کار می‌کنید، معمولاً استفاده از npm گزینه مناسبی است.

ابتدا یک پروژه Node.js ایجاد کنید یا وارد پروژه موجود شوید.

سپس دستور زیر را اجرا کنید:

npm install bootstrap

بعد از نصب، Bootstrap داخل node_modules قرار خواهد گرفت.

ساختار کلی پروژه می‌تواند چیزی شبیه این باشد:

my-project/
│
├── node_modules/
├── package.json
├── package-lock.json
└── src/

در پروژه‌های مختلف، نحوه Import کردن Bootstrap ممکن است با توجه به ابزار مورد استفاده مانند Vite، Angular، React یا Webpack متفاوت باشد.

بنابراین فعلاً برای یادگیری مفاهیم Bootstrap، استفاده از CDN ساده‌تر است.

آیا Bootstrap جایگزین HTML و CSS است؟

خیر.

Bootstrap جایگزین HTML و CSS نیست.

برای استفاده صحیح از Bootstrap، همچنان باید HTML را بشناسید و مفاهیم پایه CSS را بدانید.

در واقع:

HTML
  +
CSS
  +
Bootstrap
  =
Modern Web Interface

Bootstrap بیشتر شبیه یک مجموعه ابزار آماده برای CSS و رابط کاربری است.

آیا برای یادگیری Bootstrap باید CSS بلد باشیم؟

بهتر است قبل از Bootstrap، حداقل مفاهیم پایه CSS را بدانید.

برای مثال باید با موارد زیر آشنا باشید:

• Selector

• Class

• Color

• Margin

• Padding

• Width

• Height

• Display

• Flexbox

• Position

• Media Query

اگر CSS را قبلاً یاد گرفته باشید، یادگیری Bootstrap بسیار ساده‌تر خواهد شد؛ چون وقتی می‌بینید:

<div class="d-flex justify-content-center">

می‌توانید متوجه شوید که این کلاس‌ها در اصل برای کنترل Layout و Flexbox استفاده می‌شوند.

مزیت Responsive بودن Bootstrap

یکی از ویژگی‌های مهم Bootstrap، پشتیبانی از Responsive Design است.

یعنی صفحه‌ای که با Bootstrap ایجاد می‌کنیم می‌تواند در اندازه‌های مختلف صفحه‌نمایش، مانند Desktop، Tablet و Mobile، به شکل مناسبی نمایش داده شود.

Desktop
   ↓
Tablet
   ↓
Mobile

این قابلیت یکی از دلایل مهم محبوبیت Bootstrap است.

در مقاله بعدی به صورت کامل با Container، Row، Column و Grid System کار خواهیم کرد.

Bootstrap و پروژه‌های واقعی

Bootstrap فقط برای ساخت مثال‌های آموزشی نیست.

می‌توان از آن برای ساخت بخش‌های مختلف پروژه‌های واقعی استفاده کرد، مانند:

• وب‌سایت شرکتی

• فروشگاه اینترنتی

• پنل مدیریت

• داشبورد

• فرم ثبت‌نام

• سیستم مدیریت محتوا

• صفحات Landing Page

• پنل کاربران

• سیستم‌های تحت وب

برای مثال یک پنل مدیریت می‌تواند ساختاری مانند زیر داشته باشد:

+--------------------------------------+
|              Header                  |
+----------+---------------------------+
| Sidebar  |        Dashboard          |
|          |                           |
| Home     |   +------+  +------+      |
| Users    |   | Card |  | Card |      |
| Products |   +------+  +------+      |
| Orders   |                           |
| Settings |      Data Table           |
+----------+---------------------------+

تمام این بخش‌ها را می‌توان با Bootstrap پیاده‌سازی کرد.

نکات مهم هنگام شروع Bootstrap

1. Bootstrap را بدون HTML یاد نگیرید

Bootstrap روی HTML کار می‌کند؛ بنابراین ساختار HTML را به خوبی بشناسید.

2. فقط کلاس‌ها را حفظ نکنید

بهتر است بفهمید هر کلاس چه کاری انجام می‌دهد.

برای مثال:

mt-3

را فقط به عنوان یک عبارت حفظ نکنید؛ بدانید که مربوط به Margin Top است.

3. Bootstrap را جایگزین کامل CSS ندانید

در پروژه‌های واقعی ممکن است به CSS اختصاصی نیز نیاز داشته باشید.

4. Responsive Design را جدی بگیرید

یکی از مهم‌ترین بخش‌های Bootstrap، سیستم Responsive آن است.

5. نسخه Bootstrap را مشخص کنید

کدهای Bootstrap بین نسخه‌های مختلف ممکن است تفاوت داشته باشند. بنابراین هنگام شروع یک پروژه مشخص کنید از چه نسخه‌ای استفاده می‌کنید.

تمرین عملی

یک فایل به نام زیر ایجاد کنید:

index.html

Bootstrap را با CDN به آن اضافه کنید.

سپس صفحه‌ای ایجاد کنید که شامل موارد زیر باشد:

1. یک عنوان اصلی

2. یک پاراگراف

3. یک دکمه Primary

4. یک دکمه Success

5. یک دکمه Danger

6. یک Container

7. مقداری فاصله در بالای محتوا

برای مثال:

<div class="container mt-5">

    <h1 class="text-primary">
        My Website
    </h1>

    <p>
        Welcome to my first Bootstrap project.
    </p>

    <button class="btn btn-primary">
        Primary
    </button>

    <button class="btn btn-success">
        Success
    </button>

    <button class="btn btn-danger">
        Delete
    </button>

</div>

جمع‌بندی

در این مقاله با مفهوم Bootstrap آشنا شدیم و دیدیم که Bootstrap مجموعه‌ای از ابزارها و کلاس‌های آماده برای ساخت رابط کاربری وب است.

یاد گرفتیم Bootstrap را می‌توان با CDN یا npm به پروژه اضافه کرد و همچنین با تفاوت Bootstrap CSS و Bootstrap JavaScript آشنا شدیم.

در اولین مثال عملی، از کلاس‌هایی مانند container، mt-5، text-primary و btn استفاده کردیم.

همچنین دیدیم که Bootstrap می‌تواند روند ساخت صفحات Responsive و کامپوننت‌های رابط کاربری را سریع‌تر کند.