Учебник по встроенным ярлыкам и значкам Twitter Bootstrap
Вступление
Используя Twitter Bootstrap, вы можете создавать встроенные метки, т.е. метки и аннотировать текст и значки, то есть индикаторы и непрочитанные значения.
Встроенные метки
Вы можете создавать привлекательные метки и аннотировать текст с помощью встроенных меток.
пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap inline label Example</title>
<meta name="description" content="Twitter Bootstrap inline label Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p><span class="label">Default</span></p>
<p><span class="label label-success">Success</span></p>
<p><span class="label label-warning">Warning</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
</div>
</div>
</div>
</body>
</html>
От строки 3162 до строки 3200 файла bootstrap.css присутствуют стили для метки, метка-успех, метка-предупреждение, метка-важная, метка-информация и метка-обратная.
Значки
Как говорит Twitter Bootstrap,
Значки - это небольшие, простые компоненты для отображения индикатора или какого-либо счета. Они обычно находятся в почтовых клиентах, таких как Mail.app или в мобильных приложениях для push-уведомлений.
пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap badges Example</title>
<meta name="description" content="Twitter Bootstrap badges Example">
<link href="bootstrap-2.0.3.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>
</div>
</body>
</html>
Обратите внимание, что в этом примере мы использовали bootstrap-2.0.3.css, поскольку стили для значков недоступны в Bootstrap v2.0.1 css.
Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.
Предыдущий: Twitter Bootstrap Navbar учебник
Далее: Твиттер Миниатюры Bootstrap
Новый контент: Composer: менеджер зависимостей для PHP , R программирования