شروع کار با بوت استرپ ۴
بوت استرپ چیست؟
- بوت استرپ یک چارچوب (به انگلیسی: 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>
بسیاری از کاربران تاکنون بوت استرپ را هنگام ملاقات سایت دیگر از MaxCDN دانلود کرده‌اند. بعنوان نتیجه، هنگامیکه افراد به سایت شما مراجعه می‌کنند، بوت استرپ از Cache بارگذاری می‌شود که منجر به زمان بارگذاری سریعتر می‌شود.
همچنین اکثر CDNها تضمین می‌کنند هنگامیکه کاربری یک فایل را از آنها درخواست می‌کند، آن فایل از نزدیکترین سرور به کاربر ارسال شود، که این مورد هم منجر به بارگذاری سریعتر می‌شود.
بوت استرپ ۴ از jQuery و Popper.js برای مؤلفه‌های جاوا اسکریپت استفاده می‌کند (مانند modalها، popoverها، راهنمای ابزار (به انگلیسی: tooltip) و غیره). با این حال اگر فقط از قسمت CSS بوت استرپ استفاده می‌کنید، به آنها نیازی ندارید.
- هشدارهای بسته شونده
- کلیدها و چک باکس ها/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:
- کلاس
.containerیک ظرف واکنش گرا با طول ثابت را فراهم می‌کند - کلاس
.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">
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>
منابع آموزشی