Bootstrap — простая адаптивная верстка для новичков

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

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

Перед выполнением руководства

Прежде чем следовать приведенному ниже руководству нужно:

  • Иметь общее понимание того, что такое Bootstrap ;
  • Как работает система сеток Bootstrap ;
  • Загрузить Bootstrap на жесткий диск;
  • Создать базовый файл Bootstrap index.html .
Что такое Bootstrap

Бутстрап 3 — это платформа для HTML , CSS и JavaScript разработчиков, создающих адаптивные сайты. Фреймворк состоит из созданных адаптивных CSS-стилей столбцов, списков, меню навигации, форм и других элементов.

Система сеток Bootstrap
  • Система сеток Bootstrap классифицирует размеры экрана по четырем типам: сверхмалые, малые, средние и большие;
  • Сверхмалые — это экраны смартфонов. Малые — планшетов, таких как iPad . Средние — стационарные мониторы и большие;
  • Чтобы помочь точно настроить адаптивные функции для этих типов экранов, Bootstrap делит ширину экрана на 12 столбцов;
  • Каждый из этих четырех типов сеток Бутстрап становится адаптивным, только если ему назначается отдельный класс CSS ;
  • Например, чтобы сделать div адаптивным на небольших устройствах, этот div должен иметь собственный класс Bootstrap .col-xs- , например .
Загрузка Bootstrap

Перейдите на сайт getboostrap.com и нажмите кнопку «Download Bootstrap »:

Вы увидите страницу «Начало работы ». Нажмите кнопку «Загрузить Bootstrap »:


Сохраните файл на жестком диске. Его не нужно сохранять на сервере. Разархивируйте файл и переименуйте извлеченную папку в «bootstrap «.

Подготовка базовой страницы Bootstrap index.html Шаг 1. Создайте файл Bootstrap index.html

Вернитесь на страницу «Начало работы » и нажмите ссылку «Basic Template » в правой боковой панели:


Вы увидите код Бутстрап шаблона. Нажмите кнопку «Копировать », чтобы скопировать код:


Вставьте код «Basic Template » в текстовый редактор и сохраните его как файл index.html в той же папке, где находится папка «bootstrap ». Теперь он станет главной страницей сайта Bootstrap .

Откройте вновь созданный файл index.html в браузере и просмотрите свой базовый сайт Bootstrap :


Откройте файл index.html в текстовом редакторе и между тегами и добавьте (1). Закройте этот новый div после тега (2) и сохраните файл:


Перезагрузите страницу в браузере и обратите внимание на то, что текст «Hello World! » больше не прилегает к краю страницы, а смещен немного вправо. Класс Бутстрап «container «, который мы назначили div , добавил этот отступ:


Вернитесь к файлу index.html . Между тегами и замените «Hello World! » на «Trusthub ». Сохраните файл и просмотрите сайт.

Шаг 2. Добавление контента и боковой панели

Вернитесь к файлу index.html и под строкой Trustub вставьте следующий код:

What Trusthub can do for you

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.

Our Team

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.

Снова просмотрите сайт. Теперь вы должны увидеть контент и боковую панель «Our Team «, но для нее еще не задан адаптивный шаблон:


Вернитесь на сайт getbootstrap.com , и в верхнем меню нажмите кнопку «CSS »:


В боковой панели нажмите кнопку «Grid System »:


Прокрутите страницу вниз до раздела «Grid options » (1) и обратите внимание на 12-столбцовую систему сеток Бутстрап с четырьмя типами размеров экрана, их шириной и префиксами класса (2):


Не беспокойтесь, все это станет понятно в считанные секунды, когда вы начнете создавать свой первый Bootstrap-проект .

Откройте еще раз файл index.html и сразу под строкой для существующего установите класс «col-md-9 ». Теперь он должен выглядеть, как :


Перейдите к div , расположенному над заголовком «Out Team » и присвойте ему класс CSS «col-md-3 ». Сохраните файл.

2 голоса

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

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

Немного о Bootstrap

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

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

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

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

Возможности

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

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

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


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

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

Сейчас в среде веб-дизайнеров и разработчиков много говорят и пишут о 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 ». Сохраните его в домашней папке вашего проекта.

Основные шаблоны HTML для работы в Bootstrap

Для того чтобы активировать фреймворк 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

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

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

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

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

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

Bootstrap Site

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

«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.

Get Started

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


Ну, разве не замечательно? Не написав не единого фрагмента 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 ». Он действует как обычный разделитель в таблицах. Теперь вы должны удалить элементы заглушек абзацев из вашего кода.

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

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

В дополнение к классу «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.

How do we market?

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.

