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

چاپ

اضافه کردن یک دکمه

Wiki

کلاس های دکمه، می توانند در یک عنصر <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>

خودتان امتحان کنید »
Note

چرا  از یک علامت  # درون خصوصیت href  استفاده کردیم؟

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


اضافه کردن یک آیکن

Wiki

بوتسترپ همچنین 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>

خودتان امتحان کنید »