ورود به Bootstrap 5

Bootstrap چیست؟

  • Bootstrap یک فریم‌ورک رایگان جلویی است که برای توسعه سریع‌تر و آسان‌تر وب ایجاد شده است
  • Bootstrap شامل قالب‌های طراحی بر اساس HTML و CSS است که برای چیدمان، فرم‌ها، دکمه‌ها، جدول‌ها، ناوبری، مودال‌ها، اسلایدرهای تصویری و غیره استفاده می‌شود
  • Bootstrap پلاگین‌های JavaScript متنوعی ارائه می‌دهد
  • Bootstrap شما را قادر می‌سازد تا به راحتی طراحی واکنش‌گرا ایجاد کنید

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

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

Bootstrap 5 نمونه

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>صفحه اولین Bootstrap من</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>ستون 1: بهار</h3>
      <p>در روزهای زیبا به سمت ساحل رودخانه سائو، مناظر بی‌پایان در یک لحظه جدید است.</p>
      <p>در حالی که به راحتی چهره باد را تشخیص می‌دهم، همیشه رنگ‌های قرمز و بنفش در بهار هستند.</p>
    </div>
    <div class="col-sm-4">
      <h3>ستون 2: قصه‌های تابستانی</h3>
      <p>رنگ‌های قرمز و بنفش به خاک تبدیل شده‌اند، در صدای بوق آمدن بوقولک، فصل تابستان جدید است.</p>
      <p>در راه‌های باریک، صنوبر و جعفری راه بی‌پایان است، تازه بدانم که من یک مردم‌پایه هستم.</p>
    </div>
    <div class="col-sm-4">
      <h3>ستون 3: راه رفتن در کوه‌ها</h3>
      <p>راه‌های صعب‌العبور به سمت کوه‌های سرد، در جایی که ابرها می‌رویند، خانه‌هایی وجود دارد.</p>
      <p>ایستاده‌ام و از زیبایی پاییزی درختان زالزالک لذت می‌برم، برگ‌های یخ‌زده قرمزتر از گل‌های بهار در فوریه هستند.</p>
    </div>
  </div>
</div>

به طور شخصی امتحان کنید

نسخه Bootstrap

Bootstrap 5 (منتشر شده در سال 2021) جدیدترین نسخه Bootstrap است (منتشر شده در سال 2013); با استفاده از اجزا جدید، استایل‌های سریع‌تر، قابلیت پاسخگویی سریع‌تری ارائه می‌دهد.

Bootstrap 5 از نسخه‌های پایدار جدید تمام مرورگرها و پلتفرم‌های اصلی پشتیبانی می‌کند. اما از نسخه‌های IE11 و قدیمی‌تر پشتیبانی نمی‌کند.

تفاوت اصلی بین Bootstrap 5 و Bootstrap 3 & 4 این است که Bootstrap 5 به Vanilla JavaScript و نه jQuery تغییر کرده است.

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

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

مزایای Bootstrap:

  • آسان بودن:هر کسی که دارای اطلاعات پایه‌ای در HTML و CSS است می‌تواند بلافاصله از Bootstrap استفاده کند
  • خصوصیات پاسخگو:CSS پاسخگو Bootstrap برای موبایل، تبلت و رایانه‌های رومیزی قابل تنظیم است
  • روش اولویت موبایل:در Bootstrap، سبک‌های اولویت دارنده موبایل بخشی از چارچوب هسته‌ای هستند
  • سازگاری مرورگر:Bootstrap 5 با تمام مرورگرهای مدرن سازگار است (Chrome، Firefox، Edge، Safari و Opera).

توجه داشته باشید:اگر نیاز به پشتیبانی از IE11 و نسخه‌های قبلی دارید، باید از BS4 یا BS3 استفاده کنید.

از کجا Bootstrap 5 را دریافت می‌کنید؟

دو روش وجود دارد که می‌توانید Bootstrap 5 را در وب‌سایت خود استفاده کنید.

شما می‌توانید:

  • شامل Bootstrap 5 از CDN
  • Bootstrap 5 از getbootstrap.com دانلود کنید

Bootstrap 5 CDN

اگر نمی‌خواهید خودتان Bootstrap 5 را دانلود و میزبانی کنید، می‌توانید از CDN (شبکه‌ی تحویل محتوا) آن را یادگیری کنید.

