آموزش مقدماتی Bootstrap

در مقاله بوت استرپ چیست؟ به مفهوم Bootstrap بطور مفصل پرداختیم. در این مقاله برای آموزش مقدماتی Bootstrap یک مثال ساده از نحوه ساخت یک نوار ناوبری (Navigation Bar) واکنش‌گرا با استفاده از بوت‌استرپ ارائه می‌دهیم. این نوار ناوبری مناسب برای شروع یک پروژه وب جدید است.

<!DOCTYPE html>
<html lang="fa">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>مثال نوار ناوبری بوت‌استرپ</title>
      <!-- پیوند به CSS بوت‌استرپ -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   </head>
   <body>
      <!-- نوار ناوبری -->
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <a class="navbar-brand" href="#">نام وب‌سایت</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="تغییر ناوبری">
            <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
               <li class="nav-item active">
                  <a class="nav-link" href="#">صفحه اصلی <span class="sr-only">(فعلی)</span></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">ویژگی‌ها</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">قیمت‌ها</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">غیرفعال</a>
               </li>
            </ul>
         </div>
      </nav>
      <!-- بقیه‌ی محتوای صفحه -->

      <!-- فایل‌های جاوااسکریپت لازم برای بوت‌استرپ -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </body>
</html>

توضیحات:
– `<nav>`: تگ نوار ناوبری که داخل آن عناصر لازم قرار می‌گیرند.
– `navbar`: کلاس CSS از بوت‌استرپ برای طراحی استاندارد نوار ناوبری.
– `navbar-expand-lg`: این نوار ناوبری در ابعاد بزرگ (Large) و بزرگتر به طور پیش‌فرض باز می‌باشد.
– `navbar-light` و `bg-light`: کلاس‌های رنگ برای زمینه و متن نوار ناوبری.
– `navbar-toggler`: دکمه‌ای برای تغییر حالت نوار ناوبری در ابعاد کوچک (موبایل) برای نمایش یا پنهان کردن عناصر ناوبری.
– `.collapse` و `.navbar-collapse`: کلاس‌های CSS برای مدیریت وضعیت فروریزش و نمایش منوها در حالت‌های دستگاه‌های مختلف.

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

شخصی‌سازی نوار ناوبری

رنگ‌بندی آن را تغییر دهید: برای تغییر رنگ نوار ناوبری‌، می‌توانید کلاس‌های `bg-primary`، `bg-success`، `bg-danger` و غیره را به جای `bg-light` اضافه کنید.
لوگو یا برند خود را اضافه کنید: در تگ `<a>` که دارای کلاس `navbar-brand` است، می‌توانید محتوا را به یک تصویر لگو تغییر دهید تا نمایش برند شما در نوار ناوبری دیده شود.
استیکی نوار ناوبری: با اضافه کردن کلاس `sticky-top` به تگ `<nav>`، می‌توانید نوار ناوبری را در بالای صفحه حتی هنگام اسکرول تثبیت کنید.

اضافه کردن کامپوننت‌های دیگر

کاروسل تصاویر: بوت‌استرپ دارای کامپوننت کاروسل برای نمایش اسلایدشویی از تصاویر است که می‌توانید برای نمایش محصولات یا نمونه کارهای خود استفاده کنید.
کارت‌ها: استفاده از کارت‌ها برای نمایش داده‌ها به شکل سازماندهی شده و زیبا یک راه عالی است. شما می‌توانید برای معرفی خدمات، محصولات، نوشته‌های بلاگ و غیره از آن‌ها بهره ببرید.
فرم‌های تماس: برای افزودن امکان ارتباط با مشتریان، می‌توانید با بهره‌گیری از فرم‌های بوت‌استرپ، فرم تماس ساده‌ای را بسازید.

پیاده‌سازی SEO فرندلی

استفاده از تگ‌های HTML5 سمانتیک: برای بهبود SEO صفحه، سعی کنید از تگ‌های معنادار مانند `<header>`، `<footer>`، `<section>` و `<article>` در کدتان استفاده کنید.
متا تگ‌ها: مطمئن شوید که تگ‌های `<title>` و `<meta name=”description”>` را با محتوای مرتبط و کلمات کلیدی پر کرده‌اید.
تگ‌های Alt در تصاویر: اضافه کردن تگ‌های `alt` به تصاویر، کمک می‌کند تا موتورهای جستجو بهتر تصاویر شما را درک کنند.

با توجه به این نکات و ارتقاء مهارت‌های بوت‌استرپ، شما می‌توانید صفحات وب زیباتر و حرفه‌ای‌تری بسازید که هم برای کاربران جذاب باشند و هم برای موتورهای جستجو بهینه شده‌اند.

برای ادامه‌ی آموزش عملی و ارتقا دانش شما در زمینه Bootstrap، این بار به سراغ ساختن یک کارت (Card) نمونه می‌رویم. کارت‌ها یکی از مؤلفه‌های انعطاف‌پذیر Bootstrap هستند که به شما اجازه می‌دهند یک قطعه حاوی محتوای مرتبط بسازید که معمولاً یک تصویر، مقداری متن و لیستی از اقدامات را شامل می‌شود.

نمونه کارت با بوت‌استرپ

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Bootstrap Card Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container mt-5">
         <!-- شروع کارت -->
         <div class="card" style="width: 18rem;">
            <img src="your-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>
         <!-- پایان کارت -->
      </div>

      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </body>
</html>

توضیحات:
– یک `container` ایجاد شده که به عنوان والد برای کارت‌های دیگری که قصد داریم بسازیم عمل می‌کند.
– ما یک `<div>` با کلاس `card` و یک عرض تعریف شده داریم (اینجا `18rem`) که نمایانگر ابعاد کارت است.
– درون کارت، یک تصویر با کلاس `card-img-top` قرار داده شده که بالای کارت و قبل از محتوای متنی نمایش داده می‌شود.
– `card-body` شامل محتوای کارت است که عنوان (`card-title`)، متن توضیحی (`card-text`) و یک دکمه (`btn btn-primary`) را دارد.

این کارت‌ها می‌توانند به راحتی سفارشی‌سازی شوند و شما می‌توانید عناصر اضافی مانند لیست‌ها، فرم‌ها، و یا تصاویر اضافی را نیز برای غنی‌سازی محتوای کارت خود استفاده کنید.

ادامه‌ی سفارشی‌سازی کارت‌ها:

گروه‌های کارت: می‌توانید چندین کارت را در کنار هم قرار دهید تا یک `card-group` یا `card-deck` ایجاد کنید و کارت‌ها را با هم تلفیق نمایید.
فوتر کارت: در پایین کارت، می‌توانید `card-footer` را اضافه کنید که می‌تواند حاوی متن کمتری باشد یا دکمه‌های اقدام که کاربران می‌توانند کلیک کنند.
تب‌ها و پیل‌ها: می‌توانید تب‌ها و پیل‌هایی را به کارت‌ها اضافه کنید تا کاربران بتوانند بین محتوای مختلف در یک کارت جابجا شوند.

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

خب، اکنون که با مفهوم کارت‌ها در بوت‌استرپ آشنا شدید، بیایید چند موضوع پیشرفته‌تر دیگر را بررسی کنیم که می‌توانید به وب‌سایت خود اضافه نمایید تا آن را هم جذاب‌تر و هم کاربردی‌تر کنید.

اِعمال ریسپانسیو (واکنش‌گرایی) در تصاویر:

بوت‌استرپ کلاس‌های `img-fluid` را فراهم می‌کند که می‌توانید به تصاویر خود اضافه کنید تا آن‌ها را واکنش‌گرا (responsive) کنید. این به این معناست که تصاویر خود را با اندازه‌ی والد خود تطبیق می‌دهند.

<img src="your-image.jpg" class="img-fluid" alt="تصویر واکنش‌گرا">

ایجاد یک بخش FAQ (پرسش‌های متداول):

با استفاده از کامپوننت‌ “Collapse” در بوت‌استرپ، می‌توانید بخش پرسش و پاسخی ایجاد کنید که به کاربران اجازه می‌دهد روی سوال کلیک کنند و پاسخ آن را مشاهده نمایند.

