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

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

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

  • بوت استرپ یک چارچوب (به انگلیسی: 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>


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


تاریخچه بوت استرپ

بوت استرپ توسط مارک اوتو و جیکوب تورنتون در توئبتر توسعه یافته و به عنوان یک محصول متن باز در آگوست ۲۰۱۱ در GitHub منتشر شده‌است.

در ژوئن ۲۰۱۴، بوت استرپ پروژه شماره ۱ در GitHub بود!

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

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

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

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

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

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

  • بوت استرپ را از طریق یک CDN استفاده کنید

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

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

CDN بوت استرپ

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

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

MaxCDN:

1 <!-- Latest compiled and minified CSS -->
2 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.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 <!-- Latest compiled JavaScript -->
8 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

یک مزیت استفاده از CDN بوت استرپ:

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

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

جی کوئری

بوت استرپ از jQuery برای افزونه‌های (به انگلیسی: plugins) جاوا اسکریپت (مانند modalها، راهنمای ابزار (به انگلیسی: tooltip) و غیره) استفاده می‌کند. با این حال اگر تنها از بخش CSS بوت استرپ استفاده کنید، نیازی به jQuery نیست.

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

۱. اضافه کردن نوع سند HTML5 doctype

بوت استرپ از عناصر 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 است

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

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

بوت استرپ به یک عنصر ظرف (به انگلیسی: Containing element) احتیاج دارد تا محتوای سایت را پوشش دهد.
دو نوع کلاس ظرف وجود دارد که می‌توان از میان آنها انتخاب کرد:
  1. کلاس .container یک ظرف واکنش گرا با طول ثابت را فراهم می‌کند
  2. کلاس .container-fluid یک ظرف با عرض کامل فراهم می‌کند که عرض کل صفحه نمایش را می‌پوشاند

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

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

مثال

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <title>Bootstrap 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/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
10 </head>
11 <body>
12 
13 <div class="container">
14   <h1>My First Bootstrap Page</h1>
15   <p>This is some text.</p>
16 </div>
17 
18 </body>
19 </html>


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


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

مثال

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <title>Bootstrap 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/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
10 </head>
11 <body>
12 
13 <div class="container-fluid">
14   <h1>My First Bootstrap Page</h1>
15   <p>This is some text.</p>
16 </div>
17 
18 </body>
19 </html>


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



منابع آموزشی