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

Bootstrap формы

Bootstrap формы
Bootstrap формы

Отдельные элементы управления  Bootstrap формы получают глобальные стили. Все элементы <input>, <textarea>, <select> с классом .form-control  получают стопроцентную ширину по умолчанию (width:100%). Для получения оптимального расстояния между элементами рекомендуется все метки и управляющие элементы оборачивать в класс и .form-group. Чтобы форма стала горизонтальной, HTML-элементу <form> добавляется класс .form-inline. При этом всегда рекомендутся добавлять метки каждому полю управления, иначе могут возникнуть проблемы с программами-читалками. Читать далее Bootstrap формы

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

Bootstrap таблицы

Bootstrap таблицы
Bootstrap таблица

Bootstrap таблицы сопровождаются классом .table, добавляемым к каждой таблице.<table class="table">...</table>. Если нужно чередовать окраску строк, таблице добавляется CSS-класс .table-striped (так называемая «зебра»). Для отрисовки бордюров строк со всех сторон применяется класс .table-bordered, подсветка строк при наведении — .table-hover. Окраска строк таблицы выполняется классами .active (светло-серый), .success (зеленый), .info (голубой), .warning (бежевый), .danger (розовый). Читать далее Bootstrap таблицы

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

Текст в Bootstrap

Текст в Bootstrap
Текст в Bootstrap

Текст в Bootstrap оформляется набором классов. Название этих классов дублирует название CSS-свойств. Для большинства HTML-элементов также прописаны CSS-свойства, например заголовки h1-h6 в Bootstrap оформляются шрифтом без засечек, а размер текста задается: h1 — 36px, h2 — 30px, h3 — 24px, h4 — 18px, h5 — 14px, h6 — 12px. Если внутри заголовка будет HTML элемент small, то этот текст будет меньшего размера и покрашен серым текстом. Bootstrap задаёт по умолчанию глобально размер текста font-size равным 14px с высотой строки line-height — 1.428. Читать далее Текст в Bootstrap

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

Bootstrap сетка

Bootstrap сетка
сетка

Bootstrap сетка — заранее прописанный набор CSS-классов, который позволяет расположить столбцы и блоки в сеточный формат. Сеточная модель применяется и в других фреймворках (например, 960grid); строиться  она на медиа-запросах (Media queries). Минимальным размером сетки является размер одной колонки, а вся ширина контейнера страницы состоит из двенадцати колонолок.  Контейнер сетки Bootstrap должен иметь класс .container или .container-fluid, а внутри него контейнер с классом .row и элементами с классами, начинающимися с «col». После обозначениея «col» идет краткое обозначение размера устройства для отображения; следом идет число от 1 до 12 — ширина текущего блока в ширинах отдельных колонок. Читать далее Bootstrap сетка

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

Установка Bootstrap

Установка Bootstrap - фундамента для работы
Установка Bootstrap — фундамента для работы

Bootstrap — фреймворк для разработки страниц, учитывающих мобильные устройства. Когда HTML-страницы разрабатываются начинающими разработчиками, со временем всплывает проблема создания мобильной версии сайта. С установкой Bootstrap и его использованием в проектах, проблема мобильной версии снимается — разработчик изначально указывает CSS-классы, предусматривающие различное отображение сайта на разных устройствах — десктопах, планшетах, смартфонах. Загрузить архив можно со страницы загрузки Bootstrap. Подключение производиться обычным способ — прописываются ссылки на CSS (<link … >) и JavaScript (<script …>). Подключить Bootstrap можно и размещением ссылок на CDN или ниже в этой заметке. Структура базового документа для работы достаточна проста. Читать далее Установка Bootstrap