Настройка bootstrap – Bootstrap 3 · Основы Bootstrap, как загрузить Bootstrap, поддерживаемые браузеры и устройства

Содержание

Настройка Bootstrap: выбор нужных компонентов

Настройка Bootstrap: выбор нужных компонентов

От автора: В данной статье рассказывается о том, как настроить Bootstrap перед скачиванием, и рассматриваются некоторые моменты, касающиеся выбора компонентов. Вы узнаете, какие возможности данного фреймворка вам нужны, а какие нет, в зависимости от ваших потребностей.

Из прошлой статьи вы уже знаете, что такое Bootstrap, когда его следует использовать, а также из чего он состоит. Сейчас вы узнаете, как выбирать компоненты для вашего проекта, как настроить фреймворк под ваши задачи, как убрать все лишнее и не запутаться при этом. Это начальный этап практической работы с Bootstrap, и любой базовый проект начинается с данного этапа.

Зачем настраивать Bootstrap

Это очень хороший вопрос, поскольку вы же можете просто скачать целиком весь архив, не настраивая его, и работать с ним. Есть две причины: во-первых, скорее всего вам не понадобятся все компоненты Bootstrap, а, во-вторых, размер всего фреймворка не такой уж незначительный (даже в сжатом виде) — 525 Кб. Плюс 95 Кб весит jQuery, потому что без него фреймворк не будет работать. Такую роскошь не может позволить себе ни один фронтенд разработчик, поэтому вам нужно убрать все лишнее. В любом случае всегда удаляйте ненужные компоненты.

Выбор компонентов

На странице загрузки Bootstrap вы увидите форму с чекбоксами. Здесь вам нужно отметить те компоненты, которые пригодятся вам в работе над проектом. И давайте теперь взглянем на некоторые составляющие Bootstrap и их предназначение.

Настройка Bootstrap: выбор нужных компонентов

Настройка Bootstrap: выбор нужных компонентов

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Базовый CSS (Common CSS)

Это набор базовых элементов, необходимых для базовой разметки. Его всегда рекомендуется оставлять отмеченным.

Стили для печати (print media styles)

Это стили, которые используются браузерами перед печатью страниц. Вы можете настроить их, как вам нравится, используя следующую запись:

@media print { /* ваши стили */ }

@media print {

  /* ваши стили */

}

Типографика (Typography)

Базовое оформление текста: различные отступы, абзацы, цитаты, подсветка кода, форматированный текст, заголовки, индексы – все это оформляется с помощью данных стилей.

Даже если вы не будете использовать предустановленные классы на странице, ее содержимое будет отображено в стиле Bootstrap. Это полезно для тех, кто не может или не хочет копаться в старом коде. Просто подключите библиотеку, чтобы сделать текст привлекательнее.

Вот как можно изменить простой текст без использования дополнительных стилей:

Настройка Bootstrap: выбор нужных компонентов

Код (Code)

Форматирование кода на страницах. Конечно, здесь не будет подсветки синтаксиса. Для этого нужно будет использовать сторонний плагин (не имеющий никакого отношения к Bootstrap). Но фреймворк позволит вам отличать код от обычного текста с помощью использования тегов code, pre или kdb.

Сеточная система (Grid system)

Магия, которую используют CSS фреймворки, до сих пор вызывает благоговейный трепет у бывалых разработчиков, которые начинали работать еще 10 лет назад, и перед началом проекта им предстояло сделать выбор между табличной или блочной версткой. А сегодня, просто путем добавления нужных классов, вы получаете адаптивный (отзывчивый) макет для вашего веб-сайта всего за 10 минут.

Давайте посмотрим на пример того, как это может выглядеть:

Настройка Bootstrap: выбор нужных компонентов

Таблицы (Tables)

Табличная верстка давно ушла в прошлое, но табличные данные должны отображаться соответствующим образом, если не предусмотрено ничего другого. Без хорошо подобранного дизайна, данные будут смотреться не очень привлекательно. Постарайтесь избегать следующего отображения:

Настройка Bootstrap: выбор нужных компонентов

После простого добавления Bootstrap, без внесения каких-либо изменений в HTML, таблица будет выглядеть вот так:

Настройка Bootstrap: выбор нужных компонентов

Формы (Forms)

Если вам нужно создать формы, вы можете использовать Bootstrap:

Настройка Bootstrap: выбор нужных компонентов

Отметьте чекбокс «Форма» («Form»), если вам предстоит создание формы.

Кнопки (Buttons)

Кнопки Bootstrap достойны отдельного обсуждения: по умолчанию они бывают 4 размеров и 7 разных типов. Дополнительно есть кнопка с выпадающим меню, блочные кнопки и т.д. По умолчанию кнопки в Bootstrap выглядят вот так:

Настройка Bootstrap: выбор нужных компонентов

Утилиты для отзывчивого дизайна (Responsive utilities)

В Bootstrap есть набор полезных инструментов для быстрого и легкого создания макета под мобильные устройства. Благодаря этим инструментам вы можете скрывать и показывать некоторые компоненты на разных устройствах, изменять их размеры, отдельно для больших, средних и маленьких экранов. Данный компонент существенно сокращает количество кода и состоит из следующих классов:

Настройка Bootstrap: выбор нужных компонентов

Как видите, один и тот же блок может быть скрыт на планшете, но отображен на настольном компьютере или мобильном устройстве.

Компоненты (Components)

Здесь дается лишь краткое объяснение, потому что сами по себе компоненты малы и можно легко понять их предназначение по названию.

1. Глиф-иконки (Glyphicons). Иконочный шрифт. Весит около 250 Кб и редко используется. Поэтому если он не нужен, отключите его.

2. Группы кнопок (Button groups). Блоки, состоящие из пары кнопок.

3.Группы полей ввода (Input groups). Расширение для текстовых блоков и полей, например, «Имя пользователя» (Username):

Настройка Bootstrap: выбор нужных компонентов

Настройка Bootstrap: выбор нужных компонентов

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

4. Навигация (Navs). Навигация по табам (вкладкам). Для использования нужно подключить js-модуль.

5. Навигационная панель (Navbar). Навигация для главного меню; может быть фиксированной, светлой или темной.

6. «Хлебные крошки» (Breadcrumbs). Позволяет пользователям отслеживать местонахождение на сайте.

Настройка Bootstrap: выбор нужных компонентов

7. Постраничная навигация (Pagination). Отображает количество страниц на веб-сайте. Особенно полезно для блогов.

8. Переключатель страниц (Pager). Кнопки «вперед» и «назад».

9. Этикетки (Labels). Имеется 6 типов:

Настройка Bootstrap: выбор нужных компонентов

10. Бейджи (Badges). Используются, например, для отображения количества непрочитанных сообщений.

11. Приветственный блок (Jumbotron). Большой блок с вступительным текстом. Обычно используется на промо-сайтах и содержит короткое описание проекта.

12. Миниатюры (Thumbnails). Отвечает за отображение уменьшенных вариантов изображений.

13. Предупреждения (Alerts). Указывают на успех, ошибку, информацию или подсказку.

14. Индикатор процесса (Progress bars). Процесс выполнения отображается в процентах. Дополнительно можно применять анимацию и добавлять полосатый фон.

15. Медиа объекты (Media items). Форматирование блоков с комментариями, твитами и т.д. Это обычно списки с вложенными элементами, у которых может отличаться отступ слева, как у традиционных древовидных комментариев.

16. Группы списков (List groups). Форматирование списков с дополнительными возможностями: сноски, ссылки, примечания, уведомления (смотрите «этикетки» («labels»)).

17.Панели (Panels). Блоки с хедером, основным контентом и футером. Могут использоваться для усовершенствованных уведомлений, а также для элементов управления или форм.

18. Встраивание отзывчивых элементов (Responsive embed). «Отзывчивые» объекты могут расширяться и подстраиваться под разные размеры экрана для отображения видео в нужных пропорциях и без непосредственного указания размера.

19. Вдавленные элементы (Wells). Блоки с подсказками, альтернативным оформлением для цитат и т.д.

20.

Иконка закрытия (Close icon). Предназначение должно быть понятно по названию.

Компоненты JavaScript

Bootstrap расширяет возможности динамических функций. Работа данного раздела фреймворка основывается на jQuery, и он обязательно должен быть подключен к bootstrap.min.js. Состоит данный раздел из следующих компонентов:

1. Анимация компонентов (Component animations) (для JS). Плавные переходы, анимация.

2. Выпадающие элементы (Dropdowns). Выпадающие списки.

3. Всплывающие подсказки (Tooltips). Небольшие появляющиеся подсказки.

Настройка Bootstrap: выбор нужных компонентов

4. Всплывающие элементы (Popovers). По сути такие же всплывающие подсказки, к которым вы можете добавить динамический контент, хедер и основной текст:

Настройка Bootstrap: выбор нужных компонентов

5.

Модальные окна (Modals). Всплывающие окна. Вы можете изменять их размеры, добавлять заголовок, основной текст, футер, изменять их так, как вам захочется. По умолчанию они выглядят так:

Настройка Bootstrap: выбор нужных компонентов

6. Карусель (Carousel). Простой слайдер с выбором анимации.

Настройка переменных

Вы можете изменять стандартные настройки, исходя из ваших потребностей. Вы можете создать собственную тему для Bootstrap двумя способами:

Создайте ваш файл style.css и уже в нем определяйте стили, которые «перезапишут» стили по умолчанию.

В блоке с переменными Less вы можете изменить параметры на те, которые вам действительно нужны, и скачать измененный под вас архив с Bootstrap.

Скачивание

После того как вы закончите с изменением настроек, нажмите на кнопку «Компилировать и скачать» («Compile and download»). В загруженном архиве у нас будут содержаться только выбранные нами элементы. Для сравнения: небольшой проект использует лишь какую-то часть функционала, поэтому размер фреймворка очень легко уменьшить с 600 Кб до 100 Кб. Полученные в результате файлы можно сохранить в папке с проектом, а затем подключить bootstrap.min.css и (если нужно) bootstrap.min.js.

Источник: http://basicuse.net/

Редакция: Команда webformyself.

Настройка Bootstrap: выбор нужных компонентов

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее Настройка Bootstrap: выбор нужных компонентов

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Настройка Bootstrap для начала работы

Перед тем, как приступать к разработке сайта с использованием Bootstrap, нам необходимо сконфигурировать архив, который мы будем использовать в работе.

С опытом это будет занимать у Вас считанные секунды, но пока у нас данного опыта нет, нам нужно понять за что отвечает каждая галочка при настройке Bootstrap и решить нужна ли она нам.

Этот урок посвящен подробному освещению компонентов скачиваемого нами архива.

Настройка Bootstrap

Зачем это нужно?

Судите сами, если мы просто скачаем все компоненты BS без предварительного отсекания ненужных файлов, то запакованный архив весит 628кб + необходимость подключить библиотеку jQuery, чтобы все корректно работало.

Не нужно быть пророком, чтобы предсказать увеличение длительности загрузки страницы минимум на секунду только из-за того, что нам было лень исходно подобрать необходимый нам функционал фреймворка.

Если Вас не смущают данные цифры, то Вы только начали осваивать азы фонт-энда. Все адекватные разработчики отлично понимают необходимость сокращения любой ценой размера страницы и количества обращений к серверу при ее загрузке.

Конфигурируем Bootstrap

Перейдя на официальный сайт продукта, перед нами открывается следующая картина:

Настройка Bootstrap

Как мы видим, перед нами имеется три основных группы чекбоксов на выбор. Разберем их по-порядку:

Common CSS

Файлы CSS содержащие код для оформления всех базовых элементов страницы. Их можно смело оставлять подключенными. Впрочем, остановимся на каждом подробнее:

  • Print media styles – когда страница сайта распечатывается, то ее оформление может значительно отличаться от того, что мы видим у себя на мониторе. CSS определяющий внешний вид документа при печати содержится в данном файле. Если нас что-то не устраивает в базовой поставке Bootstrap мы можем быстро подогнать все под себя воспользовавшись директивой @media print внутри нашего файла CSS:
    @media print {
    /*наше оформление*/
    }
  • Typography – все, что связанно с форматированием текста (абзацные отступы, выделение заголовков, цитаты и многое другое). Отлично подходит для того, чтобы сделать текст читабельнее не потратив на это лишнего времени, а просто подключив этот файлик CSS.
    Оформление текста Bootstrap
    Больше информации: урок по оформлению текста с Bootstrap.
  • Code – позволяет стилизовать код выводимый на странице. Для полноценной подсветки синтаксиса Вам по-прежнему придется воспользоваться специализированными плагинами, но в целом чтобы визуально выделить код (поместив его внутрь тегов <code>, <pre>, <kdb>) вполне подойдет.
  • Grid system – один из мощнейших инструментов в Bootstrap. Позволяет за считаные минуты набросать структуру для сайта с адаптивной версткой используя определенную систему классов.
    Bootstrap блочная модель
  • Tables – оформление данных в таблице одна из самых рутинных задач в работе редко требующая изобретения «велосипеда» с 0. Стили из Tables позволяют неказистое стандартное оформление превратить в достаточно качественное и подходящее Вам путем навешивания буквально пары классов на таблицу:
    Таблицы в Bootstrap
    Подробнее: урок по оформлению таблиц с Bootstrap.
  • Forms – решает не менее рутинную задачу с оформлением форм. Можно оформить все что угодно начиная от обычных текстовых полей и заканчивая чекбоксами, выпадающими списками и даже верно/не верно заполненными полями.
    Формы Bootstrap
    Больше информации: урок по оформлению форм на Bootstrap
  • Buttons – моментальное оформление кнопок используя подходящие нам комбинации классов.
    Bootstrap кнопки Больше можно узнать в уроке посвященном работе с кнопками на Bootstrap
  • Responsive utilities – набор классов ускоряющий верстку сайта под различные типы устройств. Для этих целей мы имеем 4 классификатора в названиях классов отвечающих за определение разрешения экрана пользователя (xs – 766 px и менее; sm – 768-991 px; md - 992—1199 px; lg – 1200+ px;) и 2 сообщающих что должно произойти с тегом, к которому мы обращаемся (visible- виден только под данным разрешением экрана, а под остальными скрыт; hidden – скрыт только под данным разрешением экрана, а под остальными виден). Комбинируются они следующим образом: .visible-sm - блок виден только на устройствах с разрешением экрана 768-991 px; .hidden-md – блок виден на всех разрешениях экранов кроме 992—1199 px.
Components

Включает в себя набор файликов с кодом заточенным под решение достаточно узкоспециализированных задач. В большинстве своем за что отвечает каждый чекбокс в этой группе понятно из названия, но на всякий случай пройдемся и по ним:

  • Glyphicons- подключение бутстраповского иконочного шрифта. Потому если Вы не планируете использовать его при оформлении, то можете смело его отключать. Особенно учитывая, что он весит более 200кб и далеко не всем нравится визуально.
    Иконочный шрифт Bootstrap
  • Button groups- используется для группировки кнопок в блоки.
  • Input groups – оформление полей форм (input, textarea и тд).
  • Navs – используется для оформления навигации сайта. Классы для оформления начинаются с .nav, далее уточняется как именно оформляется навигация. К примеру:
    Навигация Bootstrap
    Для своей работоспособности потребует подключения js компонентов.
  • Navbar- также используется для оформления меню сайта. Включает в себя оформление выпадающих меню, различные цветовые гаммы, адаптацию под различные разрешения сайта и тд. Чтобы все работало также потребуется активация JS плагина.
  • Breadcrumbs- не нужно быть Ностадамусом, чтобы понять что это оформление хлебных крошек на сайте.
  • Pagination – оформление постраничной навигации на сайте.
    Постраничная навигация Bootstrap
  • Pager- применяется для стилизации кнопок назад и вперед.
  • Labels- различный лейблы. Что это такое проще понять рассматривая пример:
    Лейблы Bootstrap
  • Badge- отлично подходит для оформления виджета количества комментариев, количества товаров в рубрике, новых сообщений и много другое.
    Бейджи Bootstrap
  • Jumbotron- удобный, легко масштабирующийся компонент оформления сайта. Отлично подходит для оформления первого экрана сайта и промо-текстов.
  • Thumbnails- оформление превью видео, картинок и прочего.
  • Alerts – стилизация системных сообщений, диалоговых окон. К примеру:
    Диалоговые окна Bootstrap
  • Progress bars- оформляет виджеты отображающие прогресс какого-либо процесса.
  • Media items- используется для оформления имеющих «древовидную» структуру (блоки с различными отступами справа). Ярким примером могут быть комментарии на блоге.
  • List groups- стилизуем списки.
  • Panels- не самый необходимый нам компонент. Используется в случаях, когда нам необходимо поместить наш код в определенный контейнер. К примеру, отделить хедер от основного содержимого сайта и так далее.
  • Responsive embed- создает «резиновые» элементы дизайна, которые будут менять свою ширину и высоту пропорционально размерам экрана.
  • Wells- выделение определенных фрагментов кода, чаще всего текста. К примеру в случае различного рода подсказок и цитат.
  • Close icon- стилизуем кнопку «закрыть»…
