Заметки относятся к курсам HTML и другим курсам направления веб-разработки
Выпадающее меню — один из компонентов Bootstrap, использующий для своей работы JavaScript. В контейнер с классом .dropdown (или position:relative) помещается кнопка, которую будут нажимать пользователи, для отображения выпадающей части (На картинке соответствует слову «Выпадающее»). После кнопки размещается Список с классом .dropdown-menu и доп. атрибутами aria-* при необходимости. Читать далее Выпадающее меню Bootstrap
Bootstrap глифы — наборы значков, предоставленных фреймворку проектом http://glyphicons.com/ и содержит более 250 знаков. Использовать глифы можно размещая span с классами, соответствующими названиям значков. Например, <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span> создаст значок «очки» отдаленно напоминающий Unicode-символ 🕶. Важно, не смешивать классы значков с другими компонентами Читать далее Bootstrap значки/glyphs
Bootstrap responsive — обозначение набора классов классов, позволяющих делать отзывчивую верстку. Классы отзывчивой верстки (не считая классов сетки) содержат комбинации для отображения и сокрытия HTML-элементов при разных размерах устройств отображения. Также они включают классы, которые прячут или показывают элементы страницы при печати, позволяя оформить версию страницы для печати.
В этой заметке под Bootstrap классами будет понимать и рассматривать вспомогательные классы фреймворка, которые помогают окрашивать текст и фон HTML-элементов, выравнивать элементы, прятать и отображать HTML-элементы в том числе с учетом мобильной верстки; чистить обтекания (последствия работы свойства float). Подробней о этих CSS-классах можно прочитать на странице фреймворка или в видео этой заметки. Читать далее 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 кнопки — это оформленные в едином стиле HTML-элементы a,button,input. Указанным элементам назначаются классы .btn и .btn-default (.btn-success или другие). Кнопки могут быть окрашены в классы, с названиями похожими на классы покраски строк таблицы. .btn-primary (синий), .btn-success (зелёный), .btn-info (голубой) , .btn-warning (оранжевый), .btn-danger (красный), .btn-link (просто оформление ссылки).
Отдельные элементы управления Bootstrap формы получают глобальные стили. Все элементы <input>, <textarea>, <select> с классом .form-control получают стопроцентную ширину по умолчанию (width:100%). Для получения оптимального расстояния между элементами рекомендуется все метки и управляющие элементы оборачивать в класс и .form-group. Чтобы форма стала горизонтальной, HTML-элементу <form> добавляется класс .form-inline. При этом всегда рекомендутся добавлять метки каждому полю управления, иначе могут возникнуть проблемы с программами-читалками. Читать далее Bootstrap формы
Bootstrap таблицы сопровождаются классом .table, добавляемым к каждой таблице.<table class="table">...</table>. Если нужно чередовать окраску строк, таблице добавляется CSS-класс .table-striped (так называемая «зебра»). Для отрисовки бордюров строк со всех сторон применяется класс .table-bordered, подсветка строк при наведении — .table-hover. Окраска строк таблицы выполняется классами .active (светло-серый), .success (зеленый), .info (голубой), .warning (бежевый), .danger (розовый). Читать далее Bootstrap таблицы
Bootstrap сетка — заранее прописанный набор CSS-классов, который позволяет расположить столбцы и блоки в сеточный формат. Сеточная модель применяется и в других фреймворках (например, 960grid); строиться она на медиа-запросах (Media queries). Минимальным размером сетки является размер одной колонки, а вся ширина контейнера страницы состоит из двенадцати колонолок. Контейнер сетки Bootstrap должен иметь класс .container или .container-fluid, а внутри него контейнер с классом .row и элементами с классами, начинающимися с «col». После обозначениея «col» идет краткое обозначение размера устройства для отображения; следом идет число от 1 до 12 — ширина текущего блока в ширинах отдельных колонок. Читать далее Bootstrap сетка
Bootstrap — фреймворк для разработки страниц, учитывающих мобильные устройства. Когда HTML-страницы разрабатываются начинающими разработчиками, со временем всплывает проблема создания мобильной версии сайта. С установкой Bootstrap и его использованием в проектах, проблема мобильной версии снимается — разработчик изначально указывает CSS-классы, предусматривающие различное отображение сайта на разных устройствах — десктопах, планшетах, смартфонах. Загрузить архив можно со страницы загрузки Bootstrap. Подключение производиться обычным способ — прописываются ссылки на CSS (<link … >) и JavaScript (<script …>). Подключить Bootstrap можно и размещением ссылок на CDN или ниже в этой заметке. Структура базового документа для работы достаточна проста. Читать далее Установка Bootstrap