Bootstrap 4 أزرار
أنماط الزر
يوفر Bootstrap 4 أنماطًا مختلفة من الأزرار:
مثال
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
يمكن استخدام فئات الأزرار في <a>، <button>أو
<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 للارتباط؟
نظرًا لعدم وجود أي صفحة لربطها بها ، ولا نريد الحصول على رسالة "404" ، فإننا نضع # كرابط. في الحياة الواقعية ، يجب أن يكون بالطبع عنوان URL حقيقي لصفحة "البحث".
مخطط الزر
يوفر Bootstrap 4 ثمانية أزرار خارجية / حدود:
مثال
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
أحجام الأزرار
استخدم .btn-lgفئة الأزرار الكبيرة أو .btn-smفئة الأزرار الصغيرة:
مثال
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<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الفئة لجعلها تظهر بشكل مرئي معطلة.
مثال
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
أزرار سبينر
يمكنك أيضًا إضافة "spinners" إلى الزر ، والتي ستتعلم المزيد عنها في برنامجنا التعليمي BS4 Spinners :
مثال
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>