اگر سوال شما هم این است bootstrap چیست باید بگوییم بنا بر گفته ی سایت رسمی Bootstrap، این فریمورک یکی از قدرتمندترین و پرطرفدار ترین framework سه زبان HTML ،CSS و JavaScript میباشد .این framework برای طراحی وب سایت یک ابزار ضروری به حساب می آید زیرا بوت استرپ علاوه بر اینکه رایگان است ،شما را از نوشتن زیاد کد های css راحت میکند. در این مقاله شما به شما می گوییم بوت استرپ چیست و با کاربردهای آن بیشتر آشنا خواهیم شد.
bootstrap چیست؟
bootstrap (بوت استرپ) یک فریمورک کدباز CSS , Javascript و HTML برای توسعه حالت واکنش گرا (responsive) وب سایت می باشد.
طراحی سایت ریسپانسیو باعث می شود که وب سایت قابل نمایش از طریق انواع گوشی های همراه و نمایشگر ها باشد و با توجه به نوع نمایشگر خود را تنظیم کند..
این فریم ورک ترکیبی از کدهای Html , CSS و Javascript است و برای اینکه به طراحی واسط های کاربری کمک کند طراحی شده است. bootstrap از CSS3 و Html5 پشتیبانی می کند.
تاریخچه بوت استرپ
بوت استرپ توسط Mark Otto و Jacob Thornton در Twitter طراحی شد و در آگوست سال 2011 در github به عنوان یک محصول کد باز منتشر شد. در ژوئن سال 2014 بوت استرپ برترین پروژه در github معرفی شد.
پیشنهاد وب رمز: مزیت های طراحی سایت با بوت استرپ چیست؟
چرا بوت استرپ
استفاده آسان: هر فردی با داشتن اطلاعات پایه از HTML و CSS می تواند کار با بوت استرپ را شروع کند.
ویژگی واکنش گرا: این ویژگی در بوت استرپ باعث می شود سایت روی گوشی، تبلت و کامپیوتر های شخصی به درستی نمایش داده شود.
رویکرد موبایلی: در بوت استرپ 3 استایل های موبایل جزء هسته این فریم ورک محسوب می شوند.
سازگاری با انواع مرورگر ها: بوت استرپ با تمام مرورگرها سازگار است (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”> تغییر دهید و نتیجه تغییرات را مشاهده کنید.
با تغییر سایز پنجره مرورگر میتوانید مشاهده کنید که چطور صفحه خود را با اندازه پنجره وفق می دهد.
همچنین برای تست صفحه سایت خود میتوانید وارد این لینک شده و آدرس سایت را در کادر بالای آن وارد نمایید:
در این سایت وضعیت مشاهده صفحه سایت شما در انواع مختلفی از سیستم ها و دستگاه ها با اندازه های مختلف صفحه نمایش، نشان داده میشود.
منبع : getbootstrap.com w3schools.com
