Опубликовано Оставить комментарий

Навигационная панель в Boostrap

Навигационная панель
Навигационная панель

В заметке о навигационном меню в Bootstrap мы сделали первый шаг навстречу построению меню на сайте с Bootstrap. Обычно такое меню является частью большего компонента — навигационной панели. Такая панель располагается в верхней или нижней части сайта, иногда в фиксированном положении. Примечание: в навпанели не поддерживается ссылки, занимающие 100% ширины родительского элемента (если ссылки не будут помещаться — они начнут занимать следующий фрагмент свободного места). Читать далее Навигационная панель в Boostrap

Опубликовано 1 комментарий

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
Выпадающее меню в Bootstrap

Выпадающее меню — один из компонентов Bootstrap, использующий для своей работы JavaScript. В контейнер с классом .dropdown (или position:relative) помещается кнопка, которую будут нажимать пользователи, для отображения выпадающей части (На картинке соответствует слову «Выпадающее»). После кнопки размещается Список с классом .dropdown-menu и доп. атрибутами aria-* при необходимости. Читать далее Выпадающее меню Bootstrap

Опубликовано Оставить комментарий

Bootstrap значки/glyphs

bootstrap-glyphs
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 responsive

Опубликовано 3 комментария

Bootstrap классы

Bootstrap классы
Bootstrap классы

В этой заметке под Bootstrap классами будет понимать и рассматривать вспомогательные классы фреймворка, которые помогают окрашивать текст и фон HTML-элементов, выравнивать элементы, прятать и отображать HTML-элементы в том числе с учетом мобильной верстки; чистить обтекания (последствия работы свойства float). Подробней о этих CSS-классах можно прочитать на странице фреймворка или в видео этой заметки. Читать далее Bootstrap классы

Опубликовано 1 комментарий

Bootstrap изображения

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 кнопки
Bootstrap кнопки

Bootstrap кнопки — это оформленные в едином стиле HTML-элементы a,button,input. Указанным элементам назначаются классы .btn и .btn-default (.btn-success или другие). Кнопки могут быть окрашены в классы, с названиями похожими на классы покраски строк таблицы.  .btn-primary (синий), .btn-success (зелёный), .btn-info (голубой) , .btn-warning (оранжевый), .btn-danger (красный), .btn-link (просто оформление ссылки).

Читать далее Bootstrap кнопки