Архив метки: Bootstrap

Bootstrap отзывчивые элементы

Bootstrap делаем отзывчивыми и элементы iframe

Bootstrap делаем отзывчивыми и элементы iframe

В Bootstrap отзывчивые элементы — это <iframe>, <embed>, <video> и <object>, содержащие класс .embed-responsive-item. Разрешаем браузерам определять размеры видео или слайд-шоу на основе ширины их содержащего блока, создавая соотношение сторон, которое будет правильно масштабировать на любом устройстве. Примечание: для HTML-элемента iframe необходимо добавлять frameborder=»0″, для сокрытия рамок. Читать далее

Bootstrap панели

Панели содержат необходимое DOM-содержимое

Панели содержат необходимое DOM-содержимое

Bootstrap панели — компонент, представляющий собой обертку для вашего HTML-кода. Используется в тех случаях, когда вы захотите (вывод справочной информации, уведомлений, индикация параметров и т.д.) Основные классы .panel и .panel-default. Если панель содержит шапку или подвал, то используются встроенные в панель контейнеры с классами .panel-heading и .panel-footer, а для основного содержимого применяется .panel-heading. Для окраски панелей используются контекстные классы: Читать далее

Bootstrap список

Создание списочной группы в Bootstrap

Создание списочной группы в Bootstrap

Bootstrap список или списочная группа — компонент фреймворка, позволяющий отобразить набор строк, подобно обычному списку, но в стиле оформления Bootstrap, без маркеров. Это очень гибкий компонент, который может быть использован при построении меню, перечня строк. Основные CSS-классы: .list-group (сама списочная группа) и .list-group-item (элемент этой группы). Вместе с списком могут быть использованы баджи, для указания пришедшей почты или совершении какого-то события (условия возникновения события прописывает программист). Читать далее

Bootstrap 3 элементы мультимедиа

Медиаобъекты в Bootstrap

Медиаобъекты в Bootstrap

Bootstrap 3 элементы мультимедиа — Набор абстрактных стилей для построения компонентов различных типов (подобно комментариям блога, твитам ти т.д.). Они содержат изображения, выровненное по правой или по левой стороне, относительно содержимого. Также могут быть размещены другие медийные объекты — видео, аудио; они также выравниваются по одной из сторон.

Читать далее

Bootstrap индикатор загрузки

Индикатор загрузки Bootstrap

Индикатор загрузки Bootstrap

Bootstrap индикатор загрузки — компонент Bootstrap, показывающий степень выполнения рабочего процесса. Классы индикатора — .progress и .progress-bar. Внимание: компонент использует CSS3 перехода и анимацию, потому не поддерживается в IE9 и ниже, старых Firefox. Opera 12 не поддерживает анимацию. За изменение полосы самого индикатора отвечает JavaScript код, соответствующий логике приложения (другими словами, этот код приедтся прописать самостоятельно). Для создания прогресс-бара вам понадобится следующий код:

Читать далее

Bootstrap уведомления (alerts)

Bootstrap уведомления

Bootstrap уведомления

Bootstrap уведомления — позволяют дать контекстную обратную связь для обычных действий пользователя. Основные классы для раборы — .alert и один из четверки (.alert-success, alert-info, .alert-warning, .alert-danger). Внимание: уведомления (alerts) не имеют класса по умолчанию, т.е. стандартный серый цвет не поддерживается, используются только четыре указанных класса. Читать далее

Thumbnail Bootstrap

Thumbnail Bootstrap - компонент Bootstrap, для просмотра небольшого изображения

Thumbnail — компонент Bootstrap, для просмотра небольшого изображения

Thumbnail Bootstrap— компонент Bootstrap, для просмотра небольшого изображения. Вместе с сеткой Bootstrap позволяет отображать сетку изображений, видео, текста или другую информацию. Для оформления картинок предпросмотра (тумбнейлов, thumbnails) подобно формату соц. сети Pinterest, используются сторонние плагины Massonry, Isotop или Salvattore. Читать далее

Bootstrap jumbotron

Jumbotron

Jumbotron

Bootstrap jumbotron — компонент фреймворка, ответственный за показ ключевого содержимого на вашем сайте. Основной класс .jumbotron размещается в div, содержащем ключевой контент (в этот див с классом иногда помещается div с классом .container ). Пример кода компонента Jumbotron: Читать далее

Bootstrap метки(label)

Boostrap метки (label)

Boostrap метки (label)

Bootstrap метки (label)- удачный способ выделить фрагмент HTML-заголовка или любого фрагмента сайта (цены, описания товара, имени сотрудника). Для добавления метки, в HTML-элемент добавляется span с классами label и label-default. Размер меток определяется размером заголовка (для h1, соответственно больше всего) Читать далее

Хлебные крошки и постраничное разбиение в Bootstrap

Постраничное разбиение в Bootstrap

Постраничное разбиение в Bootstrap

Хлебными крошками называется набор ссылок, помогающее сориентироваться посетителю в месторасположении на сайте, а постраничным разбиением (пагинация, паджинация) — набор ссылок, которые позволяют переходить к ограниченным наборам материалов сайта. Например при нажатии на ссылку с единицей, мы попадаем на первую страницу с десятью записями, при нажатии на ссылку с двойкой — на вторую страницу, с следующими десятью записями. Читать далее