Верстка с помощью bootstrap. Верстка с помощью фреймворка: преимущества. Добавляем собственные стили в Twitter 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; } } } } }

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

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

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

Этот процесс может затянуться чертовски надолго и серьезно тормозит девелопера, для которого очень важно, чтобы его/ее идея реализовалась как можно скорее. В этих случаях, им на помощь, как супергерой из комиксов, приходит Twitter Bootstrap!

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

Короче говоря, Twitter Bootstrap уже имеет готовые списки стилей CSS, встроенную поддержку JQuery, а также располагает несколькими популярными инструментами JavaScript.

Ого! Разве не здорово? Вы получаете целую кучу полезных инструментов уже готовых к применению. Все, что вам нужно сделать, это просто вставить правильный HTML-код в нужное место.

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

Для начала вам придется скачать файл bootstrap.zip с официальной страницы Twitter Bootstrap на github . В нем содержится набор файлов с расширениями css, js и img, которые понадобятся нам, чтобы начать создавать сайт на Twitter Bootstrap. Папка «css» содержит таблицы стилей (для адаптивного и неадаптивного дизайна), а также их упрощенные версии.

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

Эти файлы JavaScript содержат различные JavaScript компоненты, которые мы будем использовать в разработке дизайна нашего сайта. Последняя папка, «img» содержит два набора иконок.

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

Так, давайте приступим к работе. Прежде чем мы начнем, откройте текстовый редактор и создайте первый файл «index.html ». Сохраните его в домашней папке вашего проекта.

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

Мы устанавливаем кодировку UTF-8, потому что в нашем проекте мы будем использовать специальные символы, и нам нужно, чтобы браузер корректно их распознавал. Twitter Bootstrap тоже рекомендует использовать UTF-8 для лучшей совместимости.

После этого устанавливаем обычные теги HTML: , и . Это основные HTML-теги. Ваша страница index.html должна выглядеть так, как показано на рисунке ниже.

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

Когда стили подключены, мы подключаем необходимые файлы JavaScript. Во-первых, вы должны включить файл JQuery, для этого я предлагаю подключать их из JQuery CDN, как показано ниже.

Затем включаем файл Bootstrap.

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

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

Во-первых, мы должны понимать, что Twitter Bootstrap во многом зависит от 12 сеток. Что это за сетки?

Предположим, вы хотите создать два равных раздела внутри тела вашей страницы index.html . Вы должны задать класс «span6 » каждому блоку этих элементов. Это будет означать, что Bootstrap должен создать два равных раздела, по шесть сеток в каждом.

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

Давайте разобьем демонстрационную страницу на пять основных частей:

• Заголовок;
• Маркетинговая область;
• Левый сайд-бар;
• Область контента;
• Подвал.

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

Для этого в Bootstrap существует специальный класс, который так и называется «container «. Его мы будем использовать в качестве материнской оболочки. Итак, переходим к написанию кодов:

Теперь внутри контейнера DIV, мы пропишем заголовок сайта. Для этого мы используем тег заголовка h1.

Bootstrap Site

Проверьте вашу страницу index.html в браузере, красиво ли расположены на ней элементы. Теперь пришло время заняться панелью навигации. Twitter Bootstrap определяет разметку для панели навигации следующим образом:

• Home
• Projects
• Services
• Downloads
• About
• Contact

«navbar » должен быть классом, заданным в основном блоке DIV панели навигации. Вы должны придерживаться приведенной выше разметки меню навигации, чтобы она соответствовала стилям Twitter Bootstrap.

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

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

В Twitter Bootstrap есть красивый предварительно назначенный класс специально для области маркетинга. Он называется «hero-unit «. Скопируйте приведенный ниже код и вставьте его ниже блока меню навигации.

Marketing stuff!

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Проверьте вашу страницу в браузере, она должна выглядеть так:

Ну, разве не замечательно? Не написав не единого фрагмента CSS, вы получили такой красивый блок области маркетинга. Хорошо, давайте рассмотрим этот код.

В “hero-unit ” имеется CSS, который предназначен для тега h1. Так что, то, что вы пишите внутри тегов h1, будет выводиться жирным шрифтом и немного отделяться от других элементов блока. Затем через тег нам нужно создать параграф, в котором будет выводиться наша реклама или описание нашего продукта.

А вот и самое интересное : ссылки и кнопки. Вы можете сделать любую ссылку в виде кнопки, добавив класс “btn ”, а затем подогнав ее размер, добавив еще несколько дополнительных классов, таких как btn-large/btn-small/btn-mini .

Для изменения цвета кнопок добавьте классы btn-success (зеленый), btn-info (голубой), btn-warning (желтый) и btn-danger (красный). Более подробную информацию о кнопках и стилизации ссылок вы можете найти в разделе База CSS. Эти классы могут быть применены к элементам кнопок HTML.

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

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

Вы должны помнить об этом всегда. Это означает, что вы можете создать не более 12 вертикальных сеток внутри любого родительского элемента.

В данный момент мы работаем внутри нашего родительского класса оболочки «container «. Мы разделим его на две неравные части, используя 12 сеток. Для левой боковой панели мы используем класс «span4 », а для раздела контента, который расположится правее, мы будем использовать класс «span8 ».

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

Ваша страница теперь должна выглядеть вот так:

На ней должно быть два отдельных столбца, расположенных бок о бок. Теперь стоит подумать над тем, чтобы создать дополнительный блок оболочки, который я добавил выше через класс «row ». Причина заключается в том, по умолчанию классы span* выравниваются по левому краю.

Чтобы разместить оба столбца ниже всего содержимого мы добавили блок «row ». Он действует как обычный разделитель в таблицах. Теперь вы должны удалить элементы заглушек абзацев из вашего кода.

После чего заполним левую боковую панель списком пунктов навигации.

Список навигации должен иметь следующую разметку:

• What we are?
• Home
• Our Clients
• Our Services
• About Us
• Contact Us
• Our Friend
• Google
• Yahoo!
• Bing
• Microsoft
• Gadgetic World

В дополнение к классу «nav », вы должны добавить класс «nav-list », с помощью которого пункты меню навигации будут выводиться списком. Если добавить класс «nav-header » к любому элементу «li » класса «nav », он будет выглядеть, как заголовок раздела ссылок. Двигаемся дальше, посмотрим, как теперь наша страница выглядит в браузере.

Переходим к области контента, мы будем просто заполнять ее, используя общие теги h3, и теги абзацев. Установка дополнительных классов здесь не потребуется. Ведь мы хотим, чтобы абзацы текста выводились один под другим. Ниже приведен код, который я разместил внутри «span8 ».

How we started ?

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Обновите страницу в браузере, после чего она должна выглядеть вот так:

Как видите, мы уже очень близки к конечной точке. Нам осталось только завершить подвал страницы.
Для футера мы снова разделим «row » на три части. Как это показано в демо-версии. На этот раз мы делим область на три равные части, то есть используем «span4 ».

Так мы создадим еще один блок «row », прямо под «row », который мы создавали ранее для сайдбара и области контента.

Запишите себе следующий код:

Meet Our Clients

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Достаточно просто! Мы разделили строку на три равные части с помощью класса «span4 », а затем заполнили каждый из сегментов, используя теги h4, теги абзацев и ссылки, которые выглядят как кнопки. Проверьте, что у нас получилось, в браузере.

У вас должны быть маленькие изображения клиентов и сотрудников внутри кнопок. Воспользуйтесь тегом , чтобы добавить соответствующие классы изображений, такие как icon-user, icon-star, icon-glass и т.д.

Чтобы иконки стали белыми, используйте класс icon-white с классами icon-user и icon-star . Полный список классов иконок вы можете найти в документации Bootstrap, которая находится здесь.

Чтобы немного отделить подвал страницы от области контента, мы добавим тег между блоками «row». После того, как мы добавили тег , посмотрим, что у нас получилось.

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

Добавляем собственные стили в Twitter Bootstrap

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

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

@import url("bootstrap.min.css");

Еще несколько важных компонентов Twitter Bootstrap Выделенные пункты

Чтобы выделить некоторые фрагменты в теле длинного документа, можно добавить к ним класс «lead ». Это сделает шрифты этого конкретного пункта немного больше, чем в остальной части документа.

Теги выделения

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

Выравнивание текста

Выравнивание текста внутри любого абзаца или блока div можно задать с помощью классов: «text-left », «text-center » и «text-right ».

Цвет текста

Вы можете установить для текста абзацев цвета по умолчанию, для этого используются различные классы выделения цветом, такие как «muted » — серый, «text-warning » — красный, «text-error » — темно-бордовый, «text-info » — светло-голубой и «text-success » — зеленый цвет.

Стили таблиц

Twitter Bootstrap также по умолчанию поддерживает разметку таблиц. Для этого используется следующий код:

…..

Работа с изображениями

Вы можете добавлять изображения, используя обычный тег . Чтобы ваши проекты выглядели интереснее, вы можете добавить классы «img-rounded » для картинок с заокругленными углами, «img-circle » для прокрутки изображений и «img-polaroid », чтобы создать тень и рамку по периметру изображения.

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

Чтобы добавить выпадающее меню в существующую панель навигации (как это показано на демонстрационной странице), вам нужно добавить следующую разметку внутри элемента «li ».

Drop Down

• Item1
• Item2
• Item3

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

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

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

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

Перевод статьи «Twitter Bootstrap Tutorial – Handling Complex Designs » был подготовлен дружной командой проекта .

Хорошо Плохо

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

Любой человек который знает, хотя бы в общих чертах, HTML и CSS может начать использовать данный фреймворк уже сейчас.

В данной статье рассмотрим такое базовое понятие как, bootstrap сетка - она является фундаментом данного фреймворка.

1. Rows и Columns

Часть заголовка я специально оставил на английском языке, чтобы возникало меньше путаницы (rows - ряды, columns - колонки)

Сетка состоит и строк и колонок, что позволяет на позиционировать элементы на странице как угодно.

Rows (ряды) - это один уровень блоков. Это означает, что когда мы создаем новый ряд (row) он занимает всю ширину элемента внутри которого он находится.

Горизонтальное выравнивание осуществляется с помощью колонок (Columns). Дочерними элементами ряда может являться только колонка. Размещение контента в row без колонки - может привести к нарушению макета

Ваш контент Правильно размещенный контент

Замечание: Колонки и ряды имеют особые отношения. Каждая колонока имеют отступ - padding - в 15px слева и справа, таким образом контент внутри имеет равные отступы по краям. Такие правила "отодвигают" колонки от ряда на 15px , а это может нарушить макет, чтобы этого не происходило для row заданы отрицательные отступы что позволяет размещать крайние элементы без отступов от родителя, и именно поэтому колонку всегда следует оборачивать в row.

2. Row разделены 12

Ряд поделен на 12 равных частей. Когда мы собираемся разместить внутри ряда колонку - нам необходимо указать ее ширину - ширину которую займет колонка. Это делается путем добавления в блоку div класса col-md-номер, где номер может быть целым числом от 1 до 12. В зависимости от данного числа, столбец будет занимать определенный процент от полной щирины строки. Например: 6 это 50% от ширину ряда так как 6/12 = 0,5, 3 - 25% (3/12) и т.д.

Вся ширина ряда 25% 25% 50%

3. Обертывание колонок

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

В примере первые 2 колонки имеют ширину 8 и 4 соотвественно, что в сумме дает 12. Таким образом первая строка становится заполненной и следующий за ними элемент будет перенесен на следующую строку.

Эта колонка шириной 9 будет перенесена на следующую строчку

4. Классы для размеров экрана

Помните мы писали .col-md-номер во втором шаге? Этот -md- означает средние размеры экрана (от слова medium - средние). В bootstrap заложены стандартные классы для использования на разных размерах экрана:

xs - (Extra small) - Экстра маленькие экраны, такие как у смартфонов, Используйте их так: .col-xs-номер

sm - (Small Screens) - Маленькие экраны, такие как у планшетов. Использование: .col-sm-номер

md - (Medium) - Средние размеры экранов, это экраны с низким количеством точек на дюйм и ноутбуки. Использование такое же как и в предыдущих примерах: .col-md-номер

lg - (Large) - Большие экраны с высоким разрешением. .col-lg-номер

Bootstrap высчитывает разрешение экрана и dpi (количество точек на дюйм или плотность пикселей) и в соответствии с этим вычислением указывает какой класс активен в данный момент. Это полноценный способ контролировать как положение, так и отображение контента в целом для любых устройств.

Данный блок на среднем экране займет половину, на очень маленьком - всю ширину

5. Clearfix

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

Эта колонка выше чем все остальныне

6. Offsets (Смещения) - ваши друзья

Изначально все колонки выравнены по левому краю и следуют строго друг за другом. Если количество колонок будет меньше 12, то справа останется свободное место.

Чтобы создать отступы слева и/или справа. Применение к любому блоку с колонкой класса .col-md-offset-2 сместит данный блок вправо на размер двух пустых колонок. Это же правило действует и ля других размеров экрана т.е. col-xs-2, col-sm-2 и прочие.

7. Классы Push и Pull

Классы.push и.pull позволяют нам переназначить привязку блоков в зависимости от экрана устройства. Класс.push двигает колонку к правому краю, а класс.pull - к левому. Отличие данного класса от offset в том что они имеют position:relative, таким образовам не сдвигая остальные блоки.

Классы push и pull имеют следущий синткасис: .col-размер-push(pull)-число. Размеры такие же как и в 4 пункте - xs, sm, md, lg. Номер это количество колонок, которые мы хотим подвинуть.

На ноутбуках этот текст будет отображаться справа от картинки, на XS экранах картинка будет справа а текст слева

Заключение

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

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

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

Взвесим за и против

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

• Время – деньги! Использование фреймворка значительно сокращает время написания . Все потому что вы выбираете готовый шаблон, наиболее подходящий под ваши нужны и внедряете его в проект. Поэтому получение конечного продукта происходит быстрее, чем при самостоятельном написании всего кода с нуля. К тому же Бутстрап уже внедрен во многие движки, как, например, WordPress;
• Сколько мелких деталей! Да. Действительно, при разработке сайта нужно учитывать множество подводных камней, мелких деталей и . К ним относятся , адаптивности, некие особенности расположения объектов, знания о поддержке тех или иных элементов и так далее. Bootstrap все это решает за вас, так как в разработанных классах уже прописан необходимый код;
• А как же реализация отдельных инструментов? Не всегда нужно использовать готовые макеты для страниц веб-сервисов. Иногда возникают ситуации, когда вам просто необходимо вставить, например, симпатичное меню, слайдер типа «Карусель» или другие объекты. В таком случае Bootstrap опять спешит на помощь;
• Нет IT-докторам! У всех уже давно устоялось клише, что почерк врача неразборчив и не читабелен. Но такое может быть не только у представителя названной профессии. Код девелопера может быть таким же непонятным. А вот при использовании фреймфорка работать с программным текстом смогут и другие разработчики.

Но не бывает дня без ночи. Так что вслед за преимуществами стоит перечислить и недостатки:

• Откуда столько кода? Одна из главных проблем – это лишний код. При подключении каких-либо классов вместе с вашей реализацией тянется еще много дополнительных программных операций, свойств и т.д., которые могут даже не использоваться во всем проекте;
• Клоны, клоны… Несмотря на все разнообразие существующих шаблонов в интернете, написанных с помощью изучаемого фреймворка, если приглядеться, то видно, что все они между собой слегка похожи. Поэтому как бы вы не изменяли внешний вид сайта, он все равно будет «пахнуть» Бутстрапом;
• Что с этим дизайном не так? Конечно очень удобно использовать готовый шаблон. Но только не тогда, когда ваш веб-ресурс имеет особенный дизайн. Подгонять макеты фреймворка под новый стиль оформления достаточно сложно. Иногда намного проще сверстать все собственноручно.

Принципы работы с Bootstrap

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

На самом деле если вы проходили мои предыдущие уроки, то уже пользовались данным подходом. Он подразумевает под собой скачивание и подключение фреймворка (можно и через CDN) к вашему проекту.

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

Тут есть один негативный момент: если вам нужно изменить множество стилевых правил, то поиск необходимых свойств займет достаточно много времени. Эту проблему в некотором смысле решает специальный инструмент Costomize .

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

Перейдем ко второму варианту работы с описываемым инструментом. Он основан на том, что все переменные фреймворка хранятся в специальных файлах с расширением.less. Продвинутый разработчик скачивает данные файлы, изменяет параметры вручную (или компилирует их в css-код) и меняет и после работает уже с измененным css-файлом.

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

Реализация контрольного примера

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

На главной странице будет располагаться навигационная панель (navbar ), гамбургер меню (navbar-toggle ), слайдер типа «Карусель» (carousel slide ) и текстовые поля, оформленные в класс well .

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

Для начала откройте ссылку . Вот здесь расположены всевозможные шаблоны. Я выбрал «Marketing ». Нажмите на кнопку «Try it Yourself ». Вам откроется диалоговое окно, которое можно сравнить с 2-хколоночной таблицей.

В первую колонку вставьте прикрепленный ниже код, нажмите на «Run » и во второй колонке увидите результат работы программы.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

Bootstrap Example Главная О нас Проекты Материалы Контакты Sign Up Войти Previous Next Наша деятельность Новые проекты

Bootstrap Example .logo { width:55px; } .navbar { margin-bottom: 0; border-radius: 0; } footer { background-color: #f2f2f2; padding: 25px; } .carousel-inner img { min-height:200px; width: 100%; margin: auto; } @media (max-width: 600px) { .carousel-caption { display: none; } } /*Создаю навигационную панель, которая при небольшом размере экрана будет отображать гамбургер меню (кнопку с тремя полосками) */

• Главная
• О нас
• Проекты
• Материалы
• Контакты

• Sign Up
• Войти

/*Создаю автоматически перелистывающуюся галерею */ /*Здесь указываю, что снизу картинки должны располагаться 3 индикатора переключения между фотографиями*/ /*Вставляю сами изображения, при этом первое делаю активным*/ Уютный двухэтажный дом на 8 комнат Современный комфортабельный дом на 4 комнаты Просторный дом под старинный стиль на 7 комнат /*Создаю переключение кадров влево и вправо по кнопкам слева и справа на изображении*/ Previous Next /*Верстаю отдельный статический контейнер для основного контента*/ Наша деятельность

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

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

Новые проекты

На сегодняшний день мы занимаемся строительством офисного высотного здания.

/*Создаю плавающий футер страницы*/