ستوجهك هذه المقالة إلى:
- كيفية عمل الأزرار في Bootstrap؟
- كيفية إنشاء أزرار المخطط التفصيلي في Bootstrap؟
- كيفية ضبط أحجام زر التمهيد؟
- كيفية عمل زر Block-Level في Bootstrap؟
- كيفية إنشاء أزرار الحالة النشطة في Bootstrap؟
- كيفية إنشاء أزرار حالة معطل في Bootstrap؟
كيفية عمل الأزرار في Bootstrap؟
التمهيد ' BTN يتم استخدام فئة 'لإنشاء الأزرار. لإضافة أزرار نمطية ، يمكنك استخدام زر ' BTN 'فئة مع فئة اللون ، مثل' نجاح btn 'لإنشاء زر أخضر.
في HTML ، ' <زر> '،' '، و ' <إدخال> 'من النوع' زر 'لإنشاء أزرار. ال ' BTN 'فئة لديها نمط محدد مسبقًا يضيف نمطًا أساسيًا لعناصر الزر.
للحصول على مفهوم واضح ، تحقق من المثال أدناه.
مثال
في ملف HTML ، اتبع الخطوات لإنشاء أزرار باستخدام علامات مختلفة:
- يضيف ' <زر> ' و ' 'وتعيينها' BTN ' و ' btn الأساسي ' الطبقات.
- ثم أضف ' <إدخال> 'بالنوع' زر '. قم بتعيين ' BTN ' و ' نجاح btn 'للتصميم كأول زرين باللون الأزرق ، والثالث باللون الأخضر:
< أ صف دراسي = 'btn-basic' href = '#' > يفتح < / أ >
< إدخال يكتب = 'زر' صف دراسي = 'نجاح btn btn' القيمة = 'يبحث' >
انتاج |
كيفية إنشاء أزرار مخطط تفصيلي في Bootstrap؟
لإضافة مخططات الأزرار ، فإن Bootstrap “ مخطط btn- * 'الطبقة المستخدمة. في تركيبته ، ' * 'هنا يمثل لون المخطط التفصيلي. على سبيل المثال، ' خطر btn- المخطط التفصيلي 'يضع المخطط الأحمر ،' btn- مخطط أساسي 'يحدد المخطط التفصيلي الأزرق ، والمزيد.
قم بتحليل الكود الوارد أدناه:
< زر يكتب = 'زر' صف دراسي = 'btn-outline-basic' > التالي < / زر >< زر يكتب = 'زر' صف دراسي = 'خطر btn-المخطط التفصيلي' > إلغاء < / زر >
< زر يكتب = 'زر' صف دراسي = 'نجاح btn-outline-btn' > النجاح < / زر >
يمكن ملاحظة أن ' التالي 'الزر بمخطط أزرق ، و' يلغي 'بمخطط أحمر ، و' النجاح 'تم تصميم الزر' بمخطط أخضر:
كيفية ضبط أحجام زر التمهيد؟
يتم تطبيق بعض فئات Bootstrap لضبط أحجام الأزرار ، مثل:
- ' BTN- ال جي 'يتم تطبيق فئة لإنشاء زر كبير. يمكن لهذه الفئة زيادة حجم الخط والمساحة المتروكة.
- ' btn-md 'ينشئ زرًا متوسط الحجم.
- ' BTN- سم 'ينشئ زرًا صغيرًا.
مثال
الآن ، سننشئ ثلاثة أزرار بأحجام مختلفة وأسماء لا تحتاج إلى شرح:
< زر يكتب = 'زر' صف دراسي = 'btn btn-second btn-lg' > كبير < / زر >< زر يكتب = 'زر' صف دراسي = 'btn-تحذير btn-md' > متوسط < / زر >
< زر يكتب = 'زر' صف دراسي = 'btn-خطر btn-sm' > صغير < / زر >
انتاج |
كيفية عمل زر Block-Level في Bootstrap؟
الأزرار على مستوى الكتلة هي تلك التي تحمل حجم العرض الكامل. لإنشاء الأزرار على مستوى الكتلة ، فإن ' btn- كتلة يتم استخدام فئة 'على النحو التالي
< زر يكتب = 'زر' صف دراسي = 'btn تحذير btn-block' > زر < / زر >< زر يكتب = 'زر' صف دراسي = 'btn btn-second-btn-block' > زر < / زر >
انتاج |
كيفية إنشاء أزرار الحالة النشطة في Bootstrap؟
تشير أزرار الحالة النشطة إلى الأزرار النشطة حاليًا. هذه الأزرار أغمق قليلاً من المعتاد. لإنشاء مثل هذه الأزرار ، فإن Bootstrap ' نشيط يتم استخدام فئة '.
مثال
الكود أدناه ينشئ زرين. الأول في الحالة الطبيعية بينما يتم تطبيق الآخر مع ' نشيط ' صف دراسي:
< زر يكتب = 'زر' صف دراسي = 'نجاح btn btn' > النجاح < / زر >< زر يكتب = 'زر' صف دراسي = 'نجاح btn btn نشط' > النجاح < / زر >
انتاج |
كيفية إنشاء أزرار حالة معطل في Bootstrap؟
تشير أزرار الحالة المعطلة إلى الأزرار غير القابلة للنقر وغير القابلة للاستخدام. في Bootstrap ، ' معاق 'يتم استخدام فئة لإنشاء زر حالة معطل. ال ' معاق 'يمكن أيضًا استخدام السمة لهذا الغرض.
مثال
تحقق من المثال الموضح أدناه:
- الزر الأول ليس في حالة تعطيل.
- الثاني يستخدم ' معاق 'فئة لإنشاء زر حالة معطل.
- الثالث يستخدم ' معاق ' ينسب:
< زر يكتب = 'زر' صف دراسي = 'تم تعطيل نجاح btn btn' > النجاح < / زر >
< زر يكتب = 'زر' صف دراسي = 'نجاح btn btn' تعطيل> نجاح < / زر >
انتاج |
لقد قمنا بتغطية الجوانب المختلفة المتعلقة بأزرار Bootstrap وتصميمها في CSS.
استنتاج
ال ' BTN يتم استخدام class لإنشاء أزرار Bootstrap بتصميم بسيط. لإنشاء أزرار ملونة ومخططة ، فإن ' BTN- * ' و ' مخطط btn- * 'حيث يتم استخدام' * 'يرمز إلى أي فئة لون. على سبيل المثال، ' btn- تحذير 'ينشئ زرًا أصفر ،' btn- الخطوط العريضة- تحذير 'زرًا باللون الأصفر ، وغير ذلك الكثير. لجعل الأزرار نشطة أو معطلة ، يتم تطبيق الفئتين 'النشطة' و 'المعطلة' ، على التوالي. قدم هذا المنشور دليلًا شاملاً حول أزرار Bootstrap.