Bootstrap для новичков, что это и как его установить. Bootstrap — простая адаптивная верстка для новичков

Система сеток в Twitter Bootstrap 3 – это быстрый путь для создания html макета сайта. Как раз это самая основная часть в bootstrap, т.к. благодаря сетки с можно создать адаптивную версию сайта, обеспечивает правильное расположение всех элементов. И начинает разработка макета с css класса container.

Container (контейнер) с фиксированной шириной.

Из названия очевидно, что container содержит заданную width, изменения которой происходят в следствии изменении рабочего окна браузера.

Выравнивание происходит по центру с помощью css свойств: .container{ margin-left: auto; margin-right: auto; } Container имеет внутренние отступы: .container{ padding-left: 15px; padding-right: 15px; }

В таблице ниже представлена ширина container, которая зависит от ширины окна веб-клиента пользователя:

Контейнер с резиновой шириной. В отличии от фиксированного container, container-fluid не имеет ширины, и единственное, что у него есть из css классов: .container{ padding-left: 15px; padding-right: 15px; }

Ряд внутри контейнера.

После того, как вы определились с контейнером нужно переходить к рядам. Ряд принимает такую же ширину, как и контейнер. Имеет отрицательный margin:

Row{ margin-left: -15px; margin-right: -15px; } В итоге наша конструкция уже получает вид (для примера возьму фиксированную ширину):

Применение блоков в Twitter Bootstrap. Как до этого писал css-класс row служит для создания рядов. А внутри этих самых рядов необходимо размещать блоки:

Внутри блока размещается контент сайта. Также можно размещать еще одни ряды. Один ряд содержит 12 блоков.

Ширина блока указывается в относительном формате посредством необходимого количества колонок. Стартовая ширина – 1 – соответствует одной колонке Bootstrap, наибольшая ширина – 12 – максимальное количество колонок в одном ряду.

Например: если нам необходимо в одном ряду иметь 4 блока с идентичной шириной, то нам нужно задать width равную 3 (div class ="col-*-3" > ... div >). В сумме выходит 12 (3+3+3+3).

Адаптивная верстка под гаджеты

Я до этого писал, что Twitter Bootstrap 3 знаменит своими сетками, которые подходят под различные пользовательские устройства, будь то телефон, планшет, монитор вашего домашнего/рабочего компьютера). И как раз пришло время до конца разобраться с этим.

В примере выше после слова col я ставил звездочку. И как раз вместо звездочки нужно указывать для какого устройска будет применяться заданный блок:

– col-xs-* – применяется для создание сетки с маленькими экранами. Под это определение подходят телефоны;
– col-sm-* – для устройств чуть большей ширины экрана, чем у телефона, например планшет;
– col-md-* – средних размеры экранов, т.е. нетбуки;
– col-lg-* – для больших экранов. Если верить яндекс.метрике , то на данный момент количество пользователей именно сидят на сайтах под этими экранами. Но этот показатель очень сильно зависит от тематики сайта.

В таблицы ниже приведены данные относительно этих классов: Вид системы сеток Twitter Bootstrap 3 Крошка-экран
Смартфоны
(Небольшой экран
Планшеты
(≥768px и Средний экран
Ноутбуки
(≥992px и Большой экран
Компьютеры
(≥1200px)

Фиксированный макет (class ="container" )	Соответствует 100% ширине веб-клиента	750px	970px	1170px
Резиновый макет (class ="container-fluid" )	Соответствует 100% ширине экрана веб-клиента
Префикс класса	class ="col-xs-*"	class ="col-sm-*"	class ="col-md-*"	class ="col-lg-*"
Максимальная ширина колонки Bootstrap для фиксированного макет (class ="container" )		62px (750px / 12)	81px (970px / 12)	97px (1170px / 12)
Максимальная ширина колонки для резинового макета (class ="container-fluid" )	Ширина веб клиента делится на 12
Внутренние отступы	15px по краям

Но будьте тут внимательнее! Например, если вы используете класс class ="col-sm-*" , то он будет применяться не только к планшетам, но и к нетбукам и большим экранам, но это дейтсвует в том случае, если вы не указали "col-md-*" и "col-lg-*" . Т.е. если у вашем ряду будет один блок для всех экранов, то достаточно написать div class ="col-xs-12" > ... div >, а не div class ="col-xs-12 col-sm-12 col-md-12 col-lg-12" > ... div >.

Пример адаптивной верстки на Twitter Bootstrap 3

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

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

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

Большая ширина экрана

Стили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше и равна 1200px. Из картинки видно, что контейнеры занимают все пространство ряда и делят его на три равные части. Выходит, 12 блоков нужно разделить на 3 контейнера (т.к. они все одинаковые), получаем, что в одном таком контейнере 4 блока.

Итог для большой ширины экрана:

Контейнер №1

Контейнер №2

Контейнер №3

Средняя ширина экрана

Стили, применяемые к макету, будут подключаться, когда активная область окна браузера (ширина) больше или равна 992px и меньше 1200px. Два контейнера расположены горизонтально и занимают ширину в 100% (каждый контейнер занимает 6 блоков), и один расположен с новой строки и также занимает 100% ширины (контейнер №12 занимает 12 блоков). Чтобы четко объяснить браузеру, что контейнер нужно разместить без обтекания к других контейнерам в twitter bootstrap предусмотрен css-класс class ="clearfix" . Но, еще один момент, т.к. этот класс должен распространяться на этот вид экранов нужно добавить еще один класс - class ="visible-md-block" (md – это название экрана, аналогично с классами для блока).

Итог для средней ширины экрана (будьте внимательны , я буду добавлять в уже написанный код новые классы и элементы):

Контейнер №1

Контейнер №2

Контейнер №3

Маленькая ширина экрана и «крошка-экран» По этому же принципу нужно добавить классы и для оставшихся экранов. Не буду расписывать одно и тоже, просто приведу общий итог:

Контейнер №1

Контейнер №2

Контейнер №3

Для «крошка-экран» можно опустить css-класс class ="col-xs-12" , т.к. он занимает 100% ширины экрана автоматически и чтобы не загромождать код лишними символами можно их удалить.

Конечный код для этого шаблона будет выглядеть:

Контейнер №1

Контейнер №2

Контейнер №3

Разные элементы на разных экранах До этого я использовал класс class ="visible-md-block" – который отображается на средний экранах. Более подробно о класс "visible" : Название класса Описание

class ="visible-xs-*"	Этот класс добавляет видимости на «крошка-экран», ширина которого меньше 768px. Если экран больше – элемент не будет виден.
class ="visible-sm-*"	Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 768px (т.е. ≥768px), но меньше 992px. Если под эти характеристики не подходит экран, то элемент не будет отображаться.
class ="visible-md-*"	Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 992px (т.е. ≥992px), но меньше 1200px. Если под эти характеристики не подходит экран, то элемент не будет отображаться.
class ="visible-lg-*"	Этот класс добавляет видимости только на гаджетах, которые имеют ширину экрана больше или равную 1200px (т.е. ≥1200px). Если под эти характеристики не подходит экран, то элемент не будет отображаться.
class ="visible-*-inline"	display :inline
class ="visible-*-block"	Часть макета приобретает css-свойство display :block
class ="visible-*-inline-block"	Часть макета приобретает css-свойство display :inline-block

Для того, чтобы скрывать элементы предназначен класс class ="hidden"

Название класса Описание

class ="hidden-xs"	Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана меньше 768px. На других экранах части макета будут видны.
class ="hidden-sm"	Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 768px (т.е. ≥768px), и меньше 992px. На других экранах части макета будут видны.
class ="hidden-md"	Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 992px (т.е. ≥992px), и меньше 1200px. На других экранах части макета будут видны.
class ="hidden-lg"	Этот класс добавляет скрытность элементу только на гаджетах, которые имеют ширину экрана больше или равную 1200px (т.е. ≥1200px). На других экранах части макета будут видны.

Так же можно одновременно применять к одному элементу несколько классов, например:

Этот элемент не будет отображаться на средних и больших пользовательских экранах

Разработчики Twitter Bootstrap 3 не забыли и про печать документов/веб-страниц и добавили несколько классов как раз предназначенных для этих целей:

Еще один пример Если у вас в одном ряде должен находиться элемент шириной в 6 блоков и по центру, то вам нужно указать смещение на 3 блока:

...

Перед загрузкой убедитесь, что у вас имеется редактор кода (мы рекомендуем Sublime Text 3) и некоторые знания в области HTML и CSS. Здесь мы не будем затрагивать исходные файлы, но скачать и изучить их Вы всегда можете сами. Мы сфокусируем наше внимание на начале работы с компилированными файлами Bootstrap.

Загрузка компилированных файлов

Самый быстрый способ начать работу: получить компилированные и минимизированные версии наших CSS, JS, и изображений. Никаких документов или исходных файлов.

2. Структура файлов

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

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

bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min . css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min . js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README . md

Это основная форма Bootstrap: компилированные файлы для быстрого и легкого использования почти в любом Web-проекте. Мы предоставляем вам компилированные CSS и JS (bootstrap.*), и также компилированные и минимизированные CSS и JS (bootstrap.min.*). Файлы изображений сжаты при помощи ImageOptim , приложения Mac для сжатия изображений в PNG.

Пожалуйста, обратите внимание, что все плагины JavaScript требуют jQuery.

3. Что включено

Bootstrap оснащен HTML, CSS и JS для всех видов работы, они все перечислены в категориях, которые вы можете найти в верхней части страницы .

Разделы документов Поддерживаемые элементы

Общие стили для тела (body) для сброса типа и фона, стилей ссылок, сетки шаблонов и двух простых элементов разметки.

Стили CSS

Стили для общих элементов HTML: оформления, кода, таблиц, форм и кнопок. Также включает в себя Glyphicons , великолепный набор иконок.

Компоненты

Основные стили для простых компонентов интерфейса: вкладок и кнопок, панелей навигации, сообщений, заголовков страниц и др.

Плагины Javascript

Как и компоненты, эти плагины Javascript являются интерактивными компонентами для всплывающих подсказок, информационных блоков, модальных компонентов и др.

Список компонентов

Все вместе компоненты и плагины Javascript содержат следующие элементы интерфейса:

Группы кнопок
Выпадающие списки кнопок
Навигационные вкладки, кнопки и списки
Панель навигации
Ярлыки
Бейджи
Заголовки страниц и элемент hero
Миниатюры
Сообщения
Индикаторы процесса
Модальные элементы
Выпадающие списки
Всплывающие подсказки
Информационные блоки
Элемент «Гармошка»
Элемент «Карусель»
Опережающий ввод с клавиатуры

4. Основной шаблон HTML

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

Вот как выглядит типичный файл HTML :

Шаблон Bootstrap 101

Привет, мир!

Чтобы сделать такой шаблон Bootstrap , просто присоедините соответствующие файлы CSS и JS:

Шаблон Bootstrap 101

Привет, мир!

И все настроено! Добавив эти два файла, вы можете с помощью Bootstrap разрабатывать сайт или приложение.

В этом уроке мы скачаем Bootstrap 3.0 с официального сайта и подключим файлы к главной странице.
Итак, приступим.

Шаг 1. Чтобы начать работать с фреймворком Bootstrap 3.0 , нам нужно его скачать. Это можно сделать на официальном сайте.

Шаг 2. Создайте папку, например, «Мой сайт на Bootstrap 3.0 » и перенесите все файлы из архива в нее. У вас должно появиться три папки «css » , «js » , «fonts »:

Шаг 3. Удаление ненужных файлов из Bootstrap 3.
Давайте просмотрим стандартную файловую структуру Bootstrap и удалим оттуда все ненужные файлы:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/

Папка CSS

В папке CSS находится 6 файлов, но нам, по сути, нужен только один J.

bootstrap.css - этот css-файл содержит все готовые стили в удобной и читаемой форме. Вот этот файл нам и нужен. Его мы и будем подключать к нашему html-файлу.

bootstrap.css.map , bootstrap-theme.css.map - я эти файлы не использую, так как не знаю, для чего они нужны. Вы можете их удалить .

bootstrap-theme.css - это css-файл для готовой темы Bootstrap. Его можете тоже смело удалить .

bootstrap.min.css и bootstrap-theme.min.css - это точно такие же файлы как bootstrap.css (пункт №1) и bootstrap-theme.css (пункт №2), только в более неудобной и тяжело читаемой форме. Весят примерно на 30% меньше, чем bootstrap.css или bootstrap-theme.css . Лично я их не подключаю. Значит, я и их удаляю .

В итоге в папке CSS оставляете только файл bootstrap.css , все остальные удаляйте.

Папка fonts

В папке fonts хранятся 4 файла с одинаковым шрифтом, но с разными расширениями. Это нужно для того, чтобы шрифт показывался во всех браузерах. Здесь ничего не трогаем, идем в следующую папку.

Папка js

В папке js хранятся 2 файла, это bootstrap.js и bootstrap.min.js .
Как вы уже поняли, это два одинаковых файла, только bootstrap.js – полная версия, а bootstrap.min.js – сжатая. Удаляем файл bootstrap.min.js .

Итак, файл bootstrap.js – это набор готовых js-сценариев.

○ Давайте подведем итог по всем папкам .
В папке CSS один файл - bootstrap.css
В папке fonts четыре файла - glyphicons-halflings-regular.eot , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.svg и glyphicons-halflings-regular.woff .
В папке js один файл - bootstrap.js .

bootstrap/
├── css/
│ └── bootstrap.css
├── js/
│ └── bootstrap.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

Шаг 4. Теперь в папке «Мой сайт на Bootstrap 3.0 » создайте файл «index.html » с .

Шаг 5. Откройте файл «index.html» текстовым и вставьте вот такой стандартный код, который предлагается на самом сайте Bootstrap:

Bootstrap 101 Template Hello, world!

В этом коде нужно сделать некоторые поправки для подключения bootstrap. Нам нужно в коде прописать правильный путь к файлам bootstrap.js и bootstrap.css .

Это будет выглядеть вот так:

Bootstrap Template на сайт Hello, world!

В строке №10 мы подключили таблицу стилей «bootstrap.css»:

В строке №25 мы подключили файл со скриптами «bootstrap.js»:

В строке №23 мы подключили библиотеку jquery:

Сохраните файл.

В результате в браузере вы увидите вот такой результат:

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

В третьем уроке немного теории о построении шаблона и сетке Bootstrap.
Bootstrap видит шаблон сайта следующим образом

В построение шаблона с помощью Bootstrap используются три уровня вложенности

Первый уровень это container — область в которой размещаются все блоки сайта.(Красная рама)
Второй уровень это row — область в которую помещаются блоки для материала
Третий уровень для разных устройств он разный. Это уже сам материал.

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

, роль row отводится тегу и последний уровень это сама ячейка с материалом ).

Сетка Bootstrap

Сетка Bootstrap по-умолчанию состоит из 12 ячеек имеющих одинаковую ширину и в зависимости от разрешения экрана ширина ячеек может меняться. У ячеек Bootstrap есть интересная способность, которой вы можете воспользоваться это адаптация ячеек под ширину экрана.

Bootstrap 101 Template Hello, world! This is Photoshop"s version This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh

Скачайте пример запустите файл index.html и потихоньку начинайте изменять размер браузера. Вы увидите три состояния которые прописаны в шаблоне.

В примере используется следующая конструкция

Hello, world! This is Photoshop"s version This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh ....

col-sm -это класс для маленьких устройств (ниже будет приведена таблица ).

col-md предназначена для устройств с шириною 970px и выше. col-md имеет следующую структуру.
col-md -[дальше идет цифра, которая обозначает количество занимаемых ячеек всего их по умолчанию 12 ] я задал 3 поэтому изначально шаблон поделен на 4 столбца. Если задать 4-м div-ам значение col-md-6, то мы получим страницу в два столбца. Соотношение ячеек должно давать в сумме — 12. Попробуйте задать значение 8:4. Тогда в результате получите первую ячейку по ширине превышающую вторую в два раза.

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

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

Очень маленьких устройств
Телефоны(