Bootstrap базовый учебник

Bootstrap плагины

Экраны большого размера 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="#">Mailbox <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