English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной курс Bootstrap

Bootstrap плагины

Метки Bootstrap

Эта глава расскажет о метках Bootstrap. Метки можно использовать для подсчета, подсказок или других меток на странице. Используйте класс .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>
Проверьте ‹/›

Результаты показаны ниже:

Вы можете использовать модифицированные классы 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">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Зеленый ярлык типа "success"Попробуйте
.label label-warningЖелтый ярлык типа "warning"Попробуйте
Бейджи BootstrapСтраницы разделения Bootstrap