ستغطي هذه المقالة المنظورات التالية لتوضيح استخدام شارات Bootstrap:
- كيفية استخدام Bootstrap Badge للحصول على معلومات إضافية؟
- كيفية استخدام Bootstrap Badge للمعلومات السياقية؟
- كيفية إضافة أنماط مخصصة إلى Bootstrap Badge؟
- كيف تضيف أيقونات إلى شارة Bootstrap؟
- كيفية ربط شارة Bootstrap بمصدر آخر؟
- كيف يتم تقريب الشارات؟
- كيفية استخدام Bootstrap Badge كمقياس؟
ما هي شارات Bootstrap؟
الشارات هي المكونات الأساسية التي تُستخدم لإظهار المؤشر. على سبيل المثال ، يمكن استخدامها كمقياس رقمي لإظهار عدد الإخطارات أو الرسائل:
يمكن استخدامها أيضًا لعرض معلومات إضافية ، كما هو موضح في الصورة المحددة:
كيفية استخدام Bootstrap Badge للحصول على معلومات إضافية؟
يمكن إضافة شارات Bootstrap داخل عناصر HTML لاستخدامها كمعلومات إضافية. تحقق من المثال المذكور أدناه للتوضيح.
مثال
لاستخدام شارة Bootstrap للحصول على معلومات إضافية ، أولاً:
- يضيف ' ' و ' ' عناصر.
- ضع ال ' 'مع' شارة ' و ' شارة-* ' الطبقات. تشير فئة 'شارة- *' إلى الشارة ذات اللون المحدد:
< h6 > المنح الدراسية < امتداد صف دراسي = 'شارة ثانوية' > جديد < / امتداد > < / h6 >
يمكن ملاحظة إضافة شارتين إلى العناوين ذات الصلة:
كيفية استخدام Bootstrap Badge للمعلومات السياقية؟
يمكن أيضًا استخدام شارات Bootstrap لتقديم معلومات سياقية مثل ' شارة الخطر 'الشارة باللون الأحمر ويمكن استخدامها لإظهار بعض الرسائل الفاشلة مثل إلغاء أو غير صالح أو أكثر. ال ' شارة النجاح 'حيث نريد إظهار بعض رسائل النجاح.
مثال
انظر إلى الكود المحدد لفهم السيناريو الذي تمت مناقشته:
< امتداد صف دراسي = 'شارة الخطر' > لم يتم التحقق من الحساب < / امتداد >< امتداد صف دراسي = 'معلومات شارة' > هذه شارة < / امتداد >
< امتداد صف دراسي = 'شارة تحذير شارة' > الحساب معلق ل الموافقة < / امتداد >
< امتداد صف دراسي = 'شارة النجاح' > تم التحقق من الحساب / امتداد >
انتاج |
كيفية إضافة أنماط مخصصة إلى Bootstrap Badge؟
يمكنك أيضًا استخدام CSS لإضافة بعض الأنماط الفريدة إلى شارات Bootstrap. من أجل فهم أفضل ، فئة باسم ' العادة 'يضاف داخل' ' جزء. بعد ذلك ، يتم تطبيق الخصائص التالية:
< امتداد صف دراسي = 'شارة الخطر المخصصة' > لم يتم التحقق من الحساب < / امتداد >< امتداد صف دراسي = 'شارة معلومات شارة مخصصة' > هذه شارة < / امتداد >
< امتداد صف دراسي = 'شارة تحذير مخصصة للشارة' > الحساب معلق ل الموافقة < / امتداد >
< امتداد صف دراسي = 'شارة نجاح شارة مخصصة' > تم التحقق من الحساب / امتداد >
فئة نمط 'مخصص'
.العادة {حجم الخط : 18 بكسل ؛
وزن الخط : 100 ؛
تباعد الحروف : 1 بكسل ؛
حشوة : 8 بكسل 15 بكسل ؛
}
ال ' .العادة 'للوصول إلى' العادة ' صف دراسي. يتم تطبيق الخصائص التالية عليه:
- ' حجم الخط 'يضبط حجم الخط.
- ' وزن الخط 'يوضح سمك الخط.
- ' تباعد الحروف يضيف مسافة بين الحروف.
- ' حشوة 'يوفر مساحة حول محتوى العنصر.
انتاج |
كيف تضيف أيقونات إلى شارة Bootstrap؟
يمكننا إضافة أيقونات مختلفة إلى الشارات أيضًا. للقيام بذلك ، هناك العديد من الفئات التي يمكن استخدامها لهذا السبب. لمزيد من المعلومات ، قم بزيارة رائع الخط موقع الكتروني.
مثال
في HTML ، أضف ' ' جزء. داخل هذا العنصر ، ضع العنصر المضمن ' ' أو '' لإدراج فئة الرمز:
< امتداد صف دراسي = 'شارة الخطر المخصصة' > لم يتم التحقق من الحساب< أنا صف دراسي = 'far fa-Times-circles' > < / أنا >
< / امتداد >
< امتداد صف دراسي = 'شارة النجاح المخصصة' > تم التحقق من الحساب
< أنا صف دراسي = 'fas fa-user-check' > < / أنا >
< / امتداد >
انتاج |
كيفية ربط شارة Bootstrap بمصدر آخر؟
لجعل شارات Bootstrap قابلة للنقر عليها ، ضع علامة ' شارة 'فئات ضمن HTML' 'وتقديم مرجع للصفحة المرتبطة في' href ' ينسب:
< أ href = '#' صف دراسي = 'شارة الخطر المخصصة' > إلغاء < / أ >< أ href = '#' صف دراسي = 'شارة معلومات شارة مخصصة' > إرسال < / أ >
انتاج |
كيف يتم تقريب الشارات؟
لجعل حواف الشارة أكثر تقريبًا ، أضف فئة ' حبة شارة '. هذه الفئة تدعم أكبر ' نصف قطر الحد 'وأفقيًا' حشوة ' الخصائص:
< امتداد صف دراسي = 'شارة خطر شارة حبوب منع الحمل' > لم يتم التحقق من الحساب < / امتداد >< امتداد صف دراسي = 'شارة تحذير شارة حبوب منع الحمل المخصصة' > الحساب معلق ل الموافقة < / امتداد >
< امتداد صف دراسي = 'شارة نجاح شارة حبوب منع الحمل المخصصة' > تم التحقق من الحساب / امتداد >
انتاج |
كيفية استخدام Bootstrap Badge كمقياس؟
لإنشاء زر به عداد ، أضف HTML ' <زر> 'علامة بالنوع' زر 'وتعيين فئات الزر' BTN ' و ' نجاح btn '. ثم قم بتضمين ' 'عنصر لوضع عداد:
< زر يكتب = 'زر' صف دراسي = 'نجاح btn btn' >الإخطارات < امتداد صف دراسي = 'شارة شارة' > 4 < / امتداد >
< / زر >
انتاج |
كان هذا كل شيء عن شارات Bootstrap وعلاماتها ذات الصلة في Bootstrap.
استنتاج
التمهيد ' شارة تستخدم فئة 'لإضافة شارات إلى موقع الويب. على سبيل المثال ، فئات مثل ' شارة الخطر '،' معلومات الشارة '، والمزيد لإضافة معلومات سياقية إلى الشارات كتسمية لها. يتم تطبيق بعض الفئات لإضافة رموز إلى الشارات ، مثل ' بعيد فا مرات الدائرة 'لوضع رمز على شكل دائرة. قدم هذا المنشور دليلاً شاملاً حول شارات وملصقات Bootstrap.