آموزش ساخت دکمه در بوت استرپ و انواع دکمه ها

کلیدها در Bootstrap

Bootstrap با CSS

این فصل ، نحوه استفاده از کلیدها در Bootstrap را با ذکر مثال هایی پوشش می دهد. هر چیزی که در یک کلاس btn. ارائه می شود ، ظاهر پیش فرض یک کلید خاکستری با گوشه های گرد را به ارث می برد. با این حال ، Bootstrap گزینه هایی را برای سبک کلیدها فراهم می کند که در جدول زیر خلاصه شده اند :

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

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

خروجی قطعه کد بالا ، به صورت زیر می باشد :

اندازه کلیدها

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

مثال زیر ، موارد جدول فوق را نشان می دهد :

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

خروجی قطعه کد بالا ، به صورت زیر می باشد :

وضعیت کلید

Bootstrap ، کلاس هایی را فراهم می کند که به ما اجازه می دهند وضعیت کلیدها را فعال ، غیر فعال و ... نماییم که هر کدام از این حالت ها را در بخش های زیر مورد بحث قرار می دهیم.

وضعیت فعال

هنگامی که کلید فعال باشد ، به صورت قابل فشار دادن (با پس زمینه تیره تر ، حاشیه تیره تر و دارای سایه) ظاهر می شود. جدول زیر خلاصه ای از کلاس های استفاده شده برای ایجاد عناصر کلید و عناصر anchor فعال را ارائه می کند :

مثال زیر موارد فوق را نشان می دهد :

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

خروجی قطعه کد فوق ، به صورت زیر می باشد :

وضعیت غیرفعال

وقتی که یک کلید را غیرفعال می کنیم ، رنگ آن 50 درصد محو می شود و گرادیان را از دست می دهد.

جدول زیر خلاصه ای از کلاس های استفاده شده برای عنصر button و عنصر anchor غیر فعال کننده را ارائه می دهد :

مثال زیر موارد فوق را نشان می دهد :

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

خروجی قطعه کد بالا ، به صورت زیر می باشد :

تگ های Button

ما می توانیم از کلاس های button با عنصر <a> ، <button> یا <input> استفاده کنیم. اما توصیه می شود که آن را بیشتر با عناصر <button> استفاده کنیم تا از مسائل مربوط به ناسازگاری میان مرورگرها جلوگیری شود.

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

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

خروجی قطعه کد بالا ، به صورت زیر می باشد :