شبيبة زر (button.js)
استخدام هذا البرنامج المساعد إذا كنت ترغب في الحصول على مزيد من السيطرة على الأزرار الخاصة بك.
لتعليمي حول أزرار، اقرأ Bootstrap أزرار التعليمي .
فئات زر البرنامج المساعد
الطبقات أدناه يمكن استخدام أسلوب أي <a>, <button> ، أو <input> العنصر:
| صف مدرسي | وصف | مثال |
|---|---|---|
| .btn | ويضيف التصميم الأساسي لأي زر | جربها |
| .btn-default | يشير إلى وجود / الزر الافتراضي القياسية | جربها |
| .btn-primary | يوفر الوزن البصري الإضافي ويحدد الإجراءات الأولية في مجموعة من الأزرار | جربها |
| .btn-success | يشير إلى عمل ناجح أو إيجابي | جربها |
| .btn-info | زر السياقية لرسائل التنبيه إعلامية | جربها |
| .btn-warning | يشير ينبغي اتخاذ الحذر مع هذا العمل | جربها |
| .btn-danger | يشير إلى عمل خطير أو سلبي محتمل | جربها |
| .btn-link | يجعل زر تبدو مثل وصلة (ما زال لديهم سلوك زر) | جربها |
| .btn-lg | يجعل زر كبير | جربها |
| .btn-sm | يجعل زر صغير | جربها |
| .btn-xs | يجعل زر صغير إضافي | جربها |
| .btn-block | يجعل زر على مستوى كتلة (يمتد العرض الكامل من العنصر الأصلي) | جربها |
| .active | يجعل الزر يظهر الضغط | جربها |
| .disabled | يجعل زر تعطيل | جربها |
عن طريق جافا سكريبت
تمكين يدويا مع:
$('.btn').button();
خيارات زر
| None |
طرق زر
يسرد الجدول التالي أساليب زر كل ما هو متاح.
ملاحظة: للحصول على هذا البرنامج المساعد، ويمكن أيضا أن تنتقل أساليب عبر سمات البيانات؛ إلحاق اسم الأسلوب لبالبيانات، كما في-تبديل البيانات أو تحميل البيانات.
| طريقة | وصف | جربها |
|---|---|---|
| .button("toggle") | يجعل زر نظرة الضغط | جربها |
| .button("loading") | تعطيل الزر وتغيير نص الزر إلى "تحميل ..." | جربها |
| .button("reset") | يتغير نص الزر إلى النص الأصلي (إذا تغيرت) | جربها |
| .button("string") | يحدد نص الزر الجديد | جربها |
أمثلة
باستخدام CSS تخصيص أزرار
كيفية إزالة الحدود تقريب:
كيفية إضافة لون محدد:
مثال
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} انها محاولة لنفسك » كيفية إضافة الظلال: