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

تاریخچه Bootstrap

کلمه «بوت‌استرپ» از عبارت «to pull oneself up by one’s bootstraps» گرفته شده، که به معنای تلاش برای رسیدن به موفقیت بدون کمک خارجی هست. این اصطلاح تو دنیای فناوری هم استفاده می‌شه. مثلاً تو سال 1952، مهندسان IBM یه نرم‌افزار به نام “bootstrap” طراحی کردن که کارش بارگذاری سیستم‌عامل و اجرای برنامه‌های کامپیوتری بود.

حالا بریم جلوتر، به سال 2011. توی شرکت توییتر، دو تا از برنامه‌نویس‌ها به نام‌های Mark Otto و Jacob Thornton تصمیم گرفتن یه فریم‌ورک برای طراحی وب درست کنن. اسمش رو گذاشتن Bootstrap، چون دقیقاً مثل همون مفهوم خوداتکایی، اومده بود تا طراحی وب رو ساده کنه و به توسعه‌دهنده‌ها کمک کنه بدون نیاز به کدهای پیچیده و تکراری، وب‌سایت‌های ریسپانسیو و جذاب بسازن.

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

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

قبل از این که بریم سراغ تعریف بوتسترپ لازمه با یه سری مفاهیم مثل فریم‌ورک و کتابخانه آشنا بشید.

فریم‌ورک چیست؟

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

مثلاً Bootstrap یه فریم‌ورک معروف برای طراحی وب هست که کلی ابزار و قالب آماده داره تا بتونی راحت‌تر صفحات وب قشنگ و ریسپانسیو بسازی.

کتابخانه چیست؟

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

تو برنامه‌نویسی، کتابخانه‌ها مجموعه‌ای از توابع و کدهای از پیش نوشته‌ شده هستن که برای انجام کارهای خاص استفاده می‌شن. این کتابخانه‌ها بهت کمک می‌کنن تا کارهای پیچیده رو راحت‌تر انجام بدی. مثلاً jQuery یه کتابخانه جاوااسکریپت هست که کمک می‌کنه تا کدنویسی جاوااسکریپت راحت‌تر و کوتاه‌تر بشه.

تفاوت فریم‌ورک و کتابخانه

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

وب‌سایت واکنش‌گرا چیست؟

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

Bootstrap چیست؟

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

ویژگی‌های کلیدی Bootstrap

در این بخش به چند مورد از ویژگی‌های این فریم‌ورک اشاره می‌کنیم.

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

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

بوت‌استرپ فارسی یه نسخه بومی‌سازی شده از Bootstrap هست که برای کاربران فارسی‌ زبان طراحی شده. این نسخه شامل تغییراتی در استایل‌ها و جهت‌ها (راست‌به‌چپ یا RTL) هست که باعث می‌شه صفحات وب به درستی و زیبایی برای کاربران فارسی‌ زبان نمایش داده بشه.

برای فعال کردن حالت بوت‌استرپ فارسی، می‌تونید مراحل زیر رو دنبال کنید:

گام 1: دانلود نسخه بوت‌استرپ فارسی

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

گام 2: افزودن فایل‌های CSS

بعد از دانلود فایل‌ها، باید فایل‌های CSS مربوط به بوت‌استرپ فارسی رو به پروژه‌تون اضافه کنید. به طور معمول، فایل CSS راست‌به‌چپ (RTL) با نام‌هایی مثل bootstrap-rtl.css یا bootstrap-rtl.min.css در دسترسه. این فایل‌ها رو به فایل HTML خودتون اضافه کنید.

مثال:

<!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 href="path/to/bootstrap-rtl.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>سلام، 7Learn!</h1>
    <p>این یه مثال ساده از بوت‌استرپ فارسی هست.</p>
  </div>
  <!-- فایل‌های جاوااسکریپت بوت‌استرپ -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

گام 3: تنظیم زبان و جهت متن

مطمئن بشید که زبان و جهت متن در فایل HTML شما به درستی تنظیم شده. برای این کار، تگ <html> باید شامل ویژگی lang="fa" و dir="rtl" باشه.

مثال:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>بوت‌استرپ فارسی</title>
  <link href="path/to/bootstrap-rtl.min.css" rel="stylesheet">
