bootstrap و کاربرد آن
تاریخچه بوت استرپ:
بوت استرپ توسط Mark Otto و Jacob Thornton در Twitter طراحی شد و در آگوست سال ۲۰۱۱ در github به عنوان یک محصول کد باز منتشر شد.
در ژوئن سال ۲۰۱۴ بوت استرپ برترین پروژه در github معرفی شد.
چرا بوت استرپ
استفاده آسان: هر فردی با داشتن اطلاعات پایه از HTML و CSS می تواند کار با بوت استرپ را شروع کند.
ویژگی واکنش گرا: این ویژگی در بوت استرپ باعث می شود سایت روی گوشی، تبلت و کامپیوتر های شخصی به درستی نمایش داده شود.
رویکرد موبایلی: در بوت استرپ ۳ استایل های موبایل جزء هسته این فریم ورک محسوب می شوند.
سازگاری با انواع مرورگر ها: بوت استرپ با تمام مرورگرها سازگار است (Chrome, Firefox, Internet Explorer, Safari و Opera).
بوت استرپ را از کجا دریافت کنیم؟
برای شروع کار با بوت استرپ دو راه پیش روی شماست:
۱– بوت استرپ را دانلود کنید. به سایت getbootstrap.com مراجعه کنید و طبق دستورالعمل پیش بروید.استفاده و دانلود بوت استرپ کاملا رایگان می باشد.
۲– از طریق CDN که مخفف Content Delivery Network است و محتوای مورد نیاز کاربر را با توجه به موقعیت جغرافیایی آن کاربر از نزدیک ترین سرور فراهم می کند. برای این کار می توانید به صورت زیر از MaxCDN استفاده کنید که علاوه بر جاوا اسکریپت و CSS، شامل jQuery نیز می باشد.
MaxCDN:
<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
<!– jQuery library –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<!– Latest compiled JavaScript –>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>
مراحل ساخت اولین صفحه وب با بوت استرپ:
یک فایل متنی را باز کنید مطابق با مراحل زیر پیش روید.
۱– doctype مربوط به HTML5 را اضافه کنید به صورت زیر
<!DOCTYPE html>
۲– بوت استرپ ۳ همان طور که گفته شد برای نمایش وب سایت روی تلفن های همراه طراحی شده است. برای نمایش درست وب سایت روی گوشی این تگ را باید اضافه کنید:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
قسمت width=device-width عرض صفحه را مطابق با نوع نمایشگر تنظیم می کند و قسمت initial-scale=1 زمانی که صفحه برای بار اول از طریق مرورگر لود می شود اقدام به تنظیم میزان بزرگنمایی می کند.
۳– Container
محتوای سایت شما باید داخل یکی از کلاس های زیر قرار بگیرد:
کلاس container با عرض ثابت قابل استفاده به صورت <div class=”container”></div>
کلاس container-fluid که کل صفحه را در برمی گیرد <div class=”container-fluid”></div>
در نهایت فایل شما به این صورت خواهد بود:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
می توانید خط <div class=”container”> را به <div class=”container-fluid”> تغییر دهید و نتیجه تغییرات را مشاهده کنید.
