Подключение и использование Bootstrap онлайн урок. Начало работы с Bootstrap

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

Bootstrap - это CSS фреймворк, который изначально создавался для внутреннего использования компанией «Twitter » с рабочим названием «Twitter Blueprint », но в итоге был опубликован в открытый доступ и стал хорошим набором инструментов для front-end разработки под названием «Bootstrap ». Официальный сайт фреймворка находится по адресу getbootstrap.com .

Преимущества фреймворка Bootstrap:

• Высокая скорость разработки макетов страниц сайта. Bootstrap содержит огромный набор готовых решений и элементов.
• Кроссбраузерность и адаптивность сайта. Все элементы фреймворка адаптивны под все устройства и корректно отображаются во всех современных браузерах.
• Легкость в использовании. Даже человек, имеющий базовые знания о HTML и CSS, может свободно создавать web-страницы с использованием фреймворка.
• Простота в обучении. У Bootstrap очень хорошая документация с большим количеством примеров готового кода.

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

Хотя Bootstrap и называют CSS фреймворком, но это не совсем верно. На мой взгляд, правильней его называть WEB фреймворком, так как он содержит готовые CSS, HTML и JavaScript компоненты, а третья версия имеет собственный иконочный шрифт.

Шрифт содержит более 250 иконок. Количество иконок, конечно, не такое большое, как у Font Awesome, но все базовые иконки присутствуют. С четвертой версии фреймворк отказался от собственного иконочного шрифта в пользу использования сторонних библиотек, которые необходимы пользователю для конкретного проекта.

При верстке адаптивного классического макета: шапка сайта (header), основная часть (content), боковая колонка (sidebar) и подвал сайта (footer), для корректного отображения нам нужно рассчитать ширину в процентах каждого элемента и присвоить обтекание. Если с шапкой и футером все понятно, в большинстве случаев ширина будет 100%, то для основной части контента и боковой колонки может быть 70/30 или 85/25, но при уменьшении экрана нас это не устроит, нужно будет делать по 100% и сбрасывать обтекание.

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

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

Level 1: .col-sm-9 Level 2: .col-xs-8 .col-sm-6 Level 2: .col-xs-4 .col-sm-6

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

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

В следующей статье «Как работать с Bootstrap » разберем все аспекты подробнее. На этом статью буду заканчивать, надеюсь все понятно, и этот пост ответил на вопрос - что такое Bootstrap.

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

Для изучения платформы Twitter Bootstrap необходимо иметь:

Скомпилированная и минимизированная версия платформы Twitter Bootstrap 3 - это основная форма поставки этой платформы, которую выбирают большинство веб-разработчиков. Данная форма поставки отличается простотой её подключения к вашему сайту, так как она содержит предварительно подготовленные и минимизированные файлы CSS и JavaScript, а также иконки в формате шрифта.

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

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

Но перед тем как перейти к подключению платформы Twitter Bootstrap к веб-странице необходимо рассмотреть её структуру на файловом уровне.

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

Если эту папку рассмотреть, то мы увидим, что платформа Twitter Bootstrap состоит из 3 каталогов ("CSS", "FONTS" и "JS") и файлов.

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

Файлы платформы представлены в 2 видах:

• 1 вид - это предварительно скомпилированные файлы CSS и JavaScript (bootstrap.css , bootstrap-theme.css , bootstrap.js)
• 2 вид - это предварительно скомпилированные и минимизированные (сжатые) файлы CSS и JavaScript (bootstrap.min.css , bootstrap-theme.min.css , bootstrap.min.js)

2 вид файлов более предпочтительно использовать для сайта, так как они содержат точно такой же код, как и файлы 1 вида, но в сжатом состоянии. Следовательно, сайты, которые используют 2 вид файлов платформы Twitter Bootstrap 3, загружаются быстрее.

Кроме этих файлов, в данную поставку входят ещё 4 файла шрифта "Glyphicons" (glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff), которые отличаются друг от друга только форматом, в котором хранится данный шрифт. Шрифт "Glyphicons" состоит из 200 иконок из набора "Glyphicon Halflings".

Внимание: для работы скриптов платформы Twitter Bootstrap 3 (bootstrap.js и bootstrap.min.js) необходимо иметь подключенную последнюю версию библиотеки jQuery.

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

Шаг 1. Создание HTML страницы

Откройте ваш любимый редактор кода и создайте файл с именем index и расширением html . Наберите или вставьте в текстовый редактор, следующий код:

DOCTYPE html > Basic Bootstrap Template Нажмите на кнопку

Шаг 2. Подключение платформы Bootstrap 3 к веб-странице

Чтобы подключить платформу Twitter Bootstrap 3 к веб-странице необходимо выполнить следующее:

Примечание: файлы JavaScript лучше всего подключать перед закрывающим тегом body (т.е. перед ), так как это повысит скорость загрузки основного контента веб-страницы.

Шаг 3. Сохранение веб-страницы и проверка работы компонента Bootstrap

После создания веб-страницы, к которой подключена платформа Twitter Bootstrap 3, её необходимо сохранить в файл с расширением html (Например: "index.html"). После этого созданную веб-страницу необходимо открыть в веб-браузере и проверить работу компонента Bootstrap "Popovers".

Примечание: При сохранении файла веб-страницы в текстовом редакторе обратите внимание на его расширение, которое должно быть "html". Так как некоторые текстовые редакторы, такие например как блокнот, автоматически сохраняют файлы с расширением "txt".

Файловая структура проекта, в основу которого положена платформа Twitter Bootstrap 3:

Демонстрация работы компонента Bootstrap "Popovers":

Нажмите на кнопку

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

Недостатком использования фреймворков является тот факт, что странице придется целиком «нести» за собой лишние стили фреймворка, даже если она использует лишь их малую часть. Фреймворк является отличным инструментом для прототипирования и создания страниц, для которых дизайн вторичен, например страницы администрирования. Если же у вас есть очень специфический дизайн, то сверстать его с помощью фреймворка может оказаться сложнее, чем нативными средствами. Тем не менее, и это возможно.

После этого, для того чтобы изменить стили Bootstrap вам нужно перебить их в своем styles.css примерно в таком виде:

A { color: #beceda; }
Очевидным минусом данного подхода является то, что вам придется вручную искать нужные стили, которые требуется перебить и не всегда это будет тривиально, т.к. некоторые параметры Bootstrap применяются ко многим селекторам в изменённом виде, например через формулы. Небольшую помощь здесь может оказать инструмент Customize , он поможет скомпилировать правильно ваши изменения, но только один раз. Если в будущем вы захотите изменить какой-то параметр, то придется заново вбивать изменненные значения для всех полей, чтобы скомпилировать свои стили.

Существует большое количество способов скомпилировать LESS файлы и Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует для компиляции Grunt , вы можете предпочесть плагин для продуктов JetBrains, а мы, поскольку статья ориентирована на новичков, посмотрим в сторону более простых решений. Такими решениями являются программы WinLess для Windows, SimpLESS для Mac или Koala для Linux. Все эти программы делают примерно одно и то же: получают на вход папку с LESS файлами и слушают изменения в них. Как только вы вносите изменения в любой файл – тут же он компилируется в указанный CSS файл. Таким образом вам нет необходимости запускать компиляцию руками после каждого изменения. Вы изменяете LESS файл, сохраняете его и тут же видите изменения на сайте в уже скомпилированном, сжатом виде.

• Как будут нарезаться изображения?
• Какие будут использоваться компоненты?
• Какими будут основные стили?
• Какой макет страницы у нас получится?

Сохраняем изображение карты:

Сохраним логотипы следующим образом:

Images/logo.png
images/footer-logo.png

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

/images/bg.png
/images/h1-bg.png

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

/images/social.png
/images/social-small.png

Если окинуть взглядом наш шаблон, то можно увидеть, что нам понадобятся следующие компоненты:

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

@brand-font: "Oswald",sans-serif;
Если вы хотите использовать шаблон для русских сайтов, то шрифт Oswald можно попробовать заменить на наиболее близкий Cuprum, который поддерживает кириллицу.

А теперь заменим настройки Bootstrap на свои:

После того, как мы закончили с переменными, давайте начнем прописывать стили нашего дизайна в файле styles.less. Сначала подключим сам Bootstrap и наши переменные:

@import "bootstrap/bootstrap.less"; @import "variables.less";
Не все стили, заданные Bootstrap по умолчанию можно изменить переменными, давайте сделаем это вручную:

P { margin: 20px 0; } .form-control { box-shadow: none; } .btn { font-family: @brand-font; }
Здесь мы убрали тень у элементов формы, а текстам в кнопках указали специфический шрифт страницы.

Затем опишем фон страницы и верхнюю полоску:

Body { border-top: 5px solid #7e7e7e; background-image: url(../images/bg.png); }
Далее в тексте не будет указываться в какой файл пишутся стили. Просто запомните, что все переменные мы сохраняем в файл variables.less, а CSS стили будем хранить в styles.less.

Whitesquare
В этом блоке создается HTML5 структура документа. В title указываем название нашей страницы – Whitesquare. Метатегом viewport указываем, что ширина страницы на мобильных устройствах будет равна ширине экрана и начальный масштаб будет 100%. Затем подключается файл стилей. И для версий Internet Explorer меньше девятой подключаем скрипты, позволяющие правильно отображать нашу верстку.

Давайте добавим в body следующий код:

Здесь нам встречается первый компонент Bootstrap – колонки . Родительскому элементу колонок задается класс «row», а классы колонок начинаются с префикса «col-», затем идет размер экрана (xs, sm, md, lg), а заканчиваются относительной шириной колонки.

Колонке можно задавать одновременно различные классы со значениями для экранов, например class=«col-xs-12 col-md-8». Эти классы просто задают ширину колонке в процентах для определенного размера экрана. Если колонке не задан класс определенного экрана, то применится класс для минимально определенного экрана, а если и он не указан – то никакая ширина не применится и блок займет максимально возможную ширину.

У нас классы «col-md-7» и «col-md-17» указывают, что блоки представляют из себя колонки шириной 7 и 17 относительно родительского контейнера. По умолчанию сумма ширин колонок в Bootstrap равняется 12, однако мы увеличили это число вдвое для достижения нужной нам гибкости.

Body { … .wrapper { padding: 0 0 50px 0; } header { padding: 20px 0; } }
Данную конструкцию мы поместили внутрь body. Синтаксис LESS позволяет вкладывать правила друг в друга, которые потом скомпилируются в такие конструкции:

Body .wrapper {…} body header {…}
Такой подход позволяет видеть структуру HTML прямо внутри CSS и дает некую «область видимости» правилам.

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Для того чтобы создать поиск, нам понадобятся следующие компоненты Bootstrap: инлайновая форма , сгруппированные контролы и кнопка .
В теге header создаем инлайновую форму, выровненную по правому краю. Поля такой формы обязательно должны иметь класс «form-control» и label.

В форму мы помещаем компонент «сгруппированные контролы». Группировка контролов позволяет убрать отступ между вводом текста и кнопкой и как бы слить их в единый элемент.
Он представляет из себя div с классом «input-group» и полями, а кнопка такого компонента помещается в блок с классом «input-group-btn».

Поскольку нам не нужно показывать label для поля поиска - скроем его классом «sr-only». Это нужно для специальных устройств чтения с экрана.

Кнопке добавляется класс «btn-primary», означающий, что это первичная кнопка данной формы.

… Search GO
Всё, что нам осталось - это задать в стилях ширину форме поиска.

Body { … .wrapper { … header { … .form-search { width: 200px; } } } }

Для отображения меню возьмем компонент «навигационная панель » и поместим в него компонент «навигация », которая представляет из себя список со ссылками. Для навигации добавляется класс «navbar-nav», который применяет специальные стили навигации внутри навигационной панели.

• Home
• About us
• Services
• Partners
• Customers
• Projects
• Careers
• Contact

/*высота навигационного меню*/ @navbar-height: 37px; /*задаем побольше горизонтальный отступ*/ @nav-link-padding: 10px 30px; /*фон для пунктов меню*/ @navbar-default-bg: @panel-bg; /*цвет текста в пунктах меню*/ @navbar-default-link-color: #b2b2b2; /*и при наведении мышки – такой же*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*фон активного пункта меню – наш специфический голубой цвет*/ @navbar-default-link-active-bg: @brand-primary; /*цвет текста активного пункта меню*/ @navbar-default-link-active-color: #fff;
Помимо настраиваемых параметров, опишем дополнительные в стилях – это текст в верхнем регистре и наш специфический шрифт:

Body { … .wrapper { … .navbar a { text-transform: uppercase; font: 14px @brand-font; } } }

Заголовок страницы помещается в div с классом «heading».

About us
И имеет следующие стили:

Body { … .wrapper { … .heading { height: 40px; background: transparent url(../images/h1-bg.png); margin: 30px 0; padding-left: 20px; h1 { display: inline-block; color: #7e7e7e; font: normal 40px/40px "Oswald", sans-serif; background: url(../images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; } } } }
Здесь мы рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

При создании подменю, мы не будем использовать компонент «навигация», так как по стилям он нам не очень подходит, гораздо больше нам подойдет компонент «группированный список ». Каждый элемент такого компонента имеет класс «list-group-item».

Подменю нужно разместить в теге aside. Список ссылок создаем аналогично главному меню.

• Lorem ipsum
• Donec tincidunt laoreet
• Vestibulum elit
• Etiam pharetra
• Phasellus placerat
• Cras et nisi vitae odio

@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
И применяем к подменю следующие стили:

Body { … .wrapper { … .submenu { margin-bottom: 30px; li { display: list-item; font: 300 14px @brand-font; list-style-position: inside; list-style-type: square; padding: 10px; text-transform: uppercase; &.active { color: @brand-primary; } a { color: @text-color; text-decoration: none; &:hover { color: @text-color; } } } } } }
Сначала возвращаем элементам списка стандартные стили, так как Bootstrap их перебил на свои. Добавляем отступ снизу. Для подменю применяется более тонкий шрифт и квадратные маркеры. А для ссылок задаем цвета, верхний регистр и убираем подчеркивание. Амперсанд в коде «&.active» по синтаксису LESS во время компиляции заменится на родительский селектор: «.submenu li.active».

Для его отображения нам подойдет компонент «панель », а точнее его вариация «основная панель» (panel-primary) для раскраски заголовка. Этот компонент содержит блок заголовка (panel-heading) и блок содержания панели (panel-body). Изображению карты добавляем класс «img-responsive», который позволит картинке уменьшаться при маленькой ширине экрана.

… Our offices
В переменных Bootstrap мы уже задали цвет для фона панели (panel-bg), а теперь укажем, что «primary» панель будет иметь серую рамку дефолтной панели, а не голубую, как задано по умолчанию:

@panel-primary-border: @panel-inner-border;
Теперь в стилях сайта нужно изменить стандартные настройки панелей, которые не изменяются через переменные:

Panel { box-shadow: none; .panel-heading { font: 14px @brand-font; text-transform: uppercase; padding: 10px; } .panel-body { padding: 10px; } }
Здесь мы убрали тень у панелей, поставили свои отступы и задали свой шрифт заголовка.

Этот элемент страницы больше всего похож на компонент Jumbotron . Добавим его в колонку контента:

“Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

@jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
И опишем наши стили:

Body { … .wrapper { … .jumbotron { border-radius: 0; padding: 0; margin: 0; blockquote { border-left: none; p { font: 300 italic 33px @brand-font; text-transform: uppercase; margin-bottom: 0; } small { text-align: right; color: #1D8EA6; font: 300 20px @brand-font; &:before { content: ""; } } } } } }
В них мы убираем скругление углов, отступы компонента и декорации цитаты, заданные Bootstrap по умолчанию. Также добавим стили наших шрифтов.

Lorem ipsum dolor sit amet…

Donec vel nisl nibh…

Donec vel nisl nibh…

Класс «thumbnail» превращает изображения в компонент «миниатюра ». Он сделает за нас всю работу по стилизации изображений. Единственное, что нам осталось - это установить свой отступ и цвет рамки в переменных для этого компонента:

@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

При верстке этого блока добавим сначала заголовок:

Our team
со стилем:

Body { … .wrapper { … h2 { background: none repeat scroll 0 0 #29C5E6; color: #fff; font: 300 30px @brand-font; padding: 0 10px; text-transform: uppercase; } } }
А затем добавим блок с классом «team», который состоит из двух строк, содержащих карточки сотрудников. Каждая карточка – это колонка. Карточка имеет ширину равную четырем колонкам нашей сетки. Все карточки кроме первой в строке имеют отступ слева, который создается классом «col-md-offset-1». Содержимое карточки состоит из изображения и описания (.caption)

John Doe Saundra Pittsley

team leader

art director

senior ui designer

Body { … .wrapper { … .team { .row { margin-top: 20px; .col { white-space: nowrap; .thumbnail { margin-bottom: 5px; } } .col-md-offset-1 { margin-left: 3.7%; } .caption { h3 { font: 300 16px @brand-font; margin: 0; } p { font: 300 14px @brand-font; color: @brand-primary; margin: 0; } } } } } }
Помимо отступов и стилей шрифтов, которые тут задаются, мы изменили класс «col-md-offset-1». Ему пришлось задать отступ 3.7%, т.к. стандартный отступ был слишком большой.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Footer { background: #7e7e7e; color: #dbdbdb; font-size: 11px; .container { height: 110px; padding: 10px 0; } }
Тег footer задает серую область по всей ширине экрана, а контейнер внутри него отображает область по центру на больших экранах и задает высоту и отступ футера. Для выравнивания блоков внутри футера мы используем колонки.

Twitter feed 23 oct

In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug

Body { … footer { … .container { … h3 { border-bottom: 1px solid #919191; color: #ffffff; font-size: 14px; line-height: 21px; font-family: @brand-font; margin: 0 0 10px; text-transform: uppercase; } p { margin: 5px 0; } .twitter { p { padding-right: 15px; } time a { color: #b4aeae; text-decoration: underline; } } } } }
Для всех заголовков футера задаем шрифты и отступы, а также делаем подчеркивание через нижнюю рамку. Для параграфов указываем отступ. Ссылке, отображающую дату, задаем цвет и подчеркивание.

Sitemap Home About Services Partners Support Contact
Ссылкам задаем цвет, шрифт и отступ между ними.

Body { … footer { … .container { … a { color: #dbdbdb; } .sitemap a { display: block; font-size: 12px; margin-bottom: 5px; } } } }

Вставляем набор ссылок в блок с классом «social».

Social networks
И стилизуем их:

Body { … footer { … .container { … .social { .social-icon { width: 30px; height: 30px; background: url(../images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(../images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter { background-position: 0 0; } .facebook { background-position: -30px 0; } .google-plus { background-position: -60px 0; } .vimeo { background-position: 0 0; } .youtube { background-position: -16px 0; } .flickr { background-position: -32px 0; } .instagram { background-position: -48px 0; } .rss { background-position: -64px 0; } } } } }
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классам отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью CSS сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Copyright 2012 Whitesquare. A pcklab creation

Body { … .footer { … .container { … .footer-logo { float: right; margin-top: 20px; font-size: 10px; text-align: right; a { text-decoration: underline; } } } } }

На этом вёрстка закончена. Готовый проект можно скачать

» мы познакомились с фреймворком, разобрали его преимущества, вкратце рассмотрели его так называемую сетку, теперь пришло время на практике разобрать, как пользоваться Bootstrap.

Скачать Bootstrap можно с официального сайта getbootstrap.com . На главной странице жмем на кнопку «Download Bootstrap ».

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

После скачивания и распаковки архива мы получаем три папки:

• CSS - папка со стилями
• JS - папка с js скриптами
• FONTS - папка с иконочными шрифтами

Это и есть весь фреймворк. Для дальнейшей работы с Bootstrap я создам папку с одноименным названием bootstrap , в папке создам один пустой файл index.html и буду наполнять папку и файл попутно с разбором фреймворка в данной статье, а в конце поста дам ссылку, чтобы Вы могли посмотреть результат. Если будите повторять за мной, то поймете, что работать с фреймворком действительно легко.

Из скаченного фреймворка нам потребуется папка fonts полностью, один файл стилей из папки css с названием bootstrap.css или bootstrap.min.css и аналогично один скрипт из папки js с названием bootstrap.js или bootstrap.min.js .

Отличие файлов с «.min.» от обычных в том, что файлы с «.min.» оптимизированные, то есть код написан в одну строку без переносов строк и пробелов, поэтому они весят меньше обычных, а содержимое файлов абсолютно одинаковое.

Теперь я создам в своей папке bootstrap папку css , помещу в нее файл bootstrap.min.css и создам папку js , в которую положу bootstrap.min.js . Дополнительно в папке css создам пока пустой файл style.css для добавления собственных стилей.

Нужные файлы фреймворка перенесены, и теперь будем работать только с файлом index.html . Чтобы не писать код самостоятельно, обратимся к документации, на странице скачивания официального сайта ниже есть уже готовый HTML-скелет документа, копируем его и вставляем в наш индексный файл.

В скелете уже подключаются наш файл стилей, js скрипт и библиотека jQuery , но если вы делаете не на «бутстраповском » шаблоне, а на каком-то своем, то нужно между тегами подключить файл стилей bootstrap.min.css , а после него созданный style.css .

Затем перед закрывающим тегом сначала подключаем библиотеку jQuery .

А после библиотеки подключаем js скрипт.

В общем, HTML-скелет документа получается вот такой.

Bootstrap

Подготовительный процесс закончен, Bootstrap подключен, можно идти дальше и заняться наполнением нашей WEB-страницы компонентами фреймворка.

Документация у фреймворка очень хорошая, что делает его простым в использовании. В главном меню официального сайта несколько разделов: «Getting started », «CSS », «Components », «JavaScript » и «Custimize », на странице каждого раздела в правой колонке находятся названия разных компонентов, кликнув по которым показывается их описание и варианты использования в виде готового кода.

Если сложности с английским языком, то в сети есть несколько ресурсов с переведенной документацией, вот адрес одного из таких сайтов www.oneskyapp.com/ru/docs/bootstrap . Также можно воспользоваться каким-нибудь переводчиком для браузера, перевод будет, конечно, кривоватый, но суть написанного будет ясна. В общем, просто нужно читать документацию, брать примеры кода и практиковаться.

Как я говорил в прошлой статье, сетка работает по принципу таблицы, включая в себя ряды .row и колонки .col , колонок может быть максимум двенадцать. К классу.col добавляются префиксы (lg , md , sm , xs), которые указывают ширину данного столбца на конкретном разрешении экрана.

Оборачиваются ряды со столбцами в блок с классом .container или классом.container-fluid . Различие между ними в том, что у класса.container максимальная ширина 1170 пикселей, а у класса.container-fluid — ширина не ограничена, то есть на всю ширину экрана, даже если разрешение экрана очень большое. Полную информацию о сетке Bootstrap смотрите в документации раздела «CSS ».

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

HEADER CONTENT SIDEBAR FOOTER

Для разделения блоков я прописал два дополнительных класса: .block , .block2 и добавил в них по паре правил в созданном файле style.css .

Block{ background: #eee; border: 1px solid #000; } .block2{ background: #ccc; border: 1px solid #000; }

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

HEADER

Теперь не мешало добавить какое-то меню. Для этого в разделе «Components » переходим в «Navbar », выбираем понравившееся меню, копируем код и после открывающего тега , вставляем.

Осталось заполнить «conten t» и «sidebar ». Все делаем по той же схеме: выбираем компонент в документации, читаем описание, копируем и вставляем в нужное место. Я добавлю форму и кнопку, кликнув по которой будет вызываться модальное окно с таблицей.

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

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

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

Текущая версия v3.3.2.

$ bower install bootstrap

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

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

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

Это основная форма Bootstrap : скомпилированные файлы готовы для быстрого использования в любом веб-проекте. Предоставлены сборки CSS и JS (bootstrap.*) и минимизированный вариант (bootstrap.min.*). В качестве дополнительной опции для Bootstrap включены шрифты Glyphicons.

Исходный код Bootstrap включает прекомпелированные CSS, JavaScript и шрифты, вместе с исходным Less, JavaScript и документацией. Для наглядности посмотрите приведенный пример ниже.

Bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/

less/ , js/ , шрифты/ с иконками. Папка dist/ включает в себя все перечисленные скомпилированные файлы, указанные в разделе выше. Папка docs/ содержит документацию и примеры/ использования Bootstrap. Кроме того, находится информация о лицензиях и развитии предыдущих версий.

Оставайтесь в курсе развития Bootstrap. Обратитесь к сообществу за полезной информацией.

Вам понадобится Respond.js для IE8 (поскольку существуют медиа-запросы и они должны обрабатываться). Это заблокирует свойство "мобильность сайта" Bootstrap.

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

Посмотрите документацию о переходе со старой версии Bootstrap на v3.x? Ознакомьтесь с руководством по переходу .

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

В частности, мы поддерживаем последние версии из следующих браузеров и платформ. На платформе Windows, мы поддерживаем Internet Explorer 8-11 . Более конкретная информация поддержки предоставлена ниже.

Bootstrap должен достаточно хорошо выглядеть и вести себя в Chromium и Chrome для Linux, Firefox для Linux, и Internet Explorer 7, хотя они официально не поддерживаются.

Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js , чтобы разрешить поддержку медиа запросов.

Чтобы привлечь внимание, мы включили это в качестве примеров в документации Bootstrap.

В версиях Safari v6.1 для OS X и Safari для iOS v7.0.1, при использовании класса разметки.col-*-1 , движок Safari имеет некоторые проблемы с количеством десятичных знаков. То есть если вы имеете 12 отдельных колонок разметки, вы заметите, что они будут более короткими по сравнению с другими рядами колонок. Здесь можно немного изменить (), но у вас есть несколько вариантов:

• Добавить.pull-right в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
• Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)

Мы будем следить за этой проблемой, и если будет более простое решение, то обновим наш код.

Поддержка overflow: hidden для элемента достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в .

Обратите внимание - если вы используете форму ввода в модальном окне или навигации, iOS имеет ошибку отображения, через которую не обновляется позиция фиксированных элементов при вызова виртуальной клавиатуры. Существуют некоторые обходные пути для этого, в том числе - трансформирующие элементы position: absolute , или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную. Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

Элемент.dropdown-backdrop не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).

При изменении размера страницы, неизбежно оказывается некорректное отображение некоторых элементов: это касается и Bootstrap, и остальных веб-документа. В зависимости от конкретного случая, мы можем исправить это (при необходимости вы можете открыть соответствующий запрос, но сначала необходимо поискать или нет аналогичных запросов). Тем не менее, но как правило мы игнорируем их, поскольку они часто не имеют прямого решения, кроме создания обходных путей в виде хаков (hacky).

Даже в некоторых современных браузерах, печать может быть изворотливой. В частности, по состоянию на Chrome v32 и независимо от настройки полей, Chrome значительно использует ширину окна просмотра уже, чем физический размер бумаги при разрешении запросов СМИ во время печати веб-страницы. Это может привести к неожиданно активирующейся при печати экстра-малых разметки Bootstrap. Предлагаемые методы обхода:

• Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
• Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
• Добавте пользовательские запросы, чтобы изменить размер разметки точек останова только для печатных СМИ.

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

On elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

var nua = navigator . userAgent var isAndroid = (nua . indexOf ("Mozilla/5.0" ) > - 1 && nua . indexOf ("Android " ) > - 1 && nua . indexOf ("AppleWebKit" ) > - 1 && nua . indexOf ("Chrome" ) === - 1 ) if (isAndroid ) { $ ("select.form-control" ). removeClass ("form-control" ). css ("width" , "100%" ) }

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

В зависимости от контекста, вы можете переопределить box-sizing только там, где это необходимо (Вариант 1), либо сбросить его для целых областей (Вариант 2).

/* Box-sizing resets * * Reset individual elements or override regions to avoid conflicts due to * global box model settings of Bootstrap. Two options, individual overrides and * region resets, are available as plain CSS and uncompiled Less formats. */ /* Option 1A: Override a single element"s box model via CSS */ .element { -webkit-box-sizing : content - box ; -moz-box-sizing : content - box ; box-sizing : content - box ; } /* Option 1B: Override a single element"s box model by using a Bootstrap Less mixin */ .element { .box-sizing (content-box ); } /* Option 2A: Reset an entire region via CSS */ .reset-box-sizing , .reset-box-sizing *, .reset-box-sizing * :before , .reset-box-sizing * :after { -webkit-box-sizing : content - box ; -moz-box-sizing : content - box ; box-sizing : content - box ; } /* Option 2B: Reset an entire region with a custom Less mixin */ .reset-box-sizing { & , *, * :before , * :after { .box-sizing (content-box ); } } .element { .reset-box-sizing (); }

Bootstrap следует общим веб-стандартам, и—при минимальных дополнительных усилиях—может быть использован для создания сайтов, доступных через AT .

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

Skip to main content The main page content.

При вложении заголовков ( - ), ваш основное заглавие документа должен быть . Следующие заголовки должны логически вибудовуватись используя - , чтобы программа, которая считывает заголовки, могла сконструировать содержание страницы.

• Включать исходный код Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
• Предоставлять изменения, которые вы внесли в Bootstrap для демонстрации в проекте Bootstrap (хотя обратная связь приветствуется)

Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.

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

После того как вы скачали и подключили стили и скрипты Bootstrap, вы можете настроить их компоненты. Чтобы это сделать, просто создайте новую таблицу стилей (LESS, если желаете, или просто CSS).

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

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

Мы определяем легкая настройка как поверхностные изменения, например, изменение цвета и шрифта для существующих компонентов Bootstrap. Примером легкой настройки является