آغاز به کار با Bootstrap

Bootstrap چیست؟

  • Bootstrap یک فریم ورک رایگان برای توسعه سریع و آسان صفحات وب می باشد
  • Bootstrap بر پایه ی HTML و CSS به شما الگوهای زیبای طراحی برای تایپوگرافی، فرم ها، Button ها، جداول، Navigation، صفحات روی فرم(Modal) و تصاویر گردشی(Image Carousels) ارائه می کند و تا حد زیادی شما را از سایر پلاگین های Javascript در این زمینه ها بی نیاز می سازد
  • Bootstrap همچنین به راحتی قابلیت Responsive بودن صفحات را به سایت شما اضافه می کند
×Responsive بودن یک سایت به این معنی است که طراحی سایت بر اساس سخت افزاری که در آن نمایش داده می شود جلوه ی خوبی داشته باشد، به طور مثال در موبایل همانقدر کارامد باشد که بر روی کامپیوترهای دسک تاپ

تاریخچه

Bootstrap توسط مارک اتو و جاکوب تورنتن در توئیتر نوشته شد و به عنوان یک محصول سورس باز (Open Source) در آگوست سال ۲۰۱۱ بر روی GitHub قرار گرفت.
در ژوئن ۲۰۱۴، Bootstrap پروژه اول GitHub شد.

چرا Bootstrap؟

مزایا

  • سهولت استفاده : هر کسی با دانش مقدماتی از HTML و CSS می تواند به راحتی از آن استفاده کند
  • Responsive بودن : CSS های سازگار Bootstrap آن را برای موبایل، تبلت و دسک تاپ مناسب می سازد
  • سازگاری با انواع مرورگر : Bootstrap با همه انواع مرورگرهای مدرن سازگار است (مانند Chrome،Firefox،IE،Safari،Opera،Edge و …)

نحوه استفاده از Bootstrap

از دو راه می توانید بوت استرپ را در سایت شخصی خود استفاده نمایید :

  • دانلود بوت استرپ از getbootstrap.com
  • استفاده از CDN

دانلود Bootstrap

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

getbootstrap.com

استفاده از CDN

چنانچه مایل به دانلود Bootstrap نیستید، می توانید از CDN (Content Delivery Network) استفاده نمایید.

MaxCDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"></script>
×

مزیت استفاده از CDN :

بسیاری از طراحان دیگر نیز برای استفاده از Bootstrap از MaxCDN استفاده می کنند و بنابراین شانس اینکه کاربری که سایت شما را باز می کند، قبلا این نسخه را کش کرده باشد، بسیار بالاست و همین موضوع سرعت لود سایت شما را بسیار بالا می برد(در صورتیکه اگر نسخه دانلود شده آن را خودتان هاست کرده باشید، به هر حال دوباره کاربر مجبور به دانلود کردن آن است و تسخیص نمی دهد که نسخه Bootstrap شما همان نسخه کش شده از CDN است). همچنین با استفاده از CDN شما فایلهای مورد نیازتان را از نزدیکترین سرور دریافت خواهید کرد که این خود زمان لود را بسیار کاهش می دهد.

ایجاد اولین صفحه با Bootstrap

۱- افزودن داکتایپ HTML5

بوت استرپ از خصوصیات CSS و المانهای HTML استفاده می کند که به داکتایپ HTML5 نیاز دارند.
همیشه داکتایپ HTML5 را در ابتدای صفحه تان قرار دهید، همچنین خصیصه ی زبان و نوع Character set را هم تنظیم نمایید.

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 </head>
</html>

۲- Bootstrap 3 بر پایه ی موبایل می باشد

بوت استرپ ۳ به گونه ای در نظر گرفته شده تا بهترین نتیجه را برای نمایش روی موبایل داشته باشد. استایل های مربوط به موبایل قسمتی از هسته ی این فریم ورک می باشند.
برای حصول اطمینان از رندر و بزرگنمایی با انگشت مناسب سایت، تگ <meta> زیر را در داخل المان <head> بنویسید.

<meta name="viewport" content="width=device-width, initial-scale=1">

بخش width=device-width تعیین می کند که عرض صفحه با عرض نمایش دستگاه یکسان شود.
بخش initial-scale=1 درجه ی بزرگنمایی اولیه صفحه را برای اولین باری که در مرورگر لود می شود تنظیم می نماید.

۳- Container ها

برای استفاده از Bootstrap باید محتوی سایت شما در داخل Container قرار گیرد (wrap کردن). دو نوع Container وجود دارد:
۱- کلاس container. که محتوی سایت شما را در عرضی محدود حفظ می کند.
۲- کلاس container-fluid. که عرض سایت شما را بر اساس viewport تنظیم نموده و سایت شما را به صورت عرض کامل (Full Width) نمایش می دهد.

×نکته!
از Container ها نمی توان به صورت تو در تو استفاده نمود، بدین معنی که امکان قرار دادنیک Container در داخل Container دیگر وجود ندارد.

دو مثال صفحه مبتدی Bootstrap

مثال اول کد پایه ی Bootstrap برای یک صفحه با عرض ثابت می باشد:

مثال

<!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.5/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.5/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>

تمرین کنید

مثال دوم، کد پایه ی Bootstrap برای یک صفحه با عرض فول می باشد:

مثال

<!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.5/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.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
 <h1>My First Bootstrap Page</h1>
 <p>This is some text.</p> 
</div>

</body>
</html>

تمرین کنید

 تحریریه وب سایت بیاموز