أزرار التمهيد
أنماط الزر
يوفر Bootstrap أنماطًا مختلفة من الأزرار:
لتحقيق أنماط الأزرار أعلاه ، يحتوي 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>
يمكن استخدام فئات الأزرار في <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 أربعة أحجام للأزرار:
الفئات التي تحدد الأحجام المختلفة هي:
.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>
أزرار مستوى الكتلة
زر مستوى الكتلة يمتد عبر العرض الكامل للعنصر الأصل.
إضافة فئة .btn-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>
استكمال مرجع زر التمهيد
للحصول على مرجع كامل لجميع فئات الأزرار ، انتقل إلى مرجع زر Bootstrap الكامل .