CodeW3C.com از CDN برای CSS و JavaScript Bootstrap پشتیبانی می‌کند:

MaxCDN:

<!-- آخرین نسخه کد شده و فشرده شده CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- آخرین نسخه کد شده JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

یکی از مزایای استفاده از CDN Bootstrap 5:

بسیاری از کاربران در بازدید از یک وب‌سایت دیگر از jsDelivr Bootstrap 5 را دانلود کرده‌اند. بنابراین، وقتی به وب‌سایت شما می‌آیند، از حافظه پنهان بارگذاری می‌شود، که باعث کاهش زمان بارگذاری می‌شود. علاوه بر این، بیشتر CDN‌ها اطمینان حاصل می‌کنند که وقتی کاربر از سرور نزدیک به خود درخواست فایل می‌کند، آن فایل از سرور نزدیک‌تر ارائه می‌شود، که باعث کاهش زمان بارگذاری می‌شود.

JavaScript؟

Bootstrap 5 از JavaScript برای اجزای مختلف (مانند مدال، ابزارهای توضیحی، پنجره‌های پاپ‌آپ و غیره) استفاده می‌کند. اما اگر فقط بخش CSS Bootstrap را استفاده می‌کنید، نیازی به آنها نیست.

دانلود Bootstrap 5

اگر می‌خواهید خودتان Bootstrap 5 را دانلود و میزبانی کنید، لطفاً به https://getbootstrap.com/، سپس بر اساس توضیحات موجود در آن عمل کنید.

با استفاده از Bootstrap 5 اولین صفحه خود را ایجاد کنید

1. اضافه کردن doctype HTML5

Bootstrap 5 از عناصر و ویژگی‌های HTML (که نیاز به doctype HTML5 دارند) و CSS استفاده می‌کند.

لطفاً همیشه HTML5 doctype را در ابتدای صفحه شامل کنید، به علاوه ویژگی lang و عنوان صحیح و زبان مناسب:

<!DOCTYPE html>
<html lang="fa">
  <head>
    <title>مثال Bootstrap 5</title>
    <meta charset="utf-8">
  </head>
</html>

2. اولویت موبایل Bootstrap 5

هدف طراحی Bootstrap 5 پاسخگویی به دستگاه‌های موبایل است. سبک‌های اولویت موبایل بخش اصلی چارچوب است.

برای اطمینان از رندر صحیح و بزرگنمایی لمسی، لطفاً در <head> در عناصر زیر اضافه کنید <meta> نشانگر:

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

width=device-width پرکننده صفحه به عرض screen-width دستگاه پیروی می‌کند (که ممکن است از دستگاه به دستگاه متفاوت باشد).

initial-scale=1 سطح بزرگنمایی اولیه مرورگر در بارگذاری اولیه صفحه تنظیم شده است.

3. مخزن

Bootstrap 5 نیاز به یک عناصر برای بسته‌بندی محتوای وب‌سایت دارد.

دو نوع کلاس محفظه برای انتخاب وجود دارد:

  1. .container کلاس ارائه می‌دهد یک محفظه پاسخگو با عرض ثابت
  2. .container-fluid کلاس ارائه می‌دهد یک محفظه تمام‌اندازه‌ای که تمام عرض视‌وگاه را پوشش می‌دهد

دو صفحه ابتدایی Basic Bootstrap 5

مثال container

در اینجا کد یک صفحه اولیه Basic Bootstrap 5 (با محفظه پاسخگو ثابت‌اندازه) نشان داده شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>مثال Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>صفحه اولین Bootstrap من</h1>
  <p>این بخش در کلاس .container قرار دارد.</p>
  <p>کلاس .container یک محفظه با عرض ثابت و پاسخگو ارائه می‌دهد.</p>
</div>
</body>
</html>

به طور شخصی امتحان کنید

مثال Container Fluid

در اینجا کد یک صفحه اولیه Basic Bootstrap 5 (با محفظه تمام‌اندازه‌ای) نشان داده شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>مثال Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>صفحه اولین Bootstrap من</h1>
  <p>این بخش در کلاس .container-fluid قرار دارد.</p>
  <p>کلاس .container-fluid یک محفظه تمام‌اندازه‌ای ارائه می‌دهد که تمام عرض视‌وگاه را پوشش می‌دهد.</p>
</div>
</body>
</html>

به طور شخصی امتحان کنید