<div class="container">
   <p>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      لینک با کارکرد کولپس
      </a>
   </p>
   <div class="collapse" id="collapseExample">
      <div class="card card-body">
         متنی که کولپس می‌شود و زمان کلیک روی دکمه بالا نمایان می‌شود را نشان می‌دهد.
      </div>
   </div>
</div>

افزودن بخش نظرات:

یک بخش نظرات با استفاده از کامپوننت‌های “Forms” بوت‌استرپ که به کاربران امکان می‌دهد نظرات خود را ثبت کنند:

<div class="container">
   <h2>نظرات</h2>
   <form>
      <div class="form-group">
         <label for="exampleInputName1">نام</label>
         <input type="text" class="form-control" id="exampleInputName1" placeholder="نام خود را وارد کنید">
      </div>
      <div class="form-group">
         <label for="exampleInputEmail1">ایمیل</label>
         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="ایمیل خود را وارد کنید">
      </div>
      <div class="form-group">
         <label for="exampleFormControlTextarea1">نظر</label>
         <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">ارسال نظر</button>
   </form>
</div>

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

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

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

شبکه‌بندی فرندلی (Grid System)

شبکه‌بندی (Grid system) یکی از اساسی‌ترین بخش‌های طراحی واکنش‌گرا در بوت‌استرپ است. این سیستم شما را قادر می‌سازد تا محتوای وب‌سایت خود را با استفاده از row ها و col ها به شکلی منسجم سازمان‌دهی کنید:

<div class="container">
   <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
   </div>
</div>

این مثال از یک ردیف (`row`) و دو ستون استفاده می‌کند که به ترتیب، دو سوم و یک سوم عرض container را می‌گیرند.

مؤلفه‌های JavaScript

بوت‌استرپ شامل مؤلفه‌های JavaScript است که به شما امکان می‌دهند ویژگی‌های دینامیکی مانند تب‌بندی، پنجره‌های مودال (Modal)، اسلایدر و غیره را به وب‌سایت خود اضافه کنید. برای استفاده از این ویژگی‌ها، باید فایل‌های JavaScript مربوط به بوت‌استرپ را به پروژه خود لینک دهید.

کلاس‌های کمکی (Utility classes)

بوت‌استرپ مجموعه‌ای از کلاس‌های کمکی ارائه می‌دهد که به شما امکان می‌دهند سبک‌های CSS را به سرعت و به طور مستقیم به عناصر خود اعمال کنید. این کلاس‌های کمکی شامل فاصله‌ها (margin و padding)، سایزهای متن، ترازبندی و بیشتر می‌شوند.

<div class="mt-5 mb-3 text-right">
   متنی در این‌جا که با فاصله بالایی (margin-top) زیاد و فاصله پایینی (margin-bottom) کم، همچنین متنی که به سمت راست تراز شده است.
</div>

به خاطر داشته باشید که همیشه پیش از اعمال تغییرات بزرگ در طراحی وب‌سایت خود، آن‌ها را در یک محیط آزمایشی امتحان کنید تا از عملکرد صحیح آن‌ها اطمینان حاصل نمایید.

قابلیت دسترس‌پذیری (Accessibility)

مهم است که وب‌سایت شما برای همه کاربران قابل دسترس باشد، از جمله افرادی که ممکن است محدودیت‌های جسمی داشته باشند. بوت‌استرپ گایدلاین‌ها و توصیه‌هایی برای بهبود دسترس‌پذیری ارائه می‌دهد، مثل استفاده از تریبیوت‌های ARIA و کنترل‌های کیبورد.

بوت‌استرپ دارای ابزارها و کامپوننت‌های زیادی است که می‌توانند پروژه‌های وب‌سایت شما را از نظر ظاهر و عملکرد ارتقاء بدهند. با تمرین و کسب تجربه بیشتر، می‌توانید پروژه‌های بسیار جذاب و کاربرپسندی بسازید.

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

ناوبری با تب‌ها (Tab Navigation):

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">خانه</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">پروفایل</a>
   </li>
</ul>
<div class="tab-content" id="myTabContent">
   <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">محتوای خانه</div>
   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">محتوای پروفایل</div>
</div>

مودال‌ها (Modals):

مودال‌ها پنجره‌هایی هستند که به طور معمول برای ارائه اطلاعات اضافی به کاربر بدون نیاز به تغییر صفحه مورد استفاده قرار می‌گیرند.

<!-- دکمه‌ای برای باز کردن مودال -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
   نمایش مودال
</button>

<!-- مودال -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">عنوان مودال</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="بستن">
               <span aria-hidden="true">×</span>
            </button>
         </div>
         <div class="modal-body">محتوای داخل مودال.</div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">بستن</button>
            <button type="button" class="btn btn-primary">ذخیره تغییرات</button>
         </div>
      </div>
   </div>
</div>

تول‌تیپ‌ها (Tooltips):

تول‌تیپ‌ها یک راه عالی برای ارائه اطلاعات اضافی به کاربران هنگام رویدادهای موس مانند hover هستند.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="تول‌تیپ در بالا">
   تول‌تیپ در بالا
</button>

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

سفارشی‌سازی بوت‌استرپ

در نهایت، اگر شما می‌خواهید بوت‌استرپ را بیشتر به سلیقه خود سفارشی‌سازی کنید، می‌توانید فایل‌های SCSS آن را دانلود کرده و واریابل‌ها، میکسین‌ها و توابع را تغییر دهید. همچنین می‌توانید کامپوننت‌های اختصاصی خود را ایجاد و با بوت‌استرپ ترکیب کنید.

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

و اکنوان که ما جنبه‌های مختلف و پیشرفته‌تر بوت‌استرپ را اکتشاف کرده‌ایم، بگذارید نگاهی به نکات کلیدی بیندازیم تا اطمینان حاصل کنیم آن‌ها در ذهن ما تثبیت شده‌اند، و نیز چند پیشنهاد برای ادامه‌ی مسیر یادگیری شما ارائه دهیم.

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

ریسپانسیو دیزاین: همیشه طرح‌های واکنش‌گرا را به خاطر داشته باشید که روی همه دستگاه‌ها به خوبی کار کنند.
کامپوننت‌های UI: از کامپوننت‌هایی که بوت‌استرپ ارائه می‌دهد استفاده کنید تا طراحی سریع‌تر و موثرتری داشته باشید.
کلاس‌های کمکی: کلاس‌های کمکی بوت‌استرپ زمانی که به سرعت می‌خواهید سبک‌های بهینه‌سازی شده را اعمال کنید بسیار مفید هستند.
جاوا اسکریپت پلاگین‌ها: برای اضافه کردن تعاملات پیچیده‌تر می‌توانید از JS plugins بوت‌استرپ استفاده کنید.
شبکه بندی: سیستم شبکه‌بندی فلکسباکس و گرید بوت‌استرپ را برای ایجاد لایه‌بندی‌های معنادار و مرتب تمرین کنید.
سفارشی‌سازی: اگر نیاز به طراحی خاصی دارید که در بوت‌استرپ پیش‌فرض وجود ندارد، می‌توانید فایل‌های SCSS این فریم‌ورک را سفارشی‌سازی کنید.

راهنمایی برای ادامه‌ی مسیر یادگیری

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

اگرچه بوت‌استرپ می‌تواند یک ابزار قدرتمند برای ساخت وب‌سایت‌ها باشد، خوب است که با دیگر فریم‌ورک‌ها و ابزارهای جدید نیز آشنایی پیدا کنید. مانند Tailwind CSS، که با رویکردی متفاوت به ساخت وب‌سایت‌ها پرداخته و می‌تواند دانش شما را گسترش دهد. همچنین، آشنایی با پیش‌پردازنده‌های CSS مانند Sass یا LESS می‌تواند تسلط شما به نوشتن سبک‌های مدرن و مدیریت پروژه‌های بزرگ را افزایش دهد.

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