وباکا

آموزش تخصصی برنامه نویسی وب

جلسه هشتم – قالب بندی تصاویر،دکمه ها، فرم ها و نوارهای پیمایش با بوت استرپ

بوت استرپ دارای کلاس های مختلف برای تنظیم فرم های وب ، تصاویر ، دکمه ها و نوارهای پیمایش و غیره است در ادامه به معرفی چند نمونه از این کلاسها می پردازیم.

تصاویر در بوت استرپ

برای تصاویر کلاس های زیر موجود است:

نام کلاس توصیف
img-rounded گرد کردن گوشه های تصویر
img-circle نمایش بصورت بیضی
img-thumbnail نمایش با کادر اطراف آن
img-responsive نمایش بصورت رسپانسیو

پیغام های هشدار در بوت استرپ

بوت استرپ کلاس هایی برای نمایش هشدارها و اعلانات با رنگ های متنوع دارد:

کلاس کاربرد
alert alert-success پیغام موفقیت با رنگ سبز
alert alert-info اعلامیه با رنگ آبی
aalert alert-warning هشدار با رنگ نارنجی
aalert alert-danger اعلام خطر با رنگ قرمز

همچنین برای اضافه کردن دکمه close و بسته شدن با کلیک روی آن از مثال زیر استفاده می کنیم:

<div class=”alert alert-success”>
<a href=”#” class=”close” data-dismiss=”alert” aria-label=”close”>&times;</a>
<strong>Success!</strong> Indicates a successful or positive action.
</div>

دکمه ها در بوت استرپ

مثال های زیر انواع دکمه ها را نشان می دهند:

<button type=”button” class=”btn btn-default”>Default</button>
<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: <span class=”glyphicon glyphicon-search”></span></p>
<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 مراجعه کنید.

کدنویسان - نمونه آیک های گرافیکی بوت استرپ

دراپ دان ها در بوت استرپ

دکمه هایی که با کلیک روی آنها منو باز می شود:

کدنویسان - ساخت راپ دان در بوت استرپ
برای ساخت منوی مقابل از کد زیر استفاده می کنیم:

<div class=”dropdown”>
<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>

نوارهای پیمایش سایت

نوار پیمایش معمولا در بالای صفحات سایت قرار می گیرد و حاوی پیوندهایی به قسمت های مهم سایت است. کد زیر یک نوار پیمایش با تنظیمات پیش فرض نمایش خواهد داد:

<body>
<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 استفاده کنیم، نوار پیمایش با زمینه مشکی و رنگ متن سفید نمایش داده می شود.

فرم ها در بوت استرپ

برای ساخت فرم ها از الگوی زیر استفاده کنید:

<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>

مطالب مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب