بررسی دکمه ها و آیکن ها در بوت استرپ
اضافه کردن یک دکمه
کلاس های دکمه، می توانند در یک عنصر <a> یا <button> یا <input> مورد استفاده قرار گیرند.
در مثال زیر، یک دکمه ی جستجو به رنگ آبی در داخل jumbotron قرار گرفته است.
برای انجام این کار می توانید از کلاس های btn-lg. و btn-info. استفاده کنید.
مثال
<div class="jumbotron">
<h1>اولین صفحه ی بوت استرپ من</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">Search</a>
</div>
<h1>اولین صفحه ی بوت استرپ من</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">Search</a>
</div>
خودتان امتحان کنید »
 |
چرا از یک علامت # درون خصوصیت href استفاده کردیم؟ هنگامی که هیچ صفحه ای برای لینک کردن نداریم، و نمی خواهیم پیغام خطای 404 را مشاهده کنیم، از یک علامت # بعنوان لینک استفاده می کنیم. |
|---|
اضافه کردن یک آیکن
بوتسترپ همچنین 200 آیکن نمادین را به ما ارائه می دهد.
برای نمایش دادن یک آیکن نمادین از کد ساده ی زیر استفاده کنید:
<span class="glyphicon glyphicon-print"></span>
کد بالا یک آیکن پرینتر را نمایش خواهد داد:
مثال زیر یک آیکن جستجو(Search) را به یک دکمه ی جستجو اضافه می کند:
مثال (آیکن ها در بوت استرپ)
<div class="jumbotron">
<h1>اولین صفحه ی بوت استرپ من</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
<h1>اولین صفحه ی بوت استرپ من</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 11334
دیدگاه‌ها
سلام و خسته نباشد
مثال اول خودتان امتحان کنید کلاس pager رو نمایش میده .
سلام ممنون از شما. مثال مورد نظر اصلاح شد.