سبد (0)

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

معرفی دکمه های بوت استرپ

Wiki

بوت استرپ هفت نوع دکمه را به ما  ارائه می دهد:

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

  • btn-default.
  • btn-primary.
  • btn-success.
  • btn-info.
  • btn-warning.
  • btn-danger.
  • btn-link.

در مثال زیر، این دکمه ها را ایجاد کرده ایم. به آن دقت کنید و سپس آن را اجرا کنید:

مثال (دکمه های بوت استرپ)

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

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

این کلاس ها می توانند بر روی یک عنصر <a> یا <button> یا <input> مورد استفاده قرار گیرند:

 

مثال (دکمه های بوت استرپ)

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

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

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

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

انواع دکمه ها، با اندازه های مختلف

Wiki

بوت استرپ چهار نوع دکمه با اندازه های مختلف را به ما ارائه می دهد:

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

  • btn-lg.
  • btn-md.
  • btn-sm.
  • btn-xs.

در مثال زیر، روش ایجاد دکمه ها با اندازه های مختلف، نشان داده شده است:

مثال (دکمه های بوت استرپ)

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

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

دکمه ها با عرض کامل:

Wiki

یک دکمه با عرض کامل، به دکمه ای گفته می شود که به اندازه ی عرض عنصر والد خود، گسترده می شود: 

برای ایجاد یک دکمه با عرض کامل می توانید از کلاس btn-block. استفاده کنید:

مثال (دکمه های بوت استرپ)

<button type="button" class="btn btn-primary btn-block">Button 1</button>

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

دکمه های فعال و غیر فعال در بوت استرپ

Wiki

در بوت استرپ، یک دکمه می تواند به حالت فعال(قابل فشار دادن) یا غیرفعال(غیر قابل کلیک) در بیاید:   

کلاس active. یک دکمه را به صورت قابل فشار دادن درمی آورد و کلاس disabled. یک دکمه را به صورت غیر قابل کلیک در می آورد:

مثال (دکمه های بوت استرپ)

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

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

مرجع کامل دکمه های بو اتسترپ

Wiki

برای مشاهده ی  یک مرجع کامل از تمام کلاس های دکمه ی بوت استرپ، می توانید مرجع دکمه های بوت استرپ را مطالعه نمایید.

نوشته شده توسط احسان عباسی
بازدید: 20953

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه