دليل أساسي لBootstrap

إضافات Bootstrap

علامات Bootstrap

هذا الفصل سيشرح علامات Bootstrap. يمكن استخدام العلامات لعدة أغراض مثل الحسابات، الإشارات أو علامات أخرى على الصفحة. باستخدام class .label لعرض العلامات، كما هو موضح في المثال التالي:

مثال عبر الإنترنت

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - علامات</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>مثال على عنوان<span class="label label-default">علامة</span></h1>
<h2>عنوان مثال <span class="label label-default">الشعار</span></h2>
<h2>عنوان مثال <span class="label label-default">الشعار</span></h2>
<h4>عنوان مثال <span class="label label-default">الشعار</span></h4>
</body>
</html>

اختبار النظر في ‹/›

النتيجة كما يلي:

يمكنك استخدام classes المزينة label-default، label-primary، label-success، label-info، label-warning، label-danger لتبديل مظهر العلامات، كما هو موضح في المثال التالي:

مثال عبر الإنترنت

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - تنوع العلامات</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<span class="label label-default">الشعار الافتراضي</span>
<span class="label label-primary">الشعار الرئيسي</span>
<span class="label label-success">الشعار الناجح</span>
<span class="label label-info">الشعار المعلوماتي</span>
<span class="label label-warning">الشعار التحذيري</span>
<span class="label label-danger">الشعار الخطير</span>
</body>
</html>

اختبار النظر في ‹/›

النتيجة كما يلي:

مزيد من أمثلة العلامات

فئة	وصف	مثال
.label label-default	علامة رمادية افتراضية	تجربة
.label label-success	علامة "نجاح" من النوع الأخضر	تجربة
.label label-warning	علامة "تنبيه" من النوع الأصفر	تجربة

بادق Bootstrap صفحات التصفية Bootstrap