Our Clients Know Our Employees

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.

Our Employees Reach Us

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.

Contact Us

Достаточно просто! Мы разделили строку на три равные части с помощью класса «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 ».

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

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

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

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

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

Хорошо Плохо

Система сеток в 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 блока:

   ...   

     ...  

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

Верстка с помощью фреймворка: преимущества

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

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

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

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

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

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

Как создать простой схематичный сайт на bootstrap

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

Для начала необходимо определиться с тем, будет ли контейнер сайта иметь фиксированные размеры, либо же будет полностью резиновым. В случае, если обшему контейнеру вы зададите класс container, его максимальная ширина будет ограничена 1170 пикселями. Если же вы укажете container-fluid, ширину сайта ничто не будет ограничивать. Например, на мониторах шириной 1920 пикселей его ширина будет такой же – на все 100% окна.

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

Отлично, в нашем шаблоне будет три ряда – это шапка, контент + сайдбар и футер. В общем-то, это стандартный вид простых двухколоночных сайтов. Давайте посмотрим на разметку:

Шапка

< div class = "container-fluid" >

< div class = "row" >

< div class = "col-md-12" >

< h1 > Шапка< / h1 >

< / div >

< / div >

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

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

Общая формула для смещения влево сайдбара проста: сдвинуть саму боковую колонку влево на ширину контент, а контент – вправо на ширину сайдбара. Но для начала нужно естественно решить, каковой будет эта ширина. Пусть у нас основной блок будет занимать 75% ширины, а боковая колонка 25%. Тогда нам нужен такой код:

< div class = "col-md-9 col-md-push-3" > < / div >

< div class = "col-md-3 col-md-pull-9" > < / div >

Естественно, вложите это в один ряд.

Создаем сайдбар

В боковой колонке разместим вертикальное меню. Для этого вы можете посмотреть в документации, какие есть классы для стилизации списков. Кликайте на “компоненты” – “группы списков”.

Сайдбар

  • Автосалоны 19
  • Автомастерские 178
  • Ремонт
  • Объявления

< div class = "col-md-3 col-md-pull-9" >

< h2 > Сайдбар< / h2 >

< ul class = "list-group" >

< li class = "list-group-item" > Автосалоны

< span class = "badge" > 19 < / span >

< / li >

< li class = "list-group-item" > Автомастерские

< span class = "badge" > 178 < / span >

< / li >

< li class = "list-group-item" > Ремонт

< / li >

< li class = "list-group-item" > Объявления

< / li >

< / ul >

< / div >

Вот такое получилось меню, со значками:

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

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

Создаем блок контента

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

Content Header

Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfhfdhfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd

< div class = "col-md-9 col-md-push-3" >

< h2 > Content < / h2 >

< div class = "row" >

< div class = "col-sm-4" >

< div class = "panel" >

< h4 > Header < / h4 >

< img src = "auto1.jpg" class = "img-responsive" >

< p > Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfhfdhfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd < / p >

< / div >

< / div >

Как видите, здесь мы применяем систему вложенной сетки. По задумке в контенте 3 анонса статей должно располагаться в ряд. Чтобы этого легко добиться, мы будем принимать блок col-md-9 col-md-push-3, то есть блок контента, за контейнер для сетки. В таком случае мы создаем в нем ряд, где, в свою очередь, нам вновь становится доступна 12-ти колоночная сетка. Классом col-sm-4 мы даем одному анонсу статьи ширину ровно 33,33%. Таким образом, в одну строку в контенте идеально поместятся 3 анонса. Просто скопируйте и вставьте этот блок еще 2 раза, чтобы проверить, как они отобразятся.

Вот так отображаются наши блоки с анонсами статей:

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

Я надеюсь, этот пример вам понятен. Теперь предлагаю разобрать чуть более нестандартный пример. Создадим в контенте еще один ряд. На этот раз задумка такова – отобразить в ряде одну статью и слайдер, между ними сделать небольшой отступ. Допустим, статья будет слева, а слайдер – справа. Между ними небольшой зазор + все это, естественно, должно быть адаптивным.

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

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

Дело не в том, как вам сделать сам слайдер – эту информацию можно без проблем найти в документации. А наша задача сейчас – понять, в блок каких размеров нужно обернуть слайдер. У нас в ряде свободно еще 8 ячеек, но поскольку между анонсом статьи и слайдером должен быть небольшой отступ, я оберну слайдер вот в такой блок:

Вот теперь у нас в одной строке анонс статьи и слайдер, а ниже еще 3 анонса, и все это располагается в блоке контента.

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

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

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

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

Готовы ли вы?

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

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

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

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

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