Меню
ГлавнаяExcel

Обучение bootstrap 3 с нуля. С использованием LESS. Основной шаблон HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • – col-xs-* – применяется для создание сетки с маленькими экранами. Под это определение подходят телефоны;
  • – col-sm-* – для устройств чуть большей ширины экрана, чем у телефона, например планшет;
  • – col-md-* – средних размеры экранов, т.е. нетбуки;
  • – col-lg-* – для больших экранов. Если верить яндекс.метрике , то на данный момент количество пользователей именно сидят на сайтах под этими экранами. Но этот показатель очень сильно зависит от тематики сайта.
В таблицы ниже приведены данные относительно этих классов: Вид системы сеток Twitter Bootstrap 3 Крошка-экран
Смартфоны
(Небольшой экран
Планшеты
(≥768px и Средний экран
Ноутбуки
(≥992px и Большой экран
Компьютеры
(≥1200px)
Фиксированный макет (class ="container" ) Соответствует 100% ширине веб-клиента 750px 970px 1170px
Резиновый макет (class ="container-fluid" ) Соответствует 100% ширине экрана веб-клиента
Префикс класса class ="col-xs-*" class ="col-sm-*" class ="col-md-*" class ="col-lg-*"
Максимальная ширина колонки Bootstrap для фиксированного макет (class ="container" ) 62px (750px / 12) 81px (970px / 12) 97px (1170px / 12)
Максимальная ширина колонки для резинового макета (class ="container-fluid" ) Ширина веб клиента делится на 12
Внутренние отступы 15px по краям

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

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

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

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

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

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

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

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

Контейнер №1

  

Контейнер №2

  

Контейнер №3

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

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

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

Контейнер №1

  

Контейнер №2

     

Контейнер №3

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

Контейнер №1

     

Контейнер №2

     

Контейнер №3

 

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

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

Контейнер №1

     

Контейнер №2

     

Контейнер №3

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

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

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

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

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

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

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

   ...   

     ...   2 голоса

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

Адаптивная верстка Bootstrap – как это все взаимосвязано? Зачем нужен фреймворк, что это вообще такое, чем он помогает и действительно ли упрощает жизнь. Также я расскажу как использовать программу по максимум не нанося вред будущему проекту, и где найти хорошие уроки. Ну что ж, начнем?

Немного о Bootstrap

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

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

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

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

Возможности

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

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

Сам же курс «Практика от А до Я » длится около 17 часов. За это время вы получаете важные теоретические знания, а затем отрабатываете на практике как использовать те или иные элементы правильно: какие элементы удалить из кода, что понадобится, чтобы сайт работал быстрее, что такое и многое другое.


Ну и еще один бонусный курс, ТОП-4 дополнения для Bootstrap, которые помогут фреймворку работать эффективнее.

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

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

Что такое bootstrap

Это фреймворк из трёх языков HTML/CSS/JS. Благодаря большому функционалу верстать сайты становится легко и быстро, ну конечно если во всем разобраться.

Появился в стенах компании Twitter и назывался «Twitter Bootstrap». Но из-за того что его захотели сделать всемирным пришлось отказаться от слова Twitter в названии. По моему личному опыту в bootstrap есть ряд плюсов:

  • Быстрость верстки — большое количество готовых компонентов даёт возможность не останавливаться на обыденностях.
  • Адаптивность — возможность настраивать размеры блоков сайта в зависимости от ширины устройства, как для компьютера так и для телефона.
  • Популярность — из-за которой существует большое количество статей и уроков, а также форумов. Поэтому по любому пустяку, в котором вы сомневаетесь можете найти ответ на просторах интернета или задать вопрос на форуме.
  • Bootstrap можно использовать для создания сайтов с различными CMS — WordPress, Joomla, Opencart.
    • Как установить bootstrap

    Есть два способа его подключения:

    • Через скачивание файлов .
    Формы

    Также мы имеем стили для оформления:

    • кнопок
    • радиокнопок
    • текстовых полей
    • чекбоксов

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

    Таблицы

    Для создания такой простенькой таблицы нужно добавить к ней class = "table" .

    Когда мы подробнее рассмотрим, как оформлять таблицы, то вы сможете:

  • Чередовать цвета колонок
  • Подсвечивать колонки при наведении
  • А также делать таблицы которые настраиваются в зависимости от расширения
    • Кнопки

    Для создания красивой кнопки понадобится добавить только два класса. Кстати второй отвечает за цвет кнопки, так что можно сделать класс с вашим цветом и подключить его вместо стандартного.

    А вот их конструкция.

    Кнопка Обычная Отлично Инфо Обратите внимание Тревога Ссылка

    JavaScript элементы

    Bootstrap имеет множество фишек связанных с анимацией:

    • Сворачивание и разворачивание окон
    • Появление модальных окон
    • Всплывающие подсказки
    • Создания табов
    • Слайдер

    Все это будет у вас в руках при подключении одного файла bootstrap.js

    Вывод

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

    Переходите на следующий урок, если готовы быстро верстать сайты.

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

    Что же представляет из себя Bootstrap?

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

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

    Наиболее популярные среди них – это Tooltip, который отвечает за всплывающие окна, Dropdown — отвечающий за выпадающие списки, Carousel, организовывающий прокручиваемый слайдер, и еще некоторые.

    С полным списком существующих плагинов, шаблонов и компонентов можно ознакомиться на официальном сайте http://getbootstrap.com/getting-started/ . Также с его помощью начиная со второй версии можно создавать отзывчивую верстку.

    Несколько слов об истории

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

    Bootstrap был создан Марком Отто и Джейкобом Торнтоном специально для социальной сети Twitter. Он выступал в качестве внутренней библиотеки. Именно поэтому иногда можно встретить название Twitter Bootstrap.

    Изначально библиотека называлась Twitter Blueprint. Однако к тому моменту, как продукт был выпущен в широкие массы (а это случилось 19 августа 2011 года), его наименование было изменено на Bootstrap. На сегодняшний день существует четыре версии фреймворка.

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

    Какие плюсы использования Bootstrap?

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

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

    Итак, при подключении описываемого фреймворка вам предоставляется возможность использовать такие готовые элементы, как:

    • Всевозможные компоненты, в которые входят: панели навигации, выпадающие списки, кнопки, индикаторы процесса, разбиения на страницы и другие;
    • JavaScript-плагины, среди которых есть переходы, модальные и выпадающие элементы, всплывающие блоки и подсказки, сворачивание, реализация вкладок, слайдеры и другие;
    • Шаблоны сеток, в том числе и плавающих;
    • Макеты;
    • И конечно же реализация отзывчивого дизайна.

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

    Благодаря данному инструменту Bootstrap очень часто используется для написания сайтов. Потому что это действительно грамотный и мощный механизм для блочной верстки. Создателями фреймворка было предусмотрено максимальное количество колонок – 12. Этого более чем достаточно для установки «каркаса» .

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

    Как подключить фреймворк?

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

    Итак, на официальном сайте по ссылке , можно скачать текущие версии Bootstrap-а. Все очень просто. Просто выбираете подходящий для вас установочный пакет и нажимаете на кнопку «Download». На этом же сайте вы можете скачать альфа-версию Bootstrap 4.

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

    Если вам нужно подключить уменьшенную версию JavaScript, то коперните вот эту строчку:

    Ну а темы подключаются следующим образом:

    На русифицированном веб-сайте можно посмотреть обучающее видео по подключению данного фреймворка (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/ ).

    Вот и все, друзья, пришло время прощаться. Не забывайте делиться интересными публикациями с коллегами, а также подписываться на обновления моего блога. Пока-пока!

    С уважением, Роман Чуешов

    Прочитано: 213 раз

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

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

    Об использовании Bootstrap В настоящее время есть несколько способов работы со стилями Bootstrap.Без использования LESS Для новичков сам Bootstrap рекомендует следующий подход: нужно скачать с сайта скомпилированный Bootstrap и положить его в свой проект, ничего не изменяя. Затем нужно создать свой пустой CSS файл и подключить его после bootstrap.css.


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

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

    С использованием LESS Данный способ подразумевает, что все переменные Bootstrap хранятся в.less файлах. Разработчик работает с этими переменными и по необходимости вручную или автоматически компилирует их в CSS файлы, а сам HTML подключает только скомпилированные CSS файлы. Именно этот вариант и будет рассматриваться в статье, как самый гибкий.

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

    Создание проекта Первым шагом давайте создадим простую структуру файлов для нашего проекта.
    Предварительный осмотр После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
    • Как будут нарезаться изображения?
    • Какие будут использоваться компоненты?
    • Какими будут основные стили?
    • Какой макет страницы у нас получится?
    Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к вёрстке. Давайте рассмотрим эти вопросы по-порядку.Общие изображения На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, изображение карты, два логотипа и кнопки социальных сетей.

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

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

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

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

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

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

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

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

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

  • Для верстки колонками - сеточная система (row, col)
  • Для поиска – инлайновая форма (form-inline), сгруппированные контролы (input-group), кнопка (btn)
  • Для навигации - навигационная панель (navbar) и сама навигация (nav)
  • Для отображения подменю – группированный список (list-group)
  • Для блока карты – визуальная панель (panel)
  • Для отображения большого центрального блока – jumbotron
  • Для отображения рамок фотографий – миниатюры (thumbnail)
    • Более подробно на каждом компоненте мы остановимся, когда он нам встретится в вёрстке.Основные стили В Bootstrap все стили по умолчанию уже заданы, нам нужно только их перебить, если они отличаются от нашего дизайна. Сделаем это в файле src/less/variables.css.

    В первую очередь нужно добавить переменные, которых нет в настройках 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.

    Каркас HTML Вёрстку сайта начинаем традиционно с каркаса HTML. Вставляем в файл index.html код простейшего шаблона со страницы Getting started , предварительно убрав всё лишнее:

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

    Макет В данном случае, мы видим, что сайт состоит из двух частей: основного контейнера с содержимым, который центрируется на экране и тянущегося футера. Основной контейнер состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), навигация (nav) и название страницы (.heading).

    Давайте добавим в 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», который применяет специальные стили навигации внутри навигационной панели.


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

    /*высота навигационного меню*/ @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. Список ссылок создаем аналогично главному меню.


    В настройках компонента укажем, что все группированные списки нужно показывать с фоном и рамкой компонента «панель»:

    @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.”

    John Doe, Lorem Ipsum
    Через переменные для компонента jumbotron зададим белый цвет текста и брэндовый голубой фон:

    @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»

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

    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

    … Ericka Nobriga

    art director

    Cody Rousselle

    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; } } } } }

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