کلیدها
استایل های کلید
بوت استرپ ۴ استایل‌های مختلفی برای کلیدها فراهم می‌کند:[۱]
مثال
1 <button type="button" class="btn">Basic</button>
2 <button type="button" class="btn btn-primary">Primary</button>
3 <button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
9 <button type="button" class="btn btn-light">Light</button>
10 <button type="button" class="btn btn-link">Link</button>
کلاس‌های کلید را می‌توان در یک عنصر <a> ،<button> یا <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) واقعی قرار بگیرد.طرح کلی (به انگلیسی: Outline) کلید
بوت استرپ ۴ هشت کلید کادر دار (به انگلیسی: Outline) / طرح کلی را ایجاد کرده‌است:
مثال
1 <button type="button" class="btn btn-outline-primary">Primary</button>
2 <button type="button" class="btn btn-outline-secondary">Secondary</button>
3 <button type="button" class="btn btn-outline-success">Success</button>
4 <button type="button" class="btn btn-outline-info">Info</button>
5 <button type="button" class="btn btn-outline-warning">Warning</button>
6 <button type="button" class="btn btn-outline-danger">Danger</button>
7 <button type="button" class="btn btn-outline-dark">Dark</button>
8 <button type="button" class="btn btn-outline-light text-dark">Light</button>
اندازه های کلید
از کلاس .btn-lg برای کلیدهای بزرگ و کلاس .btn-sm برای کلیدهای کوچک استفاده می‌شود:
مثال
1 <button type="button" class="btn btn-primary btn-lg">Large</button>
2 <button type="button" class="btn btn-primary">Default</button>
3 <button type="button" class="btn btn-primary btn-sm">Small</button>
کلیدهای سطح بلوک
کلاس .btn-block برای ایجاد کلید سطح بلوک به کار می‌رود که به اندازه عرض کل والد می‌شد.
مثال
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
کلیدهای فعال / غیرفعال
یک کلید می‌تواند در حالت فعال (کلیک شده) یا در حالت غیر فعال (غیر قابل کلیک کردن) باشد:
کلاس .active کلید را در حالت کلیک شده قرار می‌دهد و ویژگی disabledکلید را در حالت غیرقابل کلیک قرار می‌دهد. دقت کنید که عنصرهای <a> از ویژگی غیرفعال پشتیبانی نمی‌کنند و بنابراین از کلاس .disabled برای اینکه ظاهر کلید هم غیرفعال شود استفاده می‌شود.
مثال
1 <button type="button" class="btn btn-primary active">Active Primary</button>
2 <button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
3 <a href="#" class="btn btn-primary disabled">Disabled Link</a>
کلیدهای چرخنده (به انگلیسی: Spinner)
می‌توانید “spinner” را به یک کلید اضافه کنید که در مورد آن در آموزش BS4 Spinners بیشتر خواهید آموخت:
مثال
1 <button class="btn btn-primary">
2 <span class="spinner-border spinner-border-sm"></span>
3 </button>
4
5 <button class="btn btn-primary">
6 <span class="spinner-border spinner-border-sm"></span>
7 Loading..
8 </button>
9
10 <button class="btn btn-primary" disabled>
11 <span class="spinner-border spinner-border-sm"></span>
12 Loading..
13 </button>
14
15 <button class="btn btn-primary" disabled>
16 <span class="spinner-grow spinner-grow-sm"></span>
17 Loading..
18 </button>
منابع آموزشی