Bootstrap از معروف ترین چارچوب ها برای طراحی سایت ریسپانسیو با استفاده از کدهای HTML, CSS, و JS می باشد. Bootstrap به شما کمک می نماید تا به سرعت صفحات سایت خود را ریسپانسیو نمایید و در فرم ها، دکمه ها، جهت دهی ها و دیگر اجزای طراحی وب سایت می توان از آن استفاده نمود.


قبل از استفاده ار این چارچوب شما می بایست با زبان های HTML, CSS و (JavaScript/jQuery) اشنا باشید. Bootstrap دربردارنده extensions جاوا اسکریپ می باشد. به طور مختصر می توان دلایل استفاده از Bootstrap را به صورت موارد زیر شرح داد.


ریسپانسیو نمودن طراحی سایت
پشتیبانی توسط همه مرورگرها
استفاده آسان



به آسانی می توانید Bootstrap را از ادرس وب سایت getbootstrap.com دانلود نمایید.در زیر چارچوب استفاده از Bootstrap را در طراحی وب سایت به نمایش گذاشته ایم.





<!DOCTYPE html>


<html>


<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.2.0/css/bootstrap.min.css">


</head>





<body>


<div class="container">


<h1>Heading 1</h1>


<p>This is a paragraph.</p>


<p>This is a paragraph.</p>


<p>This is a paragraph.</p>


</div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


</body>


</html>








با استفاده از Bootstrap می توانید فرم ها را در فرمت عمودی، افقی ایجاد نمایید.در زیر نحوه استفاده از این چارچوب را درج نموده ایم.





<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>


منبع: Bootstrap در طراحی سایت