Latest web development tutorials
×

Bootstrap курс

Bootstrap курс Bootstrap Краткое введение Bootstrap Установка по окружающей среде

Bootstrap CSS

Bootstrap CSS обзор Bootstrap Grid System Bootstrap наборный Bootstrap код Bootstrap таблица Bootstrap форма Bootstrap кнопка Bootstrap изображение Bootstrap Вспомогательный класс Bootstrap Отзывчивый Утилиты

Bootstrap Компоненты макета

Bootstrap значок шрифты Bootstrap Выпадающее меню Bootstrap Группа кнопок Bootstrap Кнопка в раскрывающемся меню Bootstrap группа Поле ввода Bootstrap элементы навигации Bootstrap Панель навигации Bootstrap панировочные сухари Bootstrap пейджинг Bootstrap этикетка Bootstrap знак Bootstrap Большой экран Bootstrap Название страницы Bootstrap Миниатюры Bootstrap предупреждение Bootstrap Шкала прогресса Bootstrap Мультимедийные Bootstrap Список групп Bootstrap панель Bootstrap Wells

Bootstrap Виджет

Bootstrap Plug-Glance Bootstrap эффект перехода Bootstrap режимное окно Bootstrap Выпадающее меню Bootstrap Свиток монитор Bootstrap таб Bootstrap подсказки Bootstrap Всплывающее окно Bootstrap Предупреждение коробки Bootstrap кнопка Bootstrap сгиб Bootstrap карусель Bootstrap Дополнительная навигация

Bootstrap другое

Bootstrap UI редактор Bootstrap V2 курс Bootstrap HTML стандарты кодирования Bootstrap CSS стандарты кодирования

Bootstrap значок

Эта глава описывает бутстрапе значки (значки). Значки и метки похожи, основное отличие состоит в том, что значок более закругленные углы.

Значки (Badges) используется в основном для новых или непрочитанных элементов выделены. Чтобы использовать значок, просто поставить<пролет класс = "значок"> добавляется к ссылке, Bootstrap навигации и т.д. Эти элементы могут быть.

Следующий пример иллюстрирует этот момент:

примеров

Показать непрочитанные сообщения:

<А HREF = "#"> Почтовый ящик < пролет класс = "значок"> 50 < / SPAN> </ а>

Попробуйте »

Результаты следующие:

Значки (Значки)

Когда нет никаких новых или непрочитанные элементы, черезCSS: пустой селектор, значки будут сложены, показывая внутри пустой.

примеров

Дисплей непрочитанных исчезают:

<Div класс = "контейнер"> <H2> значок </ h2> <P> Класс .badge определяет количество непрочитанных сообщений: </ p> <P> <а HREF = "#"> Входящие <пролет класс = "значок"> 21 < / SPAN> </ а> </ p> </ Div>

Попробуйте »

Активированный статус навигации

Вы можете поместить знак в активном состоянии капсулы навигации и списка навигации. Используя<SPAN класс = "значок"> , чтобы активировать ссылку, как показано в следующем примере:

примеров

<H4> капсула навигации активна </ h4> <Ul класс = "нав СЧА таблетки" > <Li класс = "активный"> <А HREF = "#"> Главная <SPAN класс = "значок"> 42 < / SPAN> </ A> </ Li> <Li> <А HREF = "#"> Введение </ а> </ Li> <Li> <А HREF = "#"> Новости <SPAN класс = "значок"> 3 < / SPAN> </ A> </ Li> </ UL> <Br> <H4> список активной навигации </ h4> <Ul класс = "нав СЧА таблетки Nav -stacked" стиль = "макс-ширина: 260px ;"> <Li класс = "активный"> <А HREF = "#"> <SPAN класс = "значок тянуть вправо" > 42 </ SPAN> Главная </ а> </ Li> <Li> <А HREF = "#"> Введение </ а> </ Li> <Li> <А HREF = "#"> <SPAN класс = "значок тянуть вправо" > 3 </ SPAN> Новости </ а> </ Li> </ UL>

Попробуйте »

Результаты следующие:

Активированный статус навигации