کلیدها
استایل های کلید
بوت استرپ برای کلیدها، استایل‌های متفاوتی فراهم می‌کند:[۱]
برای دستیابی به استایل‌های کلید بالا، بوت استرپ کلاس‌های زیر را ایجاد کرده‌است:
.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>
تمرینات بوت استرپ
مرجع کامل کلید بوت استرپ
منابع آموزشی