Описание bootstrap. Как работать с документацией

Преимущество использования 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; } } } } }

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

Подключение . Для подключения фреймворка необходимо либо скачать пакет файлов и подключить их в теге , либо подключить их удаленно - там же. Например,

Для отображения контента страницы в фреймворке разработана т.н. система сетки (grid system ), которая позволяет создавать (по умолчанию) до 12 колонок (и соответствующих строк) на странице, причем эта конструкция может зависеть от устройства, на котором просматривается страница.

Например, для устройств среднего размера (medium devices ), возможно определить столбцы следующим образом:

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

.col-md-4
.col-md-4
.col-md-4

Означает, что будет 3 столбца одинаковой ширины. Или же

.col-md-12

Означает 1 столбец растянутый по всей ширине экрана.

Очевидно, что на мобильном устройстве не вместится макет, предназначенный для ПК. Описанные выше макеты на мобильном устройстве будут отображены не в виде столбцов, а один под другим - поскольку им не хватит места по горизонтали. В фреймворке были разработаны специальные классы для работы с мобильными устройствами. Эти классы можно указывать для альтернативного макета в случае мобильного устройства (xs - mobile devices, sm - small devices ). Например,

1
2

Означает, что в макете две ячейки, но пропорция их ширины будет разной при отображении на ПК или на мобильном устройстве: 8 и 4 на ПК в одну строку, или 2 и 10 на мобильном устройстве. В сумме обе пары значений дают 12, потому будут размещены в одной строке.

Создание меню. Для создания меню используют класс nav (в блок этого класса помещают кнопки или ссылки) и класс navbar в который помещают готовую навигацию. Например,

• Home


• Profile


• Messages

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

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

Преимущество использования 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; } } } } }

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

19.05.2016

Всем привет!
Вот и пришло время продолжить изучать основы «bootstrap 3» .
Не пропустите новые уроки бесплатного курса по основам создания веб страницы на «bootstrap 3».
Пришло время рассказать, где скачать «bootstrap 3» и как им вообще пользоваться.
Думаю, для удобства стоит все разбить пошагово.
Список шагов:

Шаг 1. Скачиваем «bootstrap 3»

Фреймворк «bootstrap 3» можно бесплатно скачать с моего блога:

Либо скачать с официального сайта:

Если вы выбрали скачивание с официального сайта, то когда вы там окажетесь, жмите на ссылку «Download Bootstrap » и укажите место на компьютере, куда нужно закачать архив с «bootstrap 3»:

Шаг 2. Подготовка (распаковка, удаление лишнего)

Теперь создайте на вашем ПК папку, где будете проводить различные опыты с файлами «bootstrap 3», это будет ваш личный полигон для испытаний и прохождения изучения основ «bootstrap 3».
Я назову папку «Полигон для bootstrap 3». Рекомендую назвать также. Чтобы у нас не было расхождений в названиях, и вы со мной шли шаг в шаг.
Итак, в папку «Полигон для bootstrap 3» распакуйте архив с файлами «bootstrap 3».
В результате в папке «Полигон для bootstrap 3» должны быть только три папки «CSS », «js » и «fonts »:

Рассмотрим теперь каждую папку от «bootstrap 3» и выясним, какие файлы там присутствуют, для чего они нужны.

Стандартная файловая структура «Bootstrap»:

│ ├── bootstrap.css

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ └── bootstrap-theme.min.css

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

Внимание: если вы качали «Bootstrap 3» с официального сайта, возможно, что файлов уже будет больше.

«Папка CSS»

bootstrap.css - в этом css-файле находятся все готовые стили. Этот файл мы и будем подключать к веб-странице. Все остальные файлы я удаляю:

bootstrap.min.css - точно такой же файл, что «bootstrap.css», только сжатая версия. Удалите файл «bootstrap.min.css » .

bootstrap-theme.css - это css-файл для готовой темы Bootstrap. Удалите файл «bootstrap-theme.css» .

bootstrap-theme.min.css - точно такой же файл, что «bootstrap-theme.css », только сжатая версия. Удалите файл «bootstrap-theme.min.css » .

«Папка fonts»

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

«Папка js»

В папке js находится 2 файла: «bootstrap.js » и «bootstrap.min.js ». Это два одинаковых файла с набором готовых js-сценариев. Разница лишь в том, что «bootstrap.js» – это полная версия, «bootstrap.min.js» – это сжатая версия. Удалите файл «bootstrap.min.js» .

После проделанной операции по удалению ненужных файлов у вас будет уже вот такая файловая структура «Bootstrap»:

│ └── bootstrap.css

│ └── bootstrap.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

└── glyphicons-halflings-regular.woff

То есть, в папках:

CSS – находится файл «bootstrap.css »
js - находится файл «bootstrap.js »
fonts - находятся файлы «glyphicons-halflings-regular.eot », «glyphicons-halflings-regular.svg », «glyphicons-halflings-regular.ttf », «glyphicons-halflings-regular.woff ».

Шаг 3. Создание файла «index.html» и подключение файлов

В корне папки «Полигон для bootstrap 3» создайте файл «index.html» с таким кодом и с :

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

В строке №10 – я подключаю файл «bootstrap.css»:

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

Вот такая вот общая картина должна быть у вас в папке «Полигон для bootstrap 3»:

Вот и вся подготовка и подключения «bootstrap 3» к файлу «index.html ». Если вы откроете файл «index.html » через любой браузер (например, OPERA, EI, Mozilla Firefox, Google Chrome, Yandex браузер и т.д.), то вы увидите на экране вот такую страничку:

Вроде как ничего особенного, можно и не использовать «bootstrap 3», но ведь это только подключение и всего лишь второй урок. Вы еще увидите, какие есть преимущества у Фреймворка «bootstrap 3» .
Убедитесь, насколько быстро и качественно можно создавать адаптивные сайты.
Итак, подписывайтесь на обновления моего блога! Вы же не хотите пропустить новых уроков по «bootstrap 3»?

Предыдущая запись
Следующая запись

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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