بوت استرپ یکی از کتابخانه های و فریم ورک های HTML ، CSS و جاوا اسکریپت برای طراحی سایت های موبایلی و ریسپانسیو می باشد که توسط این فریم ورک به راحتی می توانید طراحی سایت ریسپانسیو خود را انجام دهید. طراحی سایت با بوت استرپ بسیار ساده است و کافی است نحوه کد زنی در آن را یاد بگیرید. بوت استرپ کلاس های مشخصی برای پیاده سازی اجزای صفحه دارد که کار شما را در راه اندازی نسخه موبایلی وب سایت ساده می سازد. در این مقاله به شما نحوه طراحی سایت با بوت استرپ را آموزش خواهم داد که البته برای انجام لازم است دانش کد زنی HTML و CSS را داشته باشید.
در مرحله اول لازم است فایل های مربوط به Bootstrap را از وب سایت اصلی دانلود نمایید که برای انجام این کار لازم است به وب سایت http://getbootstrap.com مراجعه نموده و بر روی کلید Download Bootstrap کلیک نموده و دوباره بر روی Download Bootstrap کلیک نمایید. فایل فشرده ای در اختیار شما قرار داده می شود که شامل سه فلدر css ، fonts و js می باشد. این فلدرها را در ریشه اصلی وب سایت و یا قالب ساخته شده خود کپی نمایید. در صورتی که در حال طراحی قالب در جوملا و یا وردپرس هستید می بایست این فلدرها را در فلدر اصلی قالب ساخته شده خود بارگذاری نمایید.
برای شروع می بایست این سه فایل را در صفحه وب سایت خود اضافه نمایید:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
آدرس های موجود در بخش بالا (href و src) را می بایست با آدرس های فایل های خود تغییر دهید. البته فراموش ننمایید که اضافه نمودن کتابخانه jquery برای اجرای Bootstrap لازم و ضروری می باشد.
هم اکنون قالب شما آماده اجرای کدهای بوت استرپ می باشد و می توانید طراحی سایت خود را آغاز نمایید.
برای آنکه در نسخه موبایلی صفحه وب سایت حالت بزرگنمایی و کوچک نمایید پیدا نکند می بایست که زیر را در بخش head قالب خود کپی نمایید.
<meta name="viewport" content="width=device-width, initial-scale=1">
کد زنی های HTML مخصوص بوت استرپ
کد زنی html در بوت استرپ را می بایست با آداب خاصی انجام دهید که در بخش زیر دستورالعمل های برنامه نویسی آموزش داده خواهد شد.
در صورتی که قصد راه اندازی وب سایت تمام صفحه را دارید می بایست دایو اصلی با کلاس container-fluid و برای وب سایت با عرض ثابت می بایست از کلاس container استفاده نمایید.
<div class="container">
...
</div>
<div class="container-fluid">
...
</div>
سیستم صفحه بندی بوت استرپ به صورت ریسپانسیو می باشد و که به صورت یک صفحه 12 ستونه در نظر گرفته می شود که کلاس های CSS از قبل تعریف شده ای برای صفحه بندی را در خود دارد.
دستورالعمل های مربوط به صفحه بندی
- کلیه کد زنی های بوت استرپ می بایست در درون دایو اصلی container و یا container-fluid قرار بگیرد.
- ردیف های مختلف صفحه را درون دایو با کلاس row قرار دهید.
- برای کد زنی صفحات از کلاس های از پیش تعریف شده .col-xs- ، .col-sm- ، .col-md- ، .col-lg- استفاده می گردد که هر کدام در سایزهای مختلف صفحه نمایش داده می شوند که در بخش پایین نحوه کار با این کلاس ها آموزش داده خواهد شد.
کلاس های .col-xs- ، .col-sm- ، .col-md- ، .col-lg- برای تعریف ستون های صفحه در سایزهای مختلف صفحه مورد استفاده قرار می گیرند که col-lg برای سایزهای حدودا 1170 پیکسل، col-md برای سایزهای حدودا 970 ، col-sm برای سایزهای حدودا 750 و col-xs برای سایزهای بسیار کوچک صفحه مانند موبایل می باشد.
جدول مربوط به ستونبندی های از پیش تعریف شده:
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # of columns | 12 | |||
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes |
نحوه استفاده از .col-md-* به این صورت می باشد که شما به جای ستاره می بایست از تعداد ستون هایی که دایو مورد نظر شما در صورتی که شما صفحه را به 12 ستون تقسیم نمایید قصد دارید ستون مورد نظر پر نمایید را می بایست تکمیل نمایید. به عنوان مثال به کد زیر دقت نمایید:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
که در کد بالا col-md-8 به معنی آن است که این دایو در سایز متوسط 970px از 12 ستون 8 ستون و col-md-4 در همین سایز از 12 ستون 4 ستون را اشغال می نماید.
برای آنکه کد بالا را برای موبایل تنظیم نمایید می بایست کد مربوط به موبایل را نیز برای موبایل به آن اضافه نمایید:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
که در کد بالا col-xs-12 به معنای آن است که در موبایل این دایو کل ردیف 12 تایی را اشغال می نماید و col-xs-6 به آن معناست که این دایو 6 ستون از ردیف 12 را پر می نماید.