کلیدها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< Bootstrap:Tutorial(تغییرمسیر از Bootstrap:کلیدها)
پرش به ناوبری پرش به جستجو


استایل های کلید

بوت استرپ برای کلیدها، استایل‌های متفاوتی فراهم می‌کند:[۱]

برای دستیابی به استایل‌های کلید بالا، بوت استرپ کلاس‌های زیر را ایجاد کرده‌است:

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

مثال زیر کد مربوط به استایل‌های متفاوت کلید را نشان می‌دهد:

مثال

<button type="button" class="btn">Basic</button>
<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>


مشاهدهٔ نتیجه


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


مشاهدهٔ نتیجه


چرا در ویژگی href مربوط به لینک یک کاراکتر # قرار می‌دهیم ؟

از آن‌جایی که هیچ صفحه‌ای برای لینک کردن به آن نداریم، و نمی‌خواهیم با پیام "۴۰۴" مواجه شویم، یک کاراکتر # را بعنوان لینک در مثال‌ها قرار می‌دهیم. در یک صفحه خاص بجای این کاراکتر باید یک آدرس (URL) واقعی قرار بگیرد.

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

بوت استرپ برای کلید چهار سایز در نظر گرفته‌است:

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

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

مثال زیر کد مربوط به اندازه‌های مختلف کلید را نشان می‌دهد:

مثال

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


مشاهدهٔ نتیجه


کلید‌های سطح بلوک

یک کلید سطح بلوک هم اندازهٔ عرض کل عنصر والد می‌شود.


برای ایجاد کلید سطح بلوک باید کلاس .bn-block اضافه شود:

مثال

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


مشاهدهٔ نتیجه


کلید‌های فعال/ غیر فعال

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


کلاس .active کلید را در حالت کلیک شده قرار می‌دهد و کلاس .disabled کلید را در حالت غیرقابل کلیک قرار می‌دهد:

مثال

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


مشاهدهٔ نتیجه


تمرینات بوت استرپ

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

برای دسترسی به مرجع کامل همهٔ کلاس‌های کلید، به مرجع کامل کلید بوت استرپ ما مراجعه کنید.

منابع آموزشی