Десятки повторно используемых компонентов, созданных для обеспечения навигации, предупреждений, всплывающих окон и многого другого.
Переключаемое контекстное меню для отображения списков ссылок. Сделано интерактивным с раскрывающимся плагином javascript .
- <ul class = "dropdown-menu" role = "menu" aria-labeledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Действие </a></li>
- <li><a tabindex = "-1" href = "#" > Другое действие </a></li>
- <li><a tabindex = "-1" href = "#" > Здесь что-то еще </a></li>
- <li класс = "разделитель" ></li>
- <li><a tabindex = "-1" href = "#" > Отдельная ссылка </a></li>
- </ul>
Глядя только на раскрывающееся меню, вот необходимый HTML. Вам нужно обернуть триггер выпадающего списка и выпадающее меню внутри .dropdown
или в другой элемент, который объявляет position: relative;
. Тогда просто создайте меню.
- <div class = "раскрывающийся список" >
- <!-- Ссылка или кнопка для переключения раскрывающегося списка -->
- <ul class = "dropdown-menu" role = "menu" aria-labeledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Действие </a></li>
- <li><a tabindex = "-1" href = "#" > Другое действие </a></li>
- <li><a tabindex = "-1" href = "#" > Здесь что-то еще </a></li>
- <li класс = "разделитель" ></li>
- <li><a tabindex = "-1" href = "#" > Отдельная ссылка </a></li>
- </ul>
- </div>
Выровняйте меню по правому краю и добавьте дополнительные уровни раскрывающихся списков.
Добавить .pull-right
в .dropdown-menu
выпадающее меню по правому краю.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labeledby = "dLabel" >
- ...
- </ul>
Добавьте дополнительный уровень раскрывающихся меню, появляющихся при наведении курсора, как в OS X, с некоторыми простыми дополнениями разметки. Добавьте .dropdown-submenu
к любому li
в существующем раскрывающемся меню для автоматического стиля.
- <ul class = "dropdown-menu" role = "menu" aria-labeledby = "dLabel" >
- ...
- <li class = "выпадающее-подменю" >
- <a tabindex = "-1" href = "#" > Дополнительные параметры </a>
- <ul class = "раскрывающееся меню" >
- ...
- </ul>
- </li>
- </ul>
Простое разбиение на страницы, вдохновленное Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно не заметить, он легко масштабируется и обеспечивает большие области кликов.
- <div класс = "разбивка на страницы" >
- <ул>
- <li><a href = "#" > Предыдущая </a></li>
- <li><a href="#" > 1 </a> < / li>
- <li><a href="#" > 2 </a> < / li>
- <li><a href="#" > 3 </a> < / li>
- <li><a href="#" > 4 </a> < / li>
- <li><a href = "#" > Далее </a></li>
- </ul>
- </div>
Ссылки настраиваются для разных обстоятельств. Используйте .disabled
для некликабельных ссылок и .active
для указания текущей страницы.
- <div класс = "разбивка на страницы" >
- <ул>
- <li class = "disabled" ><a href = "#" > Предыдущая </a></li>
- <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
При желании вы можете поменять местами активные или отключенные привязки для диапазонов, чтобы удалить функцию щелчка, сохранив при этом предполагаемые стили.
- <div класс = "разбивка на страницы" >
- <ул>
- <li class = "disabled" ><span> Предыдущая </span></li>
- <li class = "active" ><span> 1 </span></li>
- ...
- </ul>
- </div>
Добавьте один из двух необязательных классов для изменения выравнивания ссылок на страницы: .pagination-centered
и .pagination-right
.
- <div class = "разбивка по страницам по центру" >
- ...
- </div>
- <div class = "разбивка на страницы справа" >
- ...
- </div>
Быстрые предыдущие и следующие ссылки для простой реализации разбиения на страницы с легкой разметкой и стилями. Он отлично подходит для простых сайтов, таких как блоги или журналы.
По умолчанию пейджер центрирует ссылки.
- <ul class = "пейджер" >
- <li><a href = "#" > Предыдущий </a></li>
- <li><a href = "#" > Далее </a></li>
- </ul>
Кроме того, вы можете выровнять каждую ссылку по сторонам:
- <ul class = "пейджер" >
- <li класс = "предыдущий" >
- <a href = "#" > ← Старые </a>
- </li>
- <li класс = "следующий" >
- <a href = "#" > Новое → </a>
- </li>
- </ul>
Ссылки на пейджеры также используют общий .disabled
служебный класс из нумерации страниц.
- <ul class = "пейджер" >
- <li class = "предыдущий отключен" >
- <a href = "#" > ← Старые </a>
- </li>
- ...
- </ul>
Этикетки | Разметка |
---|---|
По умолчанию | <span class="label">Default</span> |
Успех | <span class="label label-success">Success</span> |
Предупреждение | <span class="label label-warning">Warning</span> |
Важный | <span class="label label-important">Important</span> |
Информация | <span class="label label-info">Info</span> |
Обратный | <span class="label label-inverse">Inverse</span> |
Имя | Пример | Разметка |
---|---|---|
По умолчанию | 1 | <span class="badge">1</span> |
Успех | 2 | <span class="badge badge-success">2</span> |
Предупреждение | 4 | <span class="badge badge-warning">4</span> |
Важный | 6 | <span class="badge badge-important">6</span> |
Информация | 8 | <span class="badge badge-info">8</span> |
Обратный | 10 | <span class="badge badge-inverse">10</span> |
Легкий и гибкий компонент для демонстрации ключевого контента на вашем сайте. Он хорошо работает на сайтах с маркетингом и контентом.
Это простой модуль героя, простой компонент в стиле jumbotron для привлечения дополнительного внимания к рекомендуемому контенту или информации.
- <div class = "герой-юнит" >
- <h1> Заголовок </h1>
- <p> Слоган </p>
- <р>
- <a class = "btn btn-primary btn-large" >
- Учить больше
- </a>
- </p>
- </div>
Простая оболочка для h1
надлежащего размещения и сегментации разделов контента на странице. Он может использовать элемент h1
default small
, а также большинство других компонентов (с дополнительными стилями).
- <div класс = "заголовок страницы" >
- <h1> Пример заголовка страницы <small> Подтекст для заголовка </small></h1>
- </div>
По умолчанию миниатюры Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой.
С помощью небольшой дополнительной разметки можно добавить любой HTML-контент, такой как заголовки, абзацы или кнопки, в миниатюры.
Миниатюры (ранее .media-grid
до версии 1.4) отлично подходят для сетки фотографий или видео, результатов поиска изображений, розничных продуктов, портфолио и многого другого. Это могут быть ссылки или статический контент.
Разметка миниатюр проста — достаточно ul
любого количества li
элементов. Он также очень гибкий, позволяя использовать любой тип контента с небольшим количеством разметки, чтобы обернуть ваше содержимое.
Наконец, компонент эскизов использует существующие классы системы сетки, такие как .span2
или , .span3
для управления размерами эскизов.
Как упоминалось ранее, необходимая разметка для миниатюр проста и понятна. Вот посмотрите на настройку по умолчанию для связанных изображений :
- <ul class = "миниатюры" >
- <li класс = "span4" >
- <a href = "#" класс = "миниатюра" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
Для пользовательского HTML-контента в миниатюрах разметка немного меняется. Чтобы разрешить содержимое блочного уровня в любом месте, мы заменяем <a>
его <div>
следующим образом:
- <ul class = "миниатюры" >
- <li класс = "span4" >
- <div класс = "миниатюра" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Ярлык миниатюры </h3>
- <p> Заголовок миниатюры... </p>
- </div>
- </li>
- ...
- </ul>
Исследуйте все свои варианты с различными классами сетки, доступными вам. Вы также можете смешивать и сочетать разные размеры.
Оберните любой текст и дополнительную кнопку закрытия .alert
для основного предупреждающего сообщения.
- <div класс = "предупреждение" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Внимание! </strong> Лучше проверьте себя, вы не слишком хорошо выглядите.
- </div>
Браузеры Mobile Safari и Mobile Opera, помимо data-dismiss="alert"
атрибута, требуют href="#"
для отклонения предупреждений при использовании <a>
тега.
- <a href = "#" class = "close" data-dismiss = "alert" > × </a>
В качестве альтернативы вы можете использовать <button>
элемент с атрибутом данных, что мы решили сделать для наших документов. При использовании <button>
вы должны включить, type="button"
иначе ваши формы могут не отправляться.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Используйте плагин оповещений jQuery для быстрого и простого закрытия оповещений.
Для более длинных сообщений увеличьте отступ вверху и внизу оболочки оповещения, добавив .alert-block
.
Лучше проверь себя, ты выглядишь не слишком хорошо. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "предупреждающий блок-предупреждение" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Внимание! </h4>
- Лучше проверь себя, ты не...
- </div>
Добавьте необязательные классы, чтобы изменить оттенок предупреждения.
- <div class = "оповещение об ошибке" >
- ...
- </div>
- <div class = "успех предупреждения" >
- ...
- </div>
- <div class = "оповещение о предупреждении-информация" >
- ...
- </div>
Индикатор выполнения по умолчанию с вертикальным градиентом.
- <div класс = "прогресс" >
- <div class = "bar" style = " width : 60 %; " ></div>
- </div>
Использует градиент для создания полосатого эффекта. Недоступно в IE7-8.
- <div class = "прогресс полосатый прогресс" >
- <div class = "bar" style = " width : 20 %; " ></div>
- </div>
Добавьте .active
, чтобы .progress-striped
анимировать полосы справа налево. Доступно не во всех версиях IE.
- <div class = "прогресс с чередованием прогресса активен" >
- <div class = "bar" style = " width : 40 %; " ></div>
- </div>
Поместите несколько стержней в одно и то же .progress
, чтобы сложить их.
- <div класс = "прогресс" >
- <div class = "bar bar-success" style = " width : 35 %; " ></div>
- <div class = "bar bar-warning" style = " width : 20 %; " ></div>
- <div class = "bar bar-danger" style = " width : 10 %; " ></div>
- </div>
Индикаторы выполнения используют одни и те же кнопки и классы предупреждений для единообразных стилей.
- <div class = "информация о прогрессе" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "прогресс прогресс-успех" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "предупреждение о прогрессе" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "прогресс прогресс-опасность" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Как и в случае со сплошными цветами, у нас есть различные полосатые индикаторы выполнения.
- <div class = "прогресс, информация о прогрессе, полосатый прогресс" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "прогресс прогресс-успех прогресс-полосатый" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "прогресс, предупреждение о прогрессе, полосатый прогресс" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "прогресс прогресс-опасность прогресс-полосатый" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Индикаторы выполнения используют градиенты, переходы и анимацию CSS3 для достижения всех эффектов. Эти функции не поддерживаются в IE7-9 или более ранних версиях Firefox.
Версии до Internet Explorer 10 и Opera 12 не поддерживают анимацию.
Используйте колодец как простой эффект для элемента, чтобы придать ему эффект вставки.
- <div класс = "хорошо" >
- ...
- </div>
Управляйте отступами и закругленными углами с помощью двух дополнительных классов модификаторов.
- <div class = "хорошо-большой" >
- ...
- </div>
- <div class = "ну-ну-маленький" >
- ...
- </div>
Используйте общий значок закрытия для закрытия содержимого, такого как модальные окна и предупреждения.
- <button class = "закрыть" > × </кнопка>
Устройства iOS требуют href="#" для событий щелчка, если вы предпочитаете использовать привязку.
- <a class = "close" href = "#" > × </a>
Простые специализированные классы для небольших настроек дисплея или поведения.
Плавающий элемент влево
- класс = "левый"
- . тянуть - влево {
- поплавок : слева ;
- }
Поместить элемент вправо
- класс = "тянуть вправо"
- . тянуть - вправо {
- поплавок : справа ;
- }
Измените цвет элемента на#999
- класс = "приглушенный"
- . отключен {
- цвет : #999;
- }
Очистить float
любой элемент
- класс = "clearfix"
- . яснофикс {
- * масштаб : 1 ;
- &: перед ,
- &: после {
- дисплей : таблица ;
- содержание : "" ;
- }
- &: после {
- ясно : оба ;
- }
- }