В Bootstrap встроены десятки многократно используемых компонентов для обеспечения навигации, предупреждений, всплывающих окон и многого другого.
Сверхупрощенное и минималистично оформленное разбиение на страницы, вдохновленное Rdio, отлично подходит для приложений и результатов поиска. Большой блок трудно не заметить, он легко масштабируется и обеспечивает большие области кликов.
Ссылки настраиваются и работают в ряде случаев с правильным классом. .disabled
для некликабельных ссылок и .active
для текущей страницы.
Добавьте любой из двух необязательных классов, чтобы изменить выравнивание ссылок на страницы: .pagination-centered
и .pagination-right
.
Компонент разбивки на страницы по умолчанию является гибким и работает в нескольких вариантах.
Обернутый в <div>
, нумерация страниц - это просто <ul>
.
- <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>
Компонент пейджера представляет собой набор ссылок для простой реализации пагинации с легкой разметкой и еще более легкими стилями. Он отлично подходит для простых сайтов, таких как блоги или журналы.
По умолчанию пейджер центрирует ссылки.
- <ul class = "пейджер" >
- <li>
- <a href = "#" > Предыдущий </a>
- </li>
- <li>
- <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> |
Bootstrap предоставляет легкий и гибкий компонент, называемый основным блоком, для демонстрации контента на вашем сайте. Он хорошо работает на сайтах с маркетингом и контентом.
Оберните свой контент div
примерно так:
- <div class = "герой-юнит" >
- <h1> Заголовок </h1>
- <p> Слоган </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Учить больше
- </a>
- </p>
- </div>
Это простой модуль героя, простой компонент в стиле jumbotron для привлечения дополнительного внимания к рекомендуемому контенту или информации.
Простая оболочка для h1
надлежащего разделения и сегментации разделов контента на странице. Он может использовать элемент h1
default small
, а также большинство других компонентов (с дополнительными стилями).
- <div class = "page-haeder" >
- <h1> Пример заголовка страницы </h1>
- </div>
По умолчанию миниатюры Bootstrap предназначены для демонстрации связанных изображений с минимальной необходимой разметкой.
С помощью небольшой дополнительной разметки можно добавить любой HTML-контент, такой как заголовки, абзацы или кнопки, в миниатюры.
Миниатюры (ранее .media-grid
до версии 1.4) отлично подходят для сетки фотографий или видео, результатов поиска изображений, розничных продуктов, портфолио и многого другого. Это могут быть ссылки или статический контент.
Разметка миниатюр проста — достаточно ul
любого количества li
элементов. Он также очень гибкий, позволяя использовать любой тип контента с небольшим количеством разметки, чтобы обернуть ваше содержимое.
Наконец, компонент эскизов использует существующие классы системы сетки, такие как .span2
или , .span3
для управления размерами эскизов.
Как упоминалось ранее, необходимая разметка для миниатюр проста и понятна. Вот посмотрите на настройку по умолчанию для связанных изображений :
- <ul class = "миниатюры" >
- <li класс = "span3" >
- <a href = "#" класс = "миниатюра" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Для пользовательского HTML-контента в миниатюрах разметка немного меняется. Чтобы разрешить содержимое блочного уровня в любом месте, мы заменяем <a>
его <div>
следующим образом:
- <ul class = "миниатюры" >
- <li класс = "span3" >
- <div класс = "миниатюра" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Ярлык миниатюры </h5>
- <p> Подпись к миниатюре прямо здесь... </p>
- </div>
- </li>
- ...
- </ul>
В Bootstrap 2 мы упростили базовый класс: .alert
вместо .alert-message
. Мы также уменьшили минимально необходимую разметку <p>
— по умолчанию не требуется, только внешний <div>
.
Чтобы сделать компонент более надежным с меньшим количеством кода, мы убрали отличительный вид предупреждений о блокировке, сообщений с большим количеством отступов и, как правило, большего количества текста. Класс также изменился на .alert-block
.
Bootstrap поставляется с отличным плагином jQuery, который поддерживает предупреждающие сообщения, что позволяет быстро и легко их отклонять.
Оберните свое сообщение и необязательный значок закрытия в div с простым классом.
- <div класс = "предупреждение" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <strong> Внимание! </strong> Лучше проверьте себя, вы не слишком хорошо выглядите.
- </div>
Легко расширяйте стандартное предупреждающее сообщение двумя необязательными классами: .alert-block
для дополнительных полей и элементов управления текстом, а .alert-heading
также для соответствующего заголовка.
Лучше проверь себя, ты выглядишь не слишком хорошо. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "предупреждающий блок-предупреждение" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <h4 class = "alert-heading" > Внимание! </h4>
- Лучше проверь себя, ты не...
- </div>
- <div class = "оповещение об ошибке" >
- ...
- </div>
- <div class = "успех предупреждения" >
- ...
- </div>
- <div class = "оповещение о предупреждении-информация" >
- ...
- </div>
Индикатор выполнения по умолчанию с вертикальным градиентом.
- <div класс = "прогресс" >
- <div класс = "бар"
- стиль = " ширина : 60 %; " ></div>
- </div>
Использует градиент для создания полосатого эффекта.
- <div class = "прогресс информация о прогрессе
- полосатый прогресс" >
- <div класс = "бар"
- стиль = " ширина : 20 %; " ></div>
- </div>
Берет полосатый пример и анимирует его.
- <div class = "прогресс прогресс-опасность
- полоса прогресса активна" >
- <div класс = "бар"
- стиль = " ширина : 40 %; " ></div>
- </div>
Индикаторы выполнения используют некоторые из тех же имен классов, что и кнопки и предупреждения для аналогичного стиля.
.progress-info
.progress-success
.progress-danger
Кроме того, вы можете настроить файлы LESS и выбрать свои собственные цвета и размеры.
Индикаторы выполнения используют переходы CSS3, поэтому, если вы динамически настраиваете ширину с помощью javascript, она будет плавно изменяться.
Если вы используете .active
класс, ваши .progress-striped
индикаторы выполнения будут анимировать полосы слева направо.
Индикаторы выполнения используют градиенты, переходы и анимацию CSS3 для достижения всех эффектов. Эти функции не поддерживаются в IE7-8 или более ранних версиях Firefox.
В настоящее время Opera не поддерживает анимацию.
Используйте колодец как простой эффект для элемента, чтобы придать ему эффект вставки.
- <div класс = "хорошо" >
- ...
- </div>
Используйте общий значок закрытия для закрытия содержимого, такого как модальные окна и предупреждения.
- <a class = "close" > × </a>