دليل أساسي Bootstrap

إضافات Bootstrap

الشعارات Bootstrap

في هذا الفصل، سنناقش شارات Bootstrap (Badges). الشارات تشبه العلامات، ولكن الفرق الرئيسي هو أن زوايا الشارات أكثر سلاسة.

تُستخدم الشارات (Badges) بشكل رئيسي لجذب الانتباه إلى العناصر الجديدة أو غير القراءة. إذا كنت ترغب في استخدام الشارات، فما عليك سوى أن <span> يمكن إضافة هذه إلى الروابط، وتوجيهات Bootstrap، وغيرها من العناصر.

الآن، سنجد هذا في المثال التالي:

在线示例

عرض البريد غير القرأ:

示例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - شارات (Badges)</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>
<a href="#">صندوق البريد <span class="badge">50</span></a>
</body>
</html>

اختبار راجع ‹/›

النتيجة كما يظهر أدناه:

عندما لا يوجد أي عنصر جديد أو غير قرأ، يمكن استخدام CSS :empty 选择器，徽章会折叠起来，表示里面没有内容。

在线示例

展示未读消息：

示例

<!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>
<div　class="container">
　　<h2>徽章</h2>
　　<p>.badge　类指定未读消息的数量:</p>
　　<p><a　href="#">收件箱　<span　class="badge">21</span></a></p>
</div>
</body>
</html>

اختبار راجع ‹/›

激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span> 以下示例展示了如何激活链接：

在线示例

示例

<!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>
<h4>激活的胶囊式导航</h4>
<ul　class="nav　nav-pills">
	<li　class="active"><a　href="#">首页　<span　class="badge">42</span></a></li>
	<li><a href="#">مقدمة</a></li>
	<li><a　href="#">消息　<span　class="badge">3</span></a></li>
</ul>
<br>
<h4>激活的列表导航</h4>
<ul　class="nav　nav-pills　nav-stacked"　style="max-width:　260px;">
	<li　class="active">
		<a href="#">
			<span　class="badge　pull-right">42</span>
			الصفحة الرئيسية
		</a>
	</li>
	<li><a href="#">مقدمة</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			الرسالة
		</a>
	</li>
</ul>
</body>
</html>

اختبار راجع ‹/›

النتيجة كما يظهر أدناه:

شاشات كبيرة Bootstrap علامات Bootstrap