شروع کار با بوت استرپ ۴

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع


بوت استرپ چیست؟

  • بوت استرپ یک چارچوب (به انگلیسی: framework) فرانت-اند (به انگلیسی: front-end) برای توسعهٔ سریع‌تر و آسان‌تر وب است[۱]
  • بوت استرپ شامل الگوهای طراحی مبتنی بر HTML و CSS برای تایپوگرافی، فرم‌ها، دکمه‌ها، جداول، جهت‌یابی، ماژول‌ها، گردانه‌های تصویر و بسیاری از اجزاء دیگر و همچنین افزونه‌های اختیاری جاوا اسکریپت است
  • علاوه بر این بوت استرپ توانایی ایجاد طرح‌های واکنش‌گرا (به انگلیسی: responsive) را به سادگی ارائه می‌دهد

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

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

مثال بوت استرپ ۴

 1 <div class="jumbotron text-center">
 2   <h1>My First Bootstrap Page</h1>
 3   <p>Resize this responsive page to see the effect!</p>
 4 </div>
 5 
 6 <div class="container">
 7   <div class="row">
 8     <div class="col-sm-4">
 9       <h3>Column 1</h3>
10       <p>Lorem ipsum dolor..</p>
11     </div>
12     <div class="col-sm-4">
13       <h3>Column 2</h3>
14       <p>Lorem ipsum dolor..</p>
15     </div>
16     <div class="col-sm-4">
17       <h3>Column 3</h3>
18       <p>Lorem ipsum dolor..</p>
19     </div>
20   </div>
21 </div>

مشاهدهٔ نتیجه


بوت استرپ ۳ در مقابل بوت استرپ ۴

بوت استرپ ۴ جدیدترین نسخه بوت استرپ است؛ با مؤلفه‌های جدید، صفحات سریعتر و واکنش‌گرایی (به انگلیسی: responsive) بیشتر.

بوت استرپ ۴ آخرین نسخهٔ پایدار همهٔ مرورگرها و پلت فرم‌ها را پشتیبانی می‌کند. با این حال Internet Explorer 9 و قدیمی تر پشتیبانی نمی‌شوند.

اگر نیازمند پشتیبانی IE8-9 هستید، از بوت استرپ ۳ استفاده کنید. آن پایدارترین نسخهٔ بوت استرپ است و همچنان برای تعمیر مشکلات (به انگلیسی: Bugfix) و تغییرات مستندسازی توسط تیم پشتیبانی می‌شود. با این حال ویژگی‌های جدید به آن اضافه نخواهد شد.

پشتیبانی از Dropped icon: بوت استرپ ۴ از گلیف آیکون‌های BS3 پشتیبانی نمی‌کند. در عوض می‌توان از Font-Awesome یا سایر کتابخانه‌های آیکون استفاده کرد.

بوت استرپ چیست؟

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

  • آسانی استفاده: هر کسی با دانش پایه در مورد HTML و CSS می‌تواند از بوت استرپ استفاده کند
  • ویژگی‌های واکنش گرا: CSS در بوت استرپ واکنش گراست به طوری که با (اندازه صفحه نمایش) موبایل‌ها، تبلت‌پ‌ها و رایانه‌های رومیزی سازگار می‌شود
  • رویکرد Mobile-first: در بوت استرپ ۳، styles (به فارسی: طرح‌های) Mobile-first از هسته چارچوب مجزا هستند. (در واقع در طراحی سایت با بوت استرپ، ظاهر آن در موبایل و تبلت اهمیت بیشتری نسبت به رایانه‌های رومیزی دارد)
  • سازگاری با مرورگر: بوت استرپ با همه مرورگرهای مدرن سازگاری دارد مانند: Safari ,Edge ,Internet Explorer ,Firefox ,Chrome و Opera

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

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

  • آسانی استفاده: هرکسی با دانش پایه در مورد HTML و CSS می‌تواند از بوت استرپ استفاده کند
  • ویژگی‌های واکنش گرا: CSS در بوت استرپ واکنشگراست به طوری که با (اندازه صفحه نمایش) موبایل‌ها، تبلت‌ها و رایانه‌های رومیزی سازگار می‌شود
  • رویکرد Mobile-first: در بوت استرپ ۳، styles (به فارسی: طرح‌های) Mobile-first از هسته چارچوب مجزا هستند. (در واقع در طراحی سایت با بوت استرپ، ظاهر آن در موبایل و تبلت اهمیت بیشتری نسبت به رایانه‌های رومیزی دارد)
  • سازگاری با مرورگر: بوت استرپ با همه مرورگرهای مدرن سازگاری دارد مانند: Safari ,Edge ,Internet Explorer ,Firefox ,Chrome و Opera

بوت استرپ ۴ را از کجا به دست آوریم؟

دو راه وجود دارد تا بتوانید کار با بوت استرپ را روی وب سایت خود شروع کنید.

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

  • بوت استرپ را از آدرس getbootstrap.com دانلود کنید
  • بوت استرپ را از طریق یک CDN استفاده کنید

CDN بوت استرپ ۴

اگر قصد دانلود و میزبانی بوت استرپ را ندارید، می‌توانید آن را از طریق یک CDN (شبکه تحویل محتوا) استفاده کنید.

MaxCDN پشتیبانی CDN را برای CSS و جاوااسکرپت بوت استرپ فراهم می‌کند. شما باید jQuery را نیز استفاده کنید:

MaxCDN

 1 <!-- Latest compiled and minified CSS -->
 2 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 3 
 4 <!-- jQuery library -->
 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 6 
 7 <!-- Popper JS -->
 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 9 
10 <!-- Latest compiled JavaScript -->
11 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
یک مزیت استفاده از CDN بوت استرپ:

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

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

jQuery و Popper؟

بوت استرپ ۴ از jQuery و Popper.js برای مؤلفه‌های جاوا اسکریپت استفاده می‌کند (مانند modalها، popoverها، راهنمای ابزار (به انگلیسی: tooltip) و غیره). با این حال اگر فقط از قسمت CSS بوت استرپ استفاده می‌کنید، به آنها نیازی ندارید.

OOjs UI icon caretDown.svgمؤلفه‌هایی را نشان می‌دهند که به jQuery نیاز دارند »  
این موارد عبارتند از:
  • هشدارهای بسته شونده
  • کلیدها و چک باکس ها/radio buttonها برای حالت‌های قابل تغییر (به انگلیسی: toggling)
  • Carousel برای اسلایدها، کنترل‌ها و شاخص‌ها (به انگلیسی: Indicators)
  • Collapse برای محتوای قابل تغییر (به انگلیسی: toggling)
  • منوهای کرکره‌ای (همچنین برای قرار گرفتن در موقعت صحیح به Popper.js مناسب هم نیاز دارد)
  • Modalها (باز و بسته)
  • Navbar (برای منوهای پنهان شونده)
  • راهنمای ابزارها و popoverها (همچنین برای قرار گرفتن در موقعت صحیح به Popper.js مناسب هم نیاز دارد)
  • Scrollspy برای رفتار پیمایشی و بروزرسانی‌های مربوط به جهت‌یابی

دانلود بوت استرپ ۴

اگر می‌خواهید بوت استرپ را دانلود و خودتان میزبانی کنید، به آدرس getbootstrap.com رفته و دستورالعمل‌های ذکر شده در سایت را دنبال کنید.

ایجاد اولین صفحه وب با بوت استرپ ۴

۱. اضافه کردن doctype (به فارسی: نوع سند) HTML5

بوت استرپ ۴ از عناصر HTML و ویژگی‌های CSS استفاده می‌کند که نیازمند نوع سند HTML5 هستند.
همیشه HTML5 doctype را در ابتدای صفحه به همراه صفت lang و مجموعه کاراکتر صحیح ذکر (به انگلیسی: Include) کنید:
1 <!DOCTYPE html>
2 <html lang="en">
3   <head>
4     <meta charset="utf-8">
5   </head>
6 </html>

۲. بوت استرپ ۴، Mobile-first است

بوت استرپ 3 به‌منظور واکنش‌گرا بودن در دستگاه‌های موبایل طراحی شده‌است. طرح‌های Mobile-first بخشی از چارچوب مرکزی هستند.
برای اطمینان از تفسیر (به انگلیسی: Rendering) و بزرگنمایی لمسی مناسب، تگ <meta> ذکر شده در پایین را درون عنصر <head> اضافه کنید:
<meta name="viewport" content="width=device-width, initial-scale=1">
بخش width=device-width عرض صفحه را به گونه‌ای تنظیم می‌کند که متناسب با عرض صفحه نمایش دستگاه شود (که بسته به نوع دستگاه متفاوت خواهد بود).
قسمت initial-scale=1 میزان بزرگنمایی اولیه را تنظیم می‌کند هنگامیکه صفحه برای اولین بار بارگذاری می‌شود.

۳. ظرف‌ها (به انگلیسی: Containers)

بوت استرپ۴ به یک عنصر ظرف (به انگلیسی: Containing Element) احتیاج دارد تا محتوای سایت را پوشش دهد.
There are two container classes to choose from:
  1. کلاس .container یک ظرف واکنش گرا با طول ثابت را فراهم می‌کند
  2. کلاس .container-fluid یک ظرف با عرض کامل فراهم می‌کند که عرض کل صفحه نمایش را می‌پوشاند

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


دو صفحه ساده بوت استرپ ۴

مثال زیر کد مربوط به یک صفحه ساده بوت استرپ را نشان می‌دهد (با ظرف واکنش گرایی با عرض ثابت):

مثال ظرف

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <title>Bootstrap 4 Example</title>
 5   <meta charset="utf-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 8   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 9   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
10   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
11 </head>
12 <body>
13 
14 <div class="container">
15   <h1>My First Bootstrap Page</h1>
16   <p>This is some text.</p>
17 </div>
18 
19 </body>
20 </html>

مشاهدهٔ نتیجه


مثال زیر کد مربوط به یک صفحه ساده یوت استرپ ۴ را نشان می‌دهد (با ظرف دارای عرض کامل):

مثال Container Fluid

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <title>Bootstrap 4 Example</title>
 5   <meta charset="utf-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 8   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 9   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
10   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
11 </head>
12 <body>
13 
14 <div class="container-fluid">
15   <h1>My First Bootstrap Page</h1>
16   <p>This is some text.</p>
17 </div>
18 
19 </body>
20 </html>

مشاهدهٔ نتیجه


منابع آموزشی