Bootstrap имеет свою сеточную систему, которая позволяет упростить верстку адаптивных макетов.
Остальные компоненты такие как: кнопки, формы, таблицы и прочее можно сделать самому, в большинстве случаев на практике так и бывает.
Сеточная система Bootstrap состоит из 12-ти колонок и имеет четыре размера:
- Большие устройства ≥1200px
- Средние устройства ≥992px
- Малые устройства (планшеты) ≥768px
- Очень маленькие устройство (телефоны) <768px
Вся сетка должна располагается в контейнере, класс container или container-fluid. Отличие классов, в том что в первом случает максимальная ширина будет 1170px, т.е. ширина сайта не будет больше этого значения.
Внутри этого контейнера должен быть еще один элемент с классом row, строка сетки. В строке должны располагаться колонки. Для каждого размера колонки существует свой класс, так же класс существует и для каждого размера экрана:
- Большие устройства, класс .col-lg-
- Средние устройства .col-md-
- Малые устройства (планшеты) .col-sm-
- Очень маленькие устройство (телефоны) .col-xs-
В конце указывается количество занимаемых колонок от 1 до 12. Т.е. для большого устройства размер на 12 колонок будет col-lg-12, размер в 1 колонку — col-lg-1, по аналогии и для других размеров.
Давайте рассмотрим пример:
- <div class = "container">
- <div class = "row">
- <div class = "col-md-3 col-sm-6 col-sm-12">Первый</div>
- <div class = "col-md-9 col-sm-6 col-sm-12">Второй</div>
- </div>
- </div>
В самом начале мы создали контейнер, потом определили строку. Создали две колонки. Первая колонка на больших и средних устройствах будет занимать 3 колонки (25% ширины экрана), для планшета 6 колонок (50% ширины экрана) и для телефона 12 колонок (100% ширины экрана), вторая колонка будет занимать на компьютере 9 колонок (75%), для планшета 6 колонок (50%) и для телефона 12 колонок (100%).
Посмотреть, как будут работать колонки в браузере очень легко, нужно сужать размеры окна браузера и вы увидите, как будут изменяться размеры колонок.
Размеры окна в браузере Chrome удобней задавать с помощью специального расширения Window Resizer, установить его можно по ссылке https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?utm_source=chrome-app-launcher-info-dialog.