кодесурса
«Twitter

Учебник по встроенным ярлыкам и значкам Twitter Bootstrap

script1adsense2code
script1adsense3code

Вступление

Используя 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 программирования


script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code