کلیدها

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


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

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

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

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

مثال

1 <button type="button" class="btn">Basic</button>
2 <button type="button" class="btn btn-default">Default</button>
3 <button type="button" class="btn btn-primary">Primary</button>
4 <button type="button" class="btn btn-success">Success</button>
5 <button type="button" class="btn btn-info">Info</button>
6 <button type="button" class="btn btn-warning">Warning</button>
7 <button type="button" class="btn btn-danger">Danger</button>
8 <button type="button" class="btn btn-link">Link</button>

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

مثال

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

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

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

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

بوت استرپ برای کلید چهار سایز در نظر گرفته‌است:Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

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

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

مثال

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

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

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



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

مثال

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

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

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



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

مثال

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

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



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

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


منابع آموزشی