بوت استرپ یک چارچوب رایگان برای توسعه سریعتر و راحت تر صفحات وب است. این چارچوب شامل الگوهای طراحی مبتنی بر HTML و CSS برای استفاده در تایپوگرافی، فرمها، دکمه ها، جداول، پیمایش ها، کادرهای محاوره ای، تصاویر و افزودنی های جاوااسکریپت است. بوت استراپ امکان می دهد تا بصورت راحت طراحی های واکنش پذیر (responsive) داشته باشیم.
طراحی وب بصورت واکنش پذیر یعنی ساخت سایت های وب که بصورت خودکار خودشان را با صفحه نمایش های مربوط به انواع دستگاه ها مثل تلفن های هوشمند، تبلت ها ورایانه های رومیزی انطباق بدهند.
برای استفاده از بوت استرپ می توان فایل های آنرا از اینترنت دانلود کرده و روی سیستم خود قرار داد یا اینکه مستقیاً آدرس یک CDN را در صفحات استفاده کرد. برای دانلود آخرین نسخه بوت استرپ از آدرس getbootstrap.com استفاده می کنیم.
ایجاد اولین صفحه با بوت استرپ
- بوت استرپ از عناصر HTML و خصوصیات CSS استفاده می کند که به HTML5 نیاز دارد و زبان صفحه هم تعیین گردد. پس باید به اول صفحه وب بصورت زیر باشد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
- بوت استرپ 3 بصورت پاسخگو با اولویت اول برای موبایل طراحی شده است و سبک های موبایلی بخشی از هسته چارچوب هستند. برای اطمینان از نمایش درست و زوم کردن صفحه، از تگ meta در داخل تگ head بصورت زیر استفاده می کنیم:
بخش width=device-width عرض صفحه وب را با عرض صفحه نمایش دستگاه تنظیم می کند و بخش initial-scale=1 سطح بزرگنمایی را در ابتدای نمایش تعیین می کند.
- بوت استرپ از حامل ها (Containers) برای نگهداری محتوای سایت استفاده می کند و دو نوع کلاس حامل دارد:
- .container : که یک فضا با عرض ثابت را فراهم می کند
- .container-fluid : که یک فضا که عرض آن به اندازه تمام عرض دید کشیده می شود.
نکته : کانتینرهای بصورت تودرتو نمی توانند استفاده شوند.
مثالهای زیر کد مربوط به صفحه بوت استراپ ساده را با کانتینر با عرض ثابت و عرض شناور نشان می دهد. در این مثال فرض شده است، فایل های بوت استراپ دانلود شده و داخل پوشه ای بنام bs، در پوشه سایت قراردارد. پوشه bsحاوی زیر پوشه های زیر است:
- css: حاوی فایل های تنظیمات استایل شیت
- js : حاوی فایل های کدنویسی جاوااسکریپت برای ایجاد جلوه های ویژه
- fonts: حاوی فایل های فونت برای آیکن های گرافیکی ( glyphicon )
در بخش head هر صفحه وب برای استفاده از بوت استرپ باید فایل های لازم را بصورت زیر معرفی کنیم:
مثال اول: کانتینر با عرض ثابت
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"href="bs/css/bootstrap.min.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
مثال دوم: کانتینر با عرض شناور
. . .
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div></body>
</html>
طراحی جدول با بوت استرپ
بوت استراپ دارای چند کلاس برای طراحی جداول است. در داخل هر جدول سطر عنوان داخل تگ thead و سطرهای بدنه داخل تگ tbody قرا می گیرند:
<table class=”class-name” >
<thead><tr><th></th><th></th></tr></thead>
<tbody><tr><td></td><td></td></tr></tbody>
</table>
| نام جدول | کلاس (class) | توضیحات |
| جدول پایه | .table | جدول پایه با فقط کادرهای افقی |
| جدول نواربندی شده | .table-striped | رنگ پس زمینه سطرهای زوج و فرد متفاوت دارد |
| جدول کادربندی شده | .table-bordered | کادرهای افقی و عمودی |
| جدول هاور | .table-hover | با قرار گرفتن نشانگر ماوس روی یک سطر، های لایت می شود |
| جدول فشرده | .table-condensed | سطرها با تورفتگی کمتر و فشرده تر هستند |
مثال : جدول نواربندی
<table class="table table-striped"> ... </table>
واکنش پذیر کردن جدول
برای اینکه جدول به شدت پاسخگو بوده و در صفحه نمایش اسکرول بار افقی برای پیمایش ستون ها، همراه آن نشان داده شود.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
در جلسه بعد کلاس های بیشتری از بوت استرپ را معرفی خواهیم کرد…