Bootstrap индикатор загрузки — компонент Bootstrap, показывающий степень выполнения рабочего процесса. Классы индикатора — .progress
и .progress-bar
. Внимание: компонент использует CSS3 перехода и анимацию, потому не поддерживается в IE9 и ниже, старых Firefox. Opera 12 не поддерживает анимацию. За изменение полосы самого индикатора отвечает JavaScript код, соответствующий логике приложения (другими словами, этот код приедтся прописать самостоятельно). Для создания прогресс-бара вам понадобится следующий код:
Рубрика: Курсы html
Заметки относятся к курсам HTML и другим курсам направления веб-разработки
Bootstrap уведомления (alerts)
Bootstrap уведомления — позволяют дать контекстную обратную связь для обычных действий пользователя. Основные классы для раборы — .alert
и один из четверки (.alert-success
, alert-info
, .alert-warning
, .alert-danger
). Внимание: уведомления (alerts) не имеют класса по умолчанию, т.е. стандартный серый цвет не поддерживается, используются только четыре указанных класса. Читать далее Bootstrap уведомления (alerts)
Thumbnail Bootstrap
Thumbnail Bootstrap— компонент Bootstrap, для просмотра небольшого изображения. Вместе с сеткой Bootstrap позволяет отображать сетку изображений, видео, текста или другую информацию. Для оформления картинок предпросмотра (тумбнейлов, thumbnails) подобно формату соц. сети Pinterest, используются сторонние плагины Massonry, Isotop или Salvattore. Читать далее Thumbnail Bootstrap
Bootstrap jumbotron
Bootstrap jumbotron — компонент фреймворка, ответственный за показ ключевого содержимого на вашем сайте. Основной класс .jumbotron
размещается в div, содержащем ключевой контент (в этот див с классом иногда помещается div с классом .container
). Пример кода компонента Jumbotron: Читать далее Bootstrap jumbotron
Bootstrap метки(label)
Bootstrap метки (label)- удачный способ выделить фрагмент HTML-заголовка или любого фрагмента сайта (цены, описания товара, имени сотрудника). Для добавления метки, в HTML-элемент добавляется span с классами label
и label-default
. Размер меток определяется размером заголовка (для h1, соответственно больше всего) Читать далее Bootstrap метки(label)
Хлебные крошки и постраничное разбиение в Bootstrap
Хлебными крошками называется набор ссылок, помогающее сориентироваться посетителю в месторасположении на сайте, а постраничным разбиением (пагинация, паджинация) — набор ссылок, которые позволяют переходить к ограниченным наборам материалов сайта. Например при нажатии на ссылку с единицей, мы попадаем на первую страницу с десятью записями, при нажатии на ссылку с двойкой — на вторую страницу, с следующими десятью записями. Читать далее Хлебные крошки и постраничное разбиение в Bootstrap
Навигационная панель в Boostrap
В заметке о навигационном меню в Bootstrap мы сделали первый шаг навстречу построению меню на сайте с Bootstrap. Обычно такое меню является частью большего компонента — навигационной панели. Такая панель располагается в верхней или нижней части сайта, иногда в фиксированном положении. Примечание: в навпанели не поддерживается ссылки, занимающие 100% ширины родительского элемента (если ссылки не будут помещаться — они начнут занимать следующий фрагмент свободного места). Читать далее Навигационная панель в Boostrap
Bootstrap навигационное меню
Bootstrap меню создается добавлением класса .nav
ненумерованному списку. Для работы используется JavaScript-плагин. Кроме указанного класса, используются класс .nav-tabs
(навигационные вкладки) и .nav-pills
(обычное навигационное меню). Для вертикального расположения меню, добавляется класс .nav-stacked
Читать далее Bootstrap навигационное меню
Bootstrap группы ввода
Группы ввода Bootstrap — позволяет добавлять текст или кнопки до и после элемента ввода. Для этого используются классы .input-group
, .input-group-addon
или .input-group-btn
. Важно: эти классы используются только с элементами input и не применяются вместе с другими компонентами. Еще одно важно замечание: к элементам ввода всегда рекомендуется добавлять метки — элемент label. Читать далее Bootstrap группы ввода
Bootstrap группы кнопок
Группы кнопок на одной линии оформляются классом .btn-group у контейнера содержащего кнопки, также добавляется атрибут role=»group». Кроме .btn-group можно применять .btn-toolbar и role=»toolbar» для более комплексных компонентов. Размер группы кнопок определяется классами .btn-group-lg, .btn-group-sm и .btn-group-xs Читать далее Bootstrap группы кнопок