В заметке о навигационном меню в Bootstrap мы сделали первый шаг навстречу построению меню на сайте с Bootstrap. Обычно такое меню является частью большего компонента — навигационной панели. Такая панель располагается в верхней или нижней части сайта, иногда в фиксированном положении. Примечание: в навпанели не поддерживается ссылки, занимающие 100% ширины родительского элемента (если ссылки не будут помещаться — они начнут занимать следующий фрагмент свободного места). Читать далее Навигационная панель в Boostrap
Метка: Bootstrap
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 группы кнопок
Выпадающее меню Bootstrap
Выпадающее меню — один из компонентов Bootstrap, использующий для своей работы JavaScript. В контейнер с классом .dropdown (или position:relative) помещается кнопка, которую будут нажимать пользователи, для отображения выпадающей части (На картинке соответствует слову «Выпадающее»). После кнопки размещается Список с классом .dropdown-menu и доп. атрибутами aria-* при необходимости. Читать далее Выпадающее меню Bootstrap
Bootstrap значки/glyphs
Bootstrap глифы — наборы значков, предоставленных фреймворку проектом http://glyphicons.com/ и содержит более 250 знаков. Использовать глифы можно размещая span с классами, соответствующими названиям значков. Например, <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>
создаст значок «очки» отдаленно напоминающий Unicode-символ 🕶. Важно, не смешивать классы значков с другими компонентами Читать далее Bootstrap значки/glyphs
Bootstrap responsive
Bootstrap responsive — обозначение набора классов классов, позволяющих делать отзывчивую верстку. Классы отзывчивой верстки (не считая классов сетки) содержат комбинации для отображения и сокрытия HTML-элементов при разных размерах устройств отображения. Также они включают классы, которые прячут или показывают элементы страницы при печати, позволяя оформить версию страницы для печати.
Bootstrap классы
В этой заметке под Bootstrap классами будет понимать и рассматривать вспомогательные классы фреймворка, которые помогают окрашивать текст и фон HTML-элементов, выравнивать элементы, прятать и отображать HTML-элементы в том числе с учетом мобильной верстки; чистить обтекания (последствия работы свойства float). Подробней о этих CSS-классах можно прочитать на странице фреймворка или в видео этой заметки. Читать далее Bootstrap классы
Bootstrap изображения
В Bootstrap изображения оформляются классом .img-responsive
. Он применяется свойства max-width: 100%;
, height: auto;
и display: block;
так, чтобы изображение отображалось красиво относительно родительского элемента. Для центровки изображения с классом .img-responsive
. используйте класс .center-block
вместо .text-center
. В IE 8-10 SVG изображения масштабируются непропорционально. Для решения этой проблемы используется width: 100% \9;
Читать далее Bootstrap изображения
Bootstrap кнопки
Bootstrap кнопки — это оформленные в едином стиле HTML-элементы a,button,input. Указанным элементам назначаются классы .btn и .btn-default (.btn-success или другие). Кнопки могут быть окрашены в классы, с названиями похожими на классы покраски строк таблицы. .btn-primary (синий), .btn-success (зелёный), .btn-info (голубой) , .btn-warning (оранжевый), .btn-danger (красный), .btn-link (просто оформление ссылки).