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

با سلام خدمت همراهان عزیز وب سایت پرنیان طرح

در این بخش میخواهیم بوت استرپ 4 را به شما معرفی کنیم.

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

ساختار اصلی بوت استرپ سیستم گرید (بخش بندی کردن) است.

با گرید بندی میتوانیم صفحه را به صورتی که میخواهیم بخش بندی کنیم.

بوت استراپ یک قالب و فریم ورک برای طراحی ریسپانسیو سایت است که از css  ، html و javascript تشکیل یافته است.

منظور از ریسپانسیو کردن یعنی اینکه سایت شما در اندازه های مختلف به هم نریزد و اندازه اش در موبایل ، لپ تاپ و سایر اندازه های صفحات کامپیوتری به درستی نمایش داده شود.

جهت ریسپانسیو کردن شما میتوانید از فریم ورک های مختلفی استفاده نمایید که یکی از محبوب ترین فریم ورک ها Bootstrap است.

Bootstrap 4 چیست ؟

بوت استرپ 4 جدیدترین ورژن بوت استرپ است که با عناصر جدید تر ، استایل دهی سریعتر و آسانتر و بسیار ریسپانسیو تر است.

این نسخه از آخرین ورژن قطعی و کامل مرورگر های اصلی و پایگاه داده ها پشتیبانی میکند.

اگرچه اینترنت explorer 9  و پایین تر پشتیبانی نشده است.

فایل هایی که میتوانند در بوت استراپ قرار بگیرند :

1. Bootstrap.css   فریم ورک css

2. Bootstrap.js   فریم ورک javascript

3. Glyphicons   فونت ها

مزیت های Bootstrap :

_ طراحی ریسپانسیو سایت در موبایل ، تبلت ، لپ تاپ ، مانتیتور های صفحه بزرگ

_فریم ورک سمت کاربر رایگان ، برای توسعه ی رایگان و سریع وب سایت

_بوت استراپ شامل پایه های html و css است و قالب فرم ها ، دکمه ها ، جداول و بسیاری از پلاگین های انتخابی در جاوا اسکریپت است.

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

استفاده ی آسان :

هر کسی تنها با داشتن اطلاعات پایه از html و css میتواند از بوت استرپ استفاده کند.

ویژگی ریسپانسیو :

بوت استراپ css ریسپانسیو شده را به موبایل ، تبلت ، و لپ تاپ تطبیق میدهد.

رویکرد اولیه ی موبایل :

در بوت استرپ ، اولین استایل های موبایل بخشی از هسته ی فریم ورک هستند.

مرورگرهای سازگار :

بوت استرپ 4 با تمام مرورگرهای مدرن سازگار است (کروم ، فایر فاکس ، اینترنت explore 10+ ، …..)

دانلود Bootstrap :

اگر میخواهید Bootstrap 4 را برای خودتان دانلود کنید ، به این آدرس https://www.getbootstrap.com مراجعه کنید و دستورالعمل ها را اینجا دنبال کنید.

containers :

بوت استرپ 4 همچنین نیازمند یک محتوای عنصر جهت بسته بندی فهرست های سایت است.

دو نوع کلاس container وجود دارد که میتوانید یکی از آن ها را انتخاب کنید.

1- کلاس container که شامل فضایی با عرض ثابت ریسپانسیو است.

2- کلاس container-fluid که شامل یک فضایی با عرض کامل صفحه که کل صفحه ای را که میخواهد نمایش دهد نشان میدهد.

کلاس container :

در مثال زیر یک نمونه مثال از کلاس container را ببینید :

[php]

<div class=”container”>
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>

[/php]

نتیجه مثال بالا را از این لینک بببینید.

کلاس container_fluid :

یک نمونه مثال از کلاس container_fluid در مثال زیر به شما نشان میدهم:

[php]

<div class=”container-fluid”>
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>

[/php]

نتیجه مثال بالا را در این لینک ببینید و کلاس های container و container_fluid مقایسه کنید.