</head>
<body>
  <!-- محتوای وب‌سایت شما -->
</body>
</html>

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

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

Bootstrap از چندین زبان برنامه‌نویسی و فناوری مختلف استفاده می‌کنه تا یه فریم‌ورک قوی و انعطاف‌پذیر برای طراحی وب ارائه بده. این زبان‌ها و فناوری‌ها شامل موارد زیر هستن:

• HTML: زبان اصلی برای ساختاردهی صفحات وب هست. با استفاده از تگ‌های HTML، عناصر مختلف صفحه مثل متن‌ها، تصاویر، لینک‌ها و فرم‌ها ایجاد می‌شن.
• CSS: برای استایل‌دهی و طراحی ظاهر صفحات وب استفاده می‌شه. بوت‌استرپ از CSS برای تعریف استایل‌ها، اندازه‌ها، رنگ‌ها و چینش عناصر استفاده می‌کنه.
• JavaScript: زبان برنامه‌نویسی‌ای که به وب‌سایت‌ها قابلیت‌های پویا و تعاملی می‌ده. بوت‌استرپ از JavaScript برای ایجاد اجزای تعاملی مثل منوهای کشویی، مودال‌ها و اسلایدرها استفاده می‌کنه.
• Sass: یه پیش‌پردازنده CSS که به توسعه‌دهنده‌ها امکان می‌ده کدهای CSS پیشرفته‌تری بنویسن. بوت‌استرپ از Sass استفاده می‌کنه تا استایل‌ها به صورت ماژولار و قابل شخصی‌سازی نوشته بشن و مدیریت اون‌ها راحت‌تر باشه.

مزایا و معایب Bootstrap

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

مزایای بوتسترپ

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

معایب بوتسترپ

• حجم فایل‌ها: یکی از معایب Bootstrap، حجم نسبتا بالای فایل‌های CSS و JS اون هست که می‌تونه باعث افزایش زمان بارگذاری صفحات وب بشه.
• یادگیری اولیه: برای تازه‌کارها، یادگیری کامل تمامی قابلیت‌ها و اجزای Bootstrap ممکنه زمان‌بر باشه.
• طراحی یکنواخت: به دلیل استفاده گسترده از Bootstrap، بسیاری از وب‌سایت‌ها ظاهری شبیه به هم پیدا می‌کنن. برای جلوگیری از این موضوع، باید استایل‌های پیش‌فرض رو سفارشی‌سازی کنید.
• پایبندی به کلاس‌ها: استفاده از Bootstrap ممکنه شما رو مجبور کنه که به کلاس‌ها و ساختارهای خاصی پایبند باشید که در بعضی موارد ممکنه محدودیت‌هایی ایجاد کنه. این موضوع می‌تونه باعث بشه که نیاز به تغییرات زیادی در کدهای CSS و HTML داشته باشید تا به طراحی دلخواه‌تون برسید.

شرکت‌ها و پروژه‌های معروف که از Bootstrap استفاده می‌کنند

خیلی از شرکت‌ها و پروژه‌های معروف از Bootstrap برای طراحی و توسعه وب‌سایت‌های خودشون استفاده می‌کنن. بعضی از این شرکت‌ها عبارتند از:

• Twitter: خود توییتر که Bootstrap رو توسعه داد، از اون برای طراحی صفحات خودش استفاده می‌کنه.
• LinkedIn: لینکدین هم برای بهبود طراحی صفحات خودش از Bootstrap بهره می‌بره.
• Spotify: اسپاتیفای از Bootstrap برای ایجاد صفحات کاربرپسند و ریسپانسیو استفاده می‌کنه.

شروع کار با Bootstrap

حالا که با Bootstrap آشنا شدی، وقتشه یاد بگیریم چطور اون رو نصب کنیم و ازش استفاده کنیم. نصب Bootstrap خیلی ساده‌ست و به چند روش مختلف می‌تونی این کار رو انجام بدی: استفاده از CDN، دانلود محلی، نصب با استفاده از Bower، npm و Composer. هر کدوم از این روش‌ها رو با هم بررسی می‌کنیم.

روش اول: استفاده از CDN

استفاده از CDN (Content Delivery Network) یکی از سریع‌ترین و راحت‌ترین روش‌ها برای نصب Bootstrap هست. با استفاده از CDN، لازم نیست فایل‌های Bootstrap رو دانلود کنی، بلکه می‌تونی به صورت آنلاین ازشون استفاده کنی. مراحل زیر رو دنبال کن:

• ایجاد فایل HTML: اول یه فایل HTML جدید بساز. می‌تونی از هر ویرایشگری که دوست داری استفاده کنی (مثل Visual Studio Code، Sublime Text یا حتی Notepad).
• افزودن لینک‌های CDN: حالا لینک‌های مربوط به CSS و JS Bootstrap رو به فایل HTMLت اضافه کن. این لینک‌ها رو باید داخل تگ <head> و <body> بذاری.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Example</title>
  <!-- لینک CSS Bootstrap از CDN -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Hello, 7Learn!</h1>
    <p>This is a simple Bootstrap example.</p>
  </div>
  <!-- لینک‌های جاوااسکریپت Bootstrap از CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

• حالا فایل HTML رو تو مرورگر باز کن: با باز کردن این فایل، می‌تونی ببینی که چطور استایل‌های Bootstrap به صفحه‌ت اضافه شده.

روش دوم: دانلود و استفاده محلی

اگه دوست داری فایل‌های Bootstrap رو به صورت محلی تو پروژه‌ت داشته باشی، می‌تونی اون‌ها رو دانلود کنی و استفاده کنی. مراحل زیر رو دنبال کن:

• دانلود Bootstrap: به وب‌سایت رسمی Bootstrap برو و آخرین نسخه رو دانلود کن. دانلود Bootstrap
• افزودن فایل‌های CSS و JS: بعد از دانلود، فایل‌های CSS و JS رو به پوشه پروژه‌ت اضافه کن. معمولاً فایل‌های CSS رو داخل یه پوشه به نام css و فایل‌های JS رو داخل یه پوشه به نام js قرار می‌دن.
• ایجاد فایل HTML و لینک دادن به فایل‌های محلی: حالا باید فایل HTMLت رو ایجاد کنی و لینک‌های مربوط به فایل‌های CSS و JS محلی رو بهش اضافه کنی.

مثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Example</title>
  <!-- لینک CSS محلی Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Hello, 7Learn!</h1>
    <p>This is a simple Bootstrap example.</p>
  </div>
  <!-- لینک‌های جاوااسکریپت محلی Bootstrap -->
  <script src="js/jquery-3.5.1.slim.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

• حالا فایل HTML رو تو مرورگر باز کن: با باز کردن این فایل، می‌تونی ببینی که چطور استایل‌های Bootstrap به صفحه‌ت اضافه شده.

روش سوم: نصب با استفاده از Bower

Bower یه ابزار مدیریت پکیجه که می‌تونی باهاش کتابخونه‌های مختلف رو به پروژه‌ت اضافه کنی. برای نصب Bootstrap با استفاده از Bower، این مراحل رو دنبال کن:

• نصب Bower: اگه Bower رو نصب نکردی، اول باید نصبش کنی. برای این کار، نیاز به Node.js و npm داری. بعد از نصب Node.js، دستور زیر رو تو ترمینال یا CMD بزن:

  npm install -g bower

• ایجاد فایل bower.json: تو پوشه پروژه‌ت، یه فایل به نام bower.json بساز و محتویات زیر رو توش بذار:

{
  "name": "my-project",
  "dependencies": {
    "bootstrap": "latest"
  }
}

• نصب Bootstrap: حالا دستور زیر رو تو ترمینال یا CMD بزن تا Bootstrap نصب بشه:

bower install

• لینک دادن به فایل‌های Bootstrap: بعد از نصب، فایل‌های Bootstrap تو پوشه bower_components قرار می‌گیرن. حالا باید لینک‌های مربوط به CSS و JS رو به فایل HTMLت اضافه کنی.

روش چهارم: نصب با استفاده از npm

npm هم یه ابزار مدیریت پکیجه که برای نصب کتابخونه‌های جاوااسکریپت استفاده می‌شه. برای نصب Bootstrap با استفاده از npm، این مراحل رو دنبال کن:

• نصب npm: اگه npm رو نصب نکردی، باید اول Node.js رو نصب کنی که npm هم همراهش نصب می‌شه.
• ایجاد فایل package.json: تو پوشه پروژه‌ت، دستور زیر رو بزن تا فایل package.json ساخته بشه:

npm init -y

• نصب Bootstrap: حالا دستور زیر رو تو ترمینال یا CMD بزن تا Bootstrap نصب بشه:

npm install bootstrap

• لینک دادن به فایل‌های Bootstrap: بعد از نصب، فایل‌های Bootstrap تو پوشه node_modules قرار می‌گیرن. حالا باید لینک‌های مربوط به CSS و JS رو به فایل HTMLت اضافه کنی.

مثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Example</title>
  <!-- لینک CSS Bootstrap از node_modules -->
  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Hello, 7Learn!</h1>
    <p>This is a simple Bootstrap example.</p>
  </div>
  <!-- لینک‌های جاوااسکریپت Bootstrap از node_modules -->
  <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
  <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

روش پنجم: نصب با استفاده از Composer

Composer یه ابزار مدیریت پکیجه که بیشتر تو پروژه‌های PHP استفاده می‌شه. برای نصب Bootstrap با استفاده از Composer، این مراحل رو دنبال کن:

• نصب Composer: اگه Composer رو نصب نکردی، به وب‌سایت Composer برو و نصبش کن.
• ایجاد فایل composer.json: تو پوشه پروژه‌ت، یه فایل به نام composer.json بساز و محتویات زیر رو توش بذار:

{
  "require": {
    "twbs/bootstrap": "latest"
  }
}

• نصب Bootstrap: حالا دستور زیر رو تو ترمینال یا CMD بزن تا Bootstrap نصب بشه:

composer install

• لینک دادن به فایل‌های Bootstrap: بعد از نصب، فایل‌های Bootstrap تو پوشه vendor قرار می‌گیرن. حالا باید لینک‌های مربوط به CSS و JS رو به فایل HTMLت اضافه کنی.

مثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Example</title>
  <!-- لینک CSS Bootstrap از vendor -->
  <link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Hello, 7Learn!</h1>
    <p>This is a simple Bootstrap example.</p>
  </div>
  <!-- لینک‌های جاوااسکریپت Bootstrap از vendor -->
  <script src="vendor/components/jquery/jquery.slim.min.js"></script>
  <script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

نکته آخر: انتخاب روش مناسب

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

• استفاده از CDN: اگه اینترنت پرسرعت داری و می‌خوای سریع و راحت Bootstrap رو به پروژه‌ت اضافه کنی، استفاده از CDN گزینه خوبیه. این روش برای پروژه‌های کوچیک و آزمایشی خیلی مناسبه.
• دانلود و استفاده محلی: اگه دوست داری فایل‌ها رو به صورت محلی داشته باشی یا پروژه‌ت رو به صورت آفلاین کار کنی، روش دانلود و استفاده محلی بهتره. این روش بهت امکان می‌ده تا فایل‌ها رو مستقیماً مدیریت کنی و تغییرات لازم رو اعمال کنی.
• نصب با استفاده از Bower، npm و Composer: اگه پروژه‌های بزرگتری داری و نیاز به مدیریت بهتر کتابخونه‌ها و وابستگی‌ها داری، استفاده از ابزارهای مدیریت پکیج مثل Bower، npm و Composer بهترین گزینه هستن. این روش‌ها بهت کمک می‌کنن تا نسخه‌های مختلف کتابخونه‌ها رو به راحتی مدیریت کنی و به‌روزرسانی‌ها رو انجام بدی.

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

اجزای اصلی Bootstrap

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

سیستم گرید (Grid System)

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

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

نویگیشن بار(Navigation Bar)

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">7Learn</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

دکمه‌ها (Buttons)

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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

فرم‌ها (Forms)

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

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

کارت‌ها (Cards)

کارت‌ها یکی از اجزای جذاب Bootstrap هستن که به شما امکان می‌دن محتواهای مختلفی رو به صورت بلوک‌های جداگانه و زیبا نمایش بدید.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

هشدارها (Alerts)

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

<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>

مدال‌ها (Modal)

مدال‌ها اجزای پنجره‌های پاپ‌آپ Bootstrap هستن که به شما امکان می‌دن محتوا یا پیام‌های مهم رو به کاربر نشون بدید.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<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">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

نمونه کدهای Bootstrap

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

مثال ۱: ایجاد یک کارت

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

توضیح کد:

• <div class="card">: این کلاس برای تعریف یک کارت استفاده می‌شود.
• style="width: 18rem;": این ویژگی inline برای تنظیم عرض کارت استفاده می‌شود.
• <img src="..." class="card-img-top" alt="...">: تصویر بالای کارت را تعریف می‌کند.
• <div class="card-body">: این بخش محتوای اصلی کارت را نگه می‌دارد.
• <h5 class="card-title">: عنوان کارت.
• <p class="card-text">: متن توضیحات کارت.
• <a href="#" class="btn btn-primary">: دکمه‌ای در کارت که می‌تواند به یک لینک متصل شود.

مثال ۲: ایجاد یک فرم

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

توضیح کد:

• <form>: شروع فرم.
• <div class="form-group">: گروه‌بندی فیلدهای فرم.
• <label for="exampleInputEmail1">: برچسب برای فیلد ایمیل.
• <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">: فیلد ورودی ایمیل با کلاس‌های Bootstrap برای استایل‌دهی.
• <small id="emailHelp" class="form-text text-muted">: متن راهنما زیر فیلد ایمیل.
• <label for="exampleInputPassword1">: برچسب برای فیلد رمز عبور.
• <input type="password" class="form-control" id="exampleInputPassword1">: فیلد ورودی رمز عبور.
• <button type="submit" class="btn btn-primary">: دکمه ارسال فرم با استایل Bootstrap.

مثال ۳: ایجاد یک جدول

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

توضیح کد:

• <table class="table">: شروع جدول با کلاس Bootstrap برای استایل‌دهی.
• <thead>: بخش سر ستون‌های جدول.
• <tr>: یک ردیف در جدول.
• <th scope="col">: ستون‌های هدر جدول.
• <tbody>: بخش بدنه جدول.
• <th scope="row">: ستون‌های ردیف با scope row.
• <td>: سلول‌های داده جدول.

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

نسخه جدید Bootstrap: تغییرات و ویژگی‌های جدید

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

حذف وابستگی به jQuery

یکی از بزرگترین تغییرات Bootstrap 5 اینه که دیگه نیازی به jQuery نداری. این یعنی حجم کلی فریم‌ورک کمتر شده و سرعت بارگذاری صفحات وب بیشتر شده. حالا می‌تونی از ویژگی‌های جدید جاوااسکریپت بدون نیاز به jQuery استفاده کنی.

پشتیبانی از متغیرهای CSS 

Bootstrap 5 از CSS Variables استفاده می‌کنه که امکان تغییرات پویا در استایل‌ها رو فراهم می‌کنه. این یعنی می‌تونی به راحتی تم‌ها و استایل‌های خودت رو بسازی و مدیریت کنی.

بهبود سیستم گرید

سیستم گرید تو Bootstrap 5 بهتر شده و حالا کلاس‌های جدیدی مثل gutter برای مدیریت فاصله بین ستون‌ها داری. این باعث می‌شه چینش عناصر توی صفحه خیلی راحت‌تر و دقیق‌تر بشه.

کلاس‌های Utility جدید

یه عالمه کلاس Utility جدید به Bootstrap 5 اضافه شده که بهت این امکان رو می‌ده تا سریع‌تر و راحت‌تر استایل‌های خاصی رو اعمال کنی. این کلاس‌ها شامل ابزارهایی برای مدیریت فاصله‌ها، رنگ‌ها، تایپوگرافی و چیزای دیگه هستن.

حذف پشتیبانی از IE 10 و IE 11

Bootstrap 5 دیگه از مرورگرهای قدیمی مثل IE 10 و IE 11 پشتیبانی نمی‌کنه. این یعنی می‌تونی از ویژگی‌های جدید CSS و جاوااسکریپت بدون نگرانی درباره سازگاری با این مرورگرهای قدیمی استفاده کنی.

بهبود مستندات و مثال‌ها

مستندات Bootstrap 5 خیلی بهتر و کامل‌تر شده. حالا می‌تونی راحت‌تر هر چیزی که نیاز داری رو پیدا کنی و از مثال‌ها و توضیحات جامع‌ترش استفاده کنی.

Offcanvas Component

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

Form Control Improvements

کنترل‌های فرم تو Bootstrap 5 بهتر شده و استایل‌های جدیدی برای فرم‌ها، ورودی‌ها و دکمه‌ها اضافه شده. این تغییرات بهت کمک می‌کنه تا فرم‌های زیباتر و کاربرپسندتری بسازی.

Accordion Component

کامپوننت آکاردئون تو Bootstrap 5 بهبود یافته و حالا با قابلیت‌های جدید و ساده‌تر برای ایجاد بخش‌های قابل جمع‌شدن در صفحات وب همراهه.

RTL (Right-to-Left) Support

Bootstrap 5 از پشتیبانی بومی برای زبان‌های راست به چپ مثل فارسی، عربی و عبری برخورداره. این یعنی می‌تونی بدون نیاز به تغییرات اضافی، وب‌سایت‌هایی برای کاربران راست به چپ بسازی.

آیکون‌ها (Icons)

Bootstrap 5 یه مجموعه‌ای از آیکون‌های سفارشی معرفی کرده که می‌تونی راحت تو پروژه‌هات استفاده کنی. این آیکون‌ها بهت کمک می‌کنه تا وب‌سایت‌های جذاب‌تر و کاربرپسندتری بسازی.

ساخت اولین صفحه وب با Bootstrap

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

گام ۱: ایجاد فایل HTML پایه

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Bootstrap Page</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <!-- محتوا اینجا قرار می‌گیرد -->
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

در این کد، لینک‌های مربوط به فایل‌های CSS و JS Bootstrap از طریق CDN اضافه شدن.

گام ۲: اضافه کردن نوار ناوبری

حالا یه نوار ناوبری ساده به صفحه اضافه می‌کنیم. این نوار شامل نام سایت و چند لینک به صفحات دیگه هست.

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <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="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <!-- محتوا اینجا قرار می‌گیرد -->
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

این کد یه نوار ناوبری زیبا و ریسپانسیو به صفحه اضافه می‌کنه که توی موبایل‌ها و دسکتاپ‌ها به درستی کار می‌کنه.

گام ۳: اضافه کردن بخش اصلی

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

<div class="container mt-5">
  <div class="jumbotron">
    <h1 class="display-4">Welcome to MySite!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </div>
</div>

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

گام ۴: اضافه کردن بخش کارت‌ها

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

<div class="container mt-5">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

گام ۵: اضافه کردن بخش فوتر

در نهایت، یه فوتر ساده به صفحه اضافه می‌کنیم.

<footer class="bg-light text-center text-lg-start mt-5">
  <div class="text-center p-3">
    © 2023 MySite:
    <a class="text-dark" href="https://mysite.com/">mysite.com</a>
  </div>
</footer>

این کد یه فوتر ساده رو به پایین صفحه اضافه می‌کنه که شامل یه متن و یه لینک به سایت هست.

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

آیا Bootstrap در حال منسوخ شدن است؟

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

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

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

Tailwind CSS: رقیب جدید و قدرتمند

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

آیا Tailwind CSS جای Bootstrap را می‌گیرد؟

همون‌طور که می‌بینی، هر دو فریم‌ورک Bootstrap و Tailwind CSS مزایا و معایب خودشون رو دارن. Bootstrap با کامپوننت‌های آماده و استفاده آسانش، برای پروژه‌هایی که نیاز به طراحی سریع و استاندارد دارن، بسیار مناسب هست. در حالی که Tailwind CSS با رویکرد utility-first و قابلیت شخصی‌سازی بالاش، برای پروژه‌هایی که نیاز به کنترل بیشتر روی استایل‌ها دارن، انتخاب خوبی هست.

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

سوالات متداول

1. Bootstrap چیست؟

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

2. چگونه می‌تونم از Bootstrap استفاده کنم؟

شما می‌تونید از طریق CDN یا دانلود فایل‌های Bootstrap و استفاده محلی از اون بهره‌مند بشید.

3. مزایای استفاده از Bootstrap چیه؟

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

4. آیا Bootstrap رایگان هست؟

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

5. آیا یادگیری Bootstrap دشواره؟

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

جمع‌بندی

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