بوتسترپ (Bootstrap) چیست؟
Bootstrap یک فریم ورک سمت کاربر است، که می توان از آن به سرعت و به سادگی برای توسعه ی وب استفاده کرد.
-
Bootstrap شامل HTML و CSS مبتنی بر طراحی قالب هایی برای تایپوگرافی ، فرم ها ، دکمه ها ، جدول ها ، ناوبری و بسیاری موارد دیگر می باشد.
-
Bootstrap به خوبی پلاگین های جاوااسکریپت است.
-
Bootstrap به شما این امکان را می دهد که به آسانی، طرح های واکنش گرا را اجرا کنید.
طراحی واکنش گرا در وب چیست؟
منظور از طراحی واکنش گرای وب، ایجاد وب سایت هایی است که به طور اتوماتیک خودشان را برای خوب به نمایش درآمدن در تمام دستگاه ها از تلفن های کوچک گرفته تا کامپیوترهای بزرگ تنظیم می کنند.
تاریخچه Bootstrap
Bootstrap در ابتدا توسط مارک اتو و جاکوب تورنتون در توییتر ساخته شد و در آگوست 2011 به عنوان یک محصول open source روی GitHub منتشر شد.
در ژوئن 2014 ، بوت استرپ در سایت GitHub پروژه شماره 1 بود.
دلایل استفاده از Bootstrap چیست ؟
مزایای استفاده از بوت استرپ
استفاده آسان : هر شخصی با یک دانش ابتدایی از HTML و CSS می تواند شروع به استفاده از بوتسترپ نماید.
ویژگی واکنش گرا بودن : کدهای واکنش گرای css بر روی موبایل ها، تبلت ها و کامپیوترها تنظیم شده اند.
رویکرد واکنشگرا بودن به موبایل (Mobile-first) : در Bootstrap 3 ، استایل های واکنشگرا به موبایل، بخشی از هسته فریم ورک را تشکیل می دهند.
سازگاری با مرورگرها : Bootstrap با تمام مرورگرهای مدرن (کروم، فایرفاکس، اینترنت اکسپلورر و سافاری و اپرا) سازگار است.
Bootstrap را از کجا دریافت کنیم ؟
برای شروع استفاده از Bootstrap بر روی وب سایت دو روش وجود دارد.
شما می توانید:
-
Bootstrap را از سایت getbootstrap.com دانلود کنید.
-
Bootstrap را بوسیله یک CDN اضافه کنید.
دانلود کردن Bootstrap
چنانچه شما می خواهید Bootstrap را دانلود کنید و آن را در هاست خود ذخیره کنید، به سایت getbootstrap.com رفته و دستوالعمل هایی که در آنجا وجود دارد را انجام دهید.
اضافه کردن Bootstrap از یک CDN
اگر نمی خواهید Bootstrap را دانلود کنید و آن را در هاست خود ذخیره کنید، می توانید آن را از یک CDN(شبکه ی تحویل محتوا) اضافه کنید.
سایت MaxCDN، پشتیبانی CDN را برای CSS و JAVASCRIPT از بوتسترپ ارائه می دهد و jQuery را نیز ارائه می دهد.
:MaxCDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
یکی از مزیت های استفاده از Bootstrap CDN
بسیاری از کاربران هنگام بازدید از یک سایت دیگر، قبلا بوتسترپ را از MaxCDN دانلود کرده اند. در نتیجه زمانیکه افراد از سایت شما بازدید می کنند، Bootstrapاز cache دانلود می شود ، که این مسئله باعث افزایش سرعت لود می شود. علاوه بر آن اکثر شبکه های تحویل محتوا (CDN) مطمئن هستند که زمانیکه کاربر درخواست یک فایل را دارد ، آن درخواست توسط نزدیک ترین سرور پاسخ داده خواهد شد که این هم باعث افزایش سرعت لود می شود.
ایجاد اولین صفحه ی وب با Bootstrap
1. اضافه کردن doctype
Bootstrap از عناصر HTML و CSS استفاده می کند که استفاده از doctype در آنها ضروری است.
همیشه doctype را در ابتدای صفحه اضافه کنید، و همچنین خصوصیت lang و مجموعه کاراکترهای صحیح را نیز وارد کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 واکنشگرا به موبایل است (mobile-first)
3. Bootstrap طوری طراحی شده است، تا نسبت به دستگاه های موبایل واکنشگرا باشد. استایل های واکنشگرا به موبایل قسمتی از هسته ی این فریم ورک می باشند.
برای اطمینان از ارائه ی مناسب ویژگی ها ، تگ <meta> زیر را داخل عنصر <head> اضافه کنید:
<meta name="viewport" content="width=device-width, initial-scale=1">
قسمت width=device-width عرض صفحه را متناسب با عرض دستگاه تنظیم می کند. (که بسته به نوع دستگاه متفاوت خواهد بود)
قسمت initial-scale=1 زمانی که صفحه برای اولین بار توسط مرورگر لود می شود. ، میزان زوم اولیه را تنظیم می کند.
3. Container ها
Bootstrap برای اینکه محتوای سایت را بسته بندی کند نیاز به یک عنصر در بردارنده (Container) دارد. 2 کلاس Container برای بسته بندی کردن وجود دارد:
کلاس container. که یک Container واکنش گرا با عرض ثابت ایجاد می کند.
کلاس container-fluid. که یک Container با عرض کامل ایجاد می کند، و کل عرض صفحه را می پوشاند.
نکته : Container ها به صورت تو در تو نیستند ( به این معنی که شما نمی توانید یک Container را داخل Container دیگر قرار دهید.)
ایجاد دو صفحه ساده با Bootstrap
مثال زیر کدهای یک صفحه Bootstrap ساده را نشان می دهد. (با استفاده از یک Container واکنشگرا با عرض ثابت )
<!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">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<scriptsrc="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 ساده را نشان می دهد. (با استفاده از یک Container واکنشگرا با عرض کامل)
<!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">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<scriptsrc="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>