JavaScript components

Данные элементы ответственны за всевозможные динамические элементы на странице. К примеру слайдеры или же красиво всплывающие окна.
Для своей работоспособности требует подключенной библиотеки jQuery и файла bootstrap.min.js. Включает в себя:

  • Component animations (for JS)- задает плавное движение элементов, анимации.
  • Dropdowns- скрипт для выпадающих списков.
  • Tooltips-маленькие подсказки появляющиеся по клику на чем-либо.
  • Popovers- позволяет оформлять всплывающие подсказки. К примеру:
    Подсказки Bootstrap
  • Modals- стилизация всплывающих окон. Позволяет делать с ними что угодно, вплоть до смены текста.
  • Carousel- знакомый многим слайдер-карусель. Мы можем стилизовать его и изменять характер движения картинок по своему усмотрению.

Часто задаваемые вопросы

Как можно модифицировать базовые параметры Bootstrap?

Самый простой способ просто перекрыть не подходящие нам стили из фреймворка в своем файле CSS.

Есть еще вариант настроить бутстрап исключительно под себя еще до его скачивания воспользовавшись блоком Less Variables.

Что делать если что-то из функционала исходно не было подключено в нашу сборку, а во время работы над проектом в этом возникла необходимость?

Для этого необходимо заново сконфигурировать архив с Бутстрапом, на этот раз выбрав все необходимые нам для работы элементы и заменить им тот, которым Вы пользовались при верстке.

Все будет отлично работать, если Вы правильно верстали свой сайт не залезая в файлы бутстрапа.

Есть еще вариант скачать необходимый нам файл и, подкорректировать настройки в config.json так, как нам нужно, чтобы все подключилось.

Подводя итоги

Грамотно настроив систему мы вполне можем сократить размер архива с необходимыми нам файлами килобайт до 100-150…

О том, как подключить скачанный архив для работы я уже рассказывал в конце вводного урока по Bootstrap.

Оценок: 2 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Как модифицировать настройки Bootstrap / Habr

Иногда возникает желание подкрутить что-то в css Bootstrap-а. Причем есть вещи, которые сложно переопределить css файлом загруженным после bootstrap. Например значения в селекторах media query. Поэтому возникает желание поправить css файл фреймворка. Для этого на сайте имеется Bootstrap customizer. Кроме изменения css, можно отключить неиспользуемые компоненты. После настройки внизу страницы будет доступна для загрузки персональная скомпилированная версия фреймворка.
Возникает вопрос, а если потребуется позже еще подкрутить что-то, то как загрузить старые настройки? Опять всё ручками выставлять? Сайт не дает ответа на этот вопрос.
Решение.

Чтобы запустить кастомизатор локально, можно загрузить исходные коды, скомпилировать проект и вот у нас локальная версия. Звучит просто, а дъявол, как водится — в деталях. Чтобы Bootstrap скомпилировался, понадобится стандартный набор NodeJS + NPM + GRUNT. А вот чтобы скомпилировать/запустить кастомизатор, то понадобится дополнительно Jekyll, который требует окружения Ruby, а под виндами без бубна не заводится совсем. В качестве бубна понадобится — Ruby, Ruby Dev Kit (чтобы билдить нативные расширения), Jekill gem, Python, Python setup_tools, pip, Pygments под питон, Pygments gem. В общем я смалодушничал и мне сделали билд в виртуальной машине под линуксом. Чтобы вам не пришлось проходить через это, в конце статьи лежит готовый архив с кастомизатором.
Возвращаемся к нашей задаче конфигурирования Bootstrap. В пакете загруженном после конфигурирования есть файлик config.json, который содержит все настройки. Теперь, чтобы загрузить эти настройки назад в конфигуратор, понадобится следующее:
— идем на гитхаб в гисты
— создаем публичный гист с нашей конфигурацией
— прописываем ему имя config.json

— сохраните номер созданного гиста
— теперь вы можете загрузить вашу конфигурацию в кастомизатор — пропишите номер гиста в урле после id: getbootstrap.com/customize/?id=gist_number, Если вы завели себе локальный кастомизатор, то он тоже «съест» ваш гист с конфигурацией.

Кстати вы можете заметить, что урл конфигуратора Bootstrap, после загрузки скомпилированной версии, меняется и он содержит некоторый идентификатор. Это автоматически созданный гист, вы можете найти его на гихабе по номеру. Там лежит конфигурация со сделанными изменениями. Она отличается от файла в архиве тем, что она не содержит всех переменных.
Данный пост написан по следам ответа на вопрос на stackoverflow — Reload Bootstrap customization

Добавлено позже:
Здесь не использовано никаких хаков Bootstrap. Используются только средства, которые предоставляет сам фреймворк и его родной кастомизатор, расположенный там же на сайте.
Скомпилированный кастомизатор Bootstrap.

Настройка и загрузка. Документация Bootstrap 3.4

Перекличить все

Выберите из файлов Less те, которые будут включены в вашу собственную сборку Bootstrap. Не уверены, какие файлы использовать? Ознакомьтесь с документацией по CSS и Компонентам.

Перекличить все

Выберите из jQuery плагинов которые должны включаться в вашу собственную сборку файлов JavaScript. Не уверены что именно включать? Прочитайте документацию относительно JavaScript.

Производит два файла

Все отмеченные плагины будут собраны в читабельный bootstrap.js и минимизированный bootstrap.min.js. Мы рекомендуем использовать минимизированную версию для рабочих (production) версий.

Требуется jQuery

Все плагины требуют подключения последней версии jQuery.

Восстановить значения по умолчанию

Настройте Less переменные, чтобы определить цвет, размер и прочее внутри ваших пользовательских CSS стилей.

Цвета

Серые и фирменные цвета для использования во всем Bootstrap.

Scaffolding

Настройки для некоторых из самых глобальных стилей.

Типография

Шрифт, интервал, цвет для основного текста, заголовков, и многое другое.

Iconography

Укажите другое расположение и имя файла включены шрифта Glyphicons значок. Полезно для тех, в том числе Bootstrap через Bower.

Компонентам

Определите общий padding и размер border и многое другое. Базовые значения 14px текст и 1.428 line-height (~20px to start).

Таблицы

Настраивает .table компонетнт с базовыми значениями, используется во всех вариантах таблицы.

Кнопки

Для каждой Bootstrap's кнопки, определите текст, цвет фона и рамки.

Формы

@legend-color

@legend-border-color

Выпадающее меню

Контейнер выпадающего меню и содержание

Определите контрольные точки, при которых ваш макет будет меняться, приспосабливаясь к различным размерам экрана.

Блочная система

Определите свою адаптивную разметку.

Размеры контейнера

Задайте максимальную ширину .container для разных размеров экрана.

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

Перевернутая навигация

Навигация

Разделяемые навигационные стили

Tabs

Pills

@pagination-color

@pagination-bg

@pagination-border

@pagination-hover-color

@pagination-hover-bg

@pagination-hover-border

@pagination-active-color

@pagination-active-bg

@pagination-active-border

@pagination-disabled-color

@pagination-disabled-bg

@pagination-disabled-border

@pager-bg

@pager-border

@pager-border-radius

@pager-hover-bg

@pager-active-bg

@pager-active-color

@pager-disabled-color

Jumbotron

Форма состояния и предупреждений

Определить цвета формы обратной связи состояния и, по умолчанию оповещения.

Информеры

Ярлыки

Модали

Уведомления

Определить цвета уведомлений, радиус рамок и отступы.

Индикатор выполнения

Список группы

Панели

Эскизы

Ячейки

Значки

Навигационный маршрут

Карусель

Кнопка закрытия

Код

Тип

@page-header-border-color

Настройка и загрузка. Документация Bootstrap 3.3.7

Перекличить все

Выберите из файлов Less те, которые будут включены в вашу собственную сборку Bootstrap. Не уверены, какие файлы использовать? Ознакомьтесь с документацией по CSS и Компонентам.

Перекличить все

Выберите из jQuery плагинов которые должны включаться в вашу собственную сборку файлов JavaScript. Не уверены что именно включать? Прочитайте документацию относительно JavaScript.

Производит два файла

Все отмеченные плагины будут собраны в читабельный bootstrap.js и минимизированный bootstrap.min.js. Мы рекомендуем использовать минимизированную версию для рабочих (production) версий.

Требуется jQuery

Все плагины требуют подключения последней версии jQuery.

Восстановить значения по умолчанию

Настройте Less переменные, чтобы определить цвет, размер и прочее внутри ваших пользовательских CSS стилей.

Цвета

Серые и фирменные цвета для использования во всем Bootstrap.

Scaffolding

Настройки для некоторых из самых глобальных стилей.

Типография

Шрифт, интервал, цвет для основного текста, заголовков, и многое другое.

Iconography

Укажите другое расположение и имя файла включены шрифта Glyphicons значок. Полезно для тех, в том числе Bootstrap через Bower.

Компонентам

Определите общий padding и размер border и многое другое. Базовые значения 14px текст и 1.428 line-height (~20px to start).

Таблицы

Настраивает .table компонетнт с базовыми значениями, используется во всех вариантах таблицы.

Кнопки

Для каждой Bootstrap's кнопки, определите текст, цвет фона и рамки.

Формы

@legend-color

@legend-border-color

Выпадающее меню

Контейнер выпадающего меню и содержание

Определите контрольные точки, при которых ваш макет будет меняться, приспосабливаясь к различным размерам экрана.

Блочная система

Определите свою адаптивную разметку.

Размеры контейнера

Задайте максимальную ширину .container для разных размеров экрана.

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

Перевернутая навигация

Навигация

Разделяемые навигационные стили

Tabs

Pills

@pagination-color

@pagination-bg

@pagination-border

@pagination-hover-color

@pagination-hover-bg

@pagination-hover-border

@pagination-active-color

@pagination-active-bg

@pagination-active-border

@pagination-disabled-color

@pagination-disabled-bg

@pagination-disabled-border

@pager-bg

@pager-border

@pager-border-radius

@pager-hover-bg

@pager-active-bg

@pager-active-color

@pager-disabled-color

Jumbotron

Форма состояния и предупреждений

Определить цвета формы обратной связи состояния и, по умолчанию оповещения.

Информеры

Ярлыки

Модали

Уведомления

Определить цвета уведомлений, радиус рамок и отступы.

Индикатор выполнения

Список группы

Панели

Эскизы

Ячейки

Значки

Навигационный маршрут

Карусель

Кнопка закрытия

Код

Тип

@page-header-border-color

Bootstrap - Настройка окружающей среды

Попробуйте электронный вариант Bootstrap

Пример html кода на Bootstrap:
<!DOCTYPE html>
<html lang = "ru">
   
   <head>
      <meta charset = "utf-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <title>Шаблон Bootstrap 101</title>
      
      <!-- Bootstrap -->
      <link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h2>Привет мир!</h2>
      
      <!-- jQuery (необходим для JavaScript плагинов в bootstrap.) -->
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      
      <!-- Включает все скомпилированные плагины (ниже), или включает отдельные файлы по мере необходимости -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
      
   </body>
</html>

 

Очень легко установить и начать использовать Bootstrap. В этой главе будет рассказано, как загрузить и установить Bootstrap. Мы также обсудим файловую структуру Bootstrap, и продемонстрируем его использование на примере.

Скачивание Bootstrap

Вы можете скачать последнюю версию Bootstrap на сайте http://getbootstrap.com/. При нажатии на эту ссылку, вы можете увидеть экран, как показано ниже:

Bootstrap - Настройка окружающей средыBootstrap - Настройка окружающей среды

При нажатии на кнопку DownloadBootstrap, страница перенаправит на другую страницу. Здесь вы можете увидеть три кнопки:

Bootstrap - Настройка окружающей средыBootstrap - Настройка окружающей среды

  • Download Bootstrap – Щелкнув по этой кнопке, вы можете загрузить скомпилированную и уменьшенную версии Bootstrap CSS, JavaScript и шрифты. Нет документации или оригинальных исходных файлов кода не включены.
  • Download Source – При нажатии на нее, вы можете получить последний Bootstrap LESS и исходный код JavaScript непосредственно из GitHub.
  • Download Sass – При нажатии, вы можете получить последнюю Bootstrap LESS, Sass для легкого включения в Rails, Compass, или Sass только для проектов.

Если вы работаете с неоткомпилированным исходным кодом Bootstrap, вы должны скомпилировать файлы LESS для создания используемых CSS – файлов. Для компиляции LESS файлов в CSS, Bootstrap официально поддерживает только Recess, CSS Hinter Twitter, основанный на less.js.

Для лучшего понимания и простоты использования, мы будем использовать готовую версию Bootstrap на протяжении всего урока. По мере того как создаются файлы и вам не придется беспокоиться каждый раз об уменьшении, включая отдельные файлы для индивидуальной функциональности. На момент написания этой обучающей программы была загружена последняя версия (Bootstrap 3).

Файловая структура

Скомпилированный Bootstrap

После того, как загрузятся скомпилированные версии Bootstrap, извлеките файл ZIP, и вы увидите следующую структуру файлов/каталогов:

Скомпилированный BootstrapСкомпилированный Bootstrap

Как вы можете видеть, компилируются CSS и JS (bootstrap. *), а также скомпилированные и уменьшенные CSS и JS (bootstrap.min. *). Шрифты от Glyphicons включены, так как это дополнительная тема Bootstrap.

Исходный код Bootstrap

Если вы загрузили исходный код Bootstrap, то структура файла будет выглядеть следующим образом:

Исходный код BootstrapИсходный код Bootstrap

  • Файлы less/, js/, и fonts/ являются исходным кодом для Bootstrap CSS, JS, и значки шрифтов (соответственно).
  • Папка dist/ включает в себя все перечисленные в разделе загрузки скомпилированного выше.
  • docs-assets/, examples/, и все * .html файлы документации Bootstrap.

Шаблон HTML

Базовый шаблон HTML с использованием Bootstrap будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h2>Привет мир!</h2>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

 

Здесь вы можете увидеть файлы jquery.js , bootstrap.min.js и bootstrap.min.css, которые включены, чтобы сделать нормальный HTM файл шаблона Bootstrapped. Просто убедитесь, чтобы включить библиотеку JQuery, прежде чем включать библиотеку Bootstrap.

Более подробная информация о каждом из элементов фрагмента кода выше будет обсуждаться в главе Bootstrap обзор CSS.

Пример

Теперь давайте попробуем пример использования шаблона выше.

<h2>Hello, world!</h2>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Параметры настройки · Bootstrap на русском

Настройте Bootstrap 4 с помощью встроенных пользовательских переменных в файл и легко переключайте глобальные CSS значения с новыми $enable-* Sass переменными. Переопределите значение переменной и пересоберите с включенным Gruntfile по мере необходимости.

Настройка переменных

Bootstrap 4 поставляется с _custom.scss файл для простой перезаписи переменных. Скопируйте и вставьте соответствующие строки _variables.scss в пользовательский файл и перекомпилируйте Sass чтобы изменить наши значения по умолчанию. Убедитесь, что удалили !default флаг от переопределения значений.

Например, чтобы поменять background-color и color для <body>, Вы могли бы сделать следующее:

// Bootstrap перекрывает
//
// Копирование переменных из `_variables.scss` в этот файл, чтобы переопределить значения по умолчанию
// без изменения исходных файлов.

$body-bg:    $gray-dark;
$body-color: $gray-light;

Сделайте то же самое для любой переменной нужно переопределить, включая глобальные параметры, перечисленные ниже.

Глобальные опции

Вы можете найти и настроить эти переменные для ключевых глобальных опций в нашем _variables.scss файла.

Переменная Значения Описание
$spacer 1rem (default), or any value > 0 Задает значение по умолчанию для прокладки наших коммуникаций прокладка.
$enable-flex true or false (default) Поменяйте float и display: table стили для display: flex.
$enable-rounded true (default) or false Позволяет предопределенный border-radius стили различных компонентов.
$enable-shadows true or false (default) Позволяет предопределенный box-shadow стили различных компонентов.
$enable-gradients true or false (default) Позволяет предопределенный градиент через background-image стили на различные компоненты.
$enable-transitions true (default) or false Позволяет предопределенный transitions на различные компоненты.
$enable-hover-media-query true or false (default) ...
$enable-grid-classes true (default) or false Разрешает генерацию CSS классы для блочной системы (например,, .container, .row, .col-md-1, и т. д.).

Отправить ответ

avatar
  Подписаться  
Уведомление о