آخرین نسخه بوت استراپ یعنی Bootstrap 4 به تازگی در آذر ماه منتشر شده است. گرچه نسخه کنونی نسخه beta2 می باشد ولی تقریبا تمام کلاس ها و مشخصات نهایی شده و فرصت خوبی برای یادگیری نسخه چهارم بوت استراپ می باشد. این آموزش ها در چند سری به صورت مقاله و به تدریج خدمت شما عزیزان ارائه می گردد.
معرفی بوت استراپ
Bootstrap محبوب ترین کتابخانه component-front-end در جهان برای ساخت پروژه های واکنشگرا، با اولویت طراحی برای دستگاه های همراه در وب می باشد. بوت استرپ مجموعه ای از ابزار های منبع باز برای توسعه با همراه HTML، CSS و JS می باشد.
بررسی اجمالی
Bootstrap شامل مولفه ها و گزینه هایی برای چیدمان پروژه بوت استراپ، شامل دسته بندی container ها ، یک سیستم grid قدرتمند، مدیاهای انعطاف پذیر و کلاس های ابزارهای واکنشگرا می باشد.
چطور از بوت استراپ استفاده کنم ؟
هنگامی که شما فقط نیاز به ترکیب CSS یا JS کامپایل شده بوت استراپ دارید می توانید از CDN Bootstrap استفاده کنید. CDN مخفف Content Delivery Network و به معنی شبکه تحویل محتوا می باشد. CDN در اصل یک سیستم سرور توزیع (شبکه ای) است که صفحات و سایر محتوای وب را، بر اساس مکان های جغرافیایی کاربر، مبداء صفحه وب و سرور تحویل گیرنده ی محتوا به کاربر ارائه می کند.
شما با قرار دادن کدهای زیر در صفحه وب تان می توانید بدون اشغال شدن منابع سرور خود از قابلیت های بوت استراپ استفاده کنید :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
همچنین می توانید با قرار دادن کدهای زیر در صفحه وب JS, Popper.js, و jQuery را در چیدمان عناصر صفحه استفاده کنید :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
حالا قدم به قدم با امکانات بوت استراپ آشنا می شویم.
Container ها
Container ها اساسی ترین عنصر چیدمان در بوت استراپ هستند و در هنگام استفاده از سیستم پیش فرض grid مورد نیاز می باشند. از بین Container واکنشگرا با عرض ثابت ( یعنی max-width آن در نقاط شکست تغییر می کند ) یا عرض شناور (یعنی همیشه 100٪ عرض صفحه را اشغال می کند ) انتخاب کنید.
با اینکه Container ها را می توان درون یکدیگر قرار داد ، اما اکثر چیدمان ها نیازی به Container تودرتو ندارند.
<div class="container">
<!-- Content here -->
</div>استفاده از کلاس .container-fluid برای Container تمام عرض viewport را می گیرد.
از آنجا که بوت استراپ برای طراحی با اولویت موبایل توسعه داده شده ، ما برای چیدمان عناصر صفحه و رابط کاربری مون از مدیا کوئری های سودمند برای ایجاد نقاط شکست معقول استفاده می کنیم.
