بوت استرپ دارای کلاس های مختلف برای تنظیم فرم های وب ، تصاویر ، دکمه ها و نوارهای پیمایش و غیره است در ادامه به معرفی چند نمونه از این کلاسها می پردازیم.
تصاویر در بوت استرپ
برای تصاویر کلاس های زیر موجود است:
| نام کلاس | توصیف |
| img-rounded | گرد کردن گوشه های تصویر |
| img-circle | نمایش بصورت بیضی |
| img-thumbnail | نمایش با کادر اطراف آن |
| img-responsive | نمایش بصورت رسپانسیو |
پیغام های هشدار در بوت استرپ
بوت استرپ کلاس هایی برای نمایش هشدارها و اعلانات با رنگ های متنوع دارد:
| کلاس | کاربرد |
| alert alert-success | پیغام موفقیت با رنگ سبز |
| alert alert-info | اعلامیه با رنگ آبی |
| aalert alert-warning | هشدار با رنگ نارنجی |
| aalert alert-danger | اعلام خطر با رنگ قرمز |
همچنین برای اضافه کردن دکمه close و بسته شدن با کلیک روی آن از مثال زیر استفاده می کنیم:
<a href=”#” class=”close” data-dismiss=”alert” aria-label=”close”>×</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
دکمه ها در بوت استرپ
مثال های زیر انواع دکمه ها را نشان می دهند:
<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-success”>Success</button>
<button type=”button” class=”btn btn-info”>Info</button>
<button type=”button” class=”btn btn-warning”>Warning</button>
<button type=”button” class=”btn btn-danger”>Danger</button>
<button type=”button” class=”btn btn-link”>Link</button>
آیکن های گرافیکی(glyphicon) در بوت استرپ
برای اضافه کردن آیکن های گرافیکی مشابه شکل مقابل به صفحه از کلاس های مربوطه استفاده می کنیم:
مثال :
<p>Search icon on a button:
<button type=”button” class=”btn btn-default”>
<span class=”glyphicon glyphicon-search”></span> Search
</button>
</p>
بجای کلاس glyphicon-search برای نمایش اشکال مختلف از کلاس های مشخص استفاده می کنیم. برای پیداکردن اشکال دیگر، به مراجع آموزش بوت استراپ مثل w3schools.com مراجعه کنید.
دراپ دان ها در بوت استرپ
دکمه هایی که با کلیک روی آنها منو باز می شود:
برای ساخت منوی مقابل از کد زیر استفاده می کنیم:
<button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Dropdown Example
<span class=”caret”></span></button>
<ul class=”dropdown-menu”>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li><li class=”divider”></li>
<li><a href=”#”>JavaScript</a></li>
</ul>
</div>
نوارهای پیمایش سایت
نوار پیمایش معمولا در بالای صفحات سایت قرار می گیرد و حاوی پیوندهایی به قسمت های مهم سایت است. کد زیر یک نوار پیمایش با تنظیمات پیش فرض نمایش خواهد داد:
<nav class=”navbar navbar-default”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<a class=”navbar-brand” href=”#”>WebSiteName</a>
</div>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Page 1</a></li>
<li><a href=”#”>Page 2</a></li>
<li><a href=”#”>Page 3</a></li>
</ul>
</div>
</nav>
اگر بجای کلاس navbar navbar-default از کلاس navbar navbar-inverse استفاده کنیم، نوار پیمایش با زمینه مشکی و رنگ متن سفید نمایش داده می شود.
فرم ها در بوت استرپ
برای ساخت فرم ها از الگوی زیر استفاده کنید:
<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>