Как верстать с помощью bootstrap. Bootstrap — простая адаптивная верстка для новичков

Требуется HTML5 doctype

Bootstrap использует HTML-элементы и CSS-свойства, которые требуют HTML5 doctype. Включите его во все свои проекты.

Оформление и ссылки

Основные компоненты Bootstrap включают в себя элементы отображения, оформления и стили ссылок. В частности, мы:

• Удалили отступ margin элемента body
• Установили белый цвет фона background-color: white; для body
• Используем атрибуты @baseFontFamily , @baseFontSize и @baseLineHeight как основные
• Настроили основной цвет ссылки с помощью @linkColor и применяем подчеркивание только для селектора:hover

Эти стили вы можете найти в scaffolding.less .

Сброс настроек посредством Normalize

В Bootstrap 2 мы применили старый сброс браузерных дефолтов с помощью Normalize.css , проект от Николаса Галлагера который также включает в себя HTML5 Boilerplate . Так как мы часто используем Normalize в нашем reset.less , мы удалили некоторые элементы специально для Bootstrap.

Сетка дизайна по умолчанию Демонстрация

Основная сетка макета состоит из 12 колонок , обеспечивая ширину контейнеров в 940px без активных динамических особенностей . При добавлении динамического файла CSS сетка может растягиваться в ширину от 724px до 1170px, в зависимости от вашего монитора. На дисплеях, ширина которых менее 767px, колонки становятся плавающими и выстраиваются вертикально.

Основная сетка HTML

Для простого макета в две колонки создайте класс.row и добавьте соответствующее число колонок.span* . Так как это сетка в 12 колонок, каждый диапазон из двух.span* насчитывает 12 колонок и всякий раз будет добавлять 12 колонок в каждую строку (или то количество колонок, которое задано в родительском элементе).

...

...

В данном примере у нас имеются.span4 и.span8 , созданные и 12 колонок и одной сплошной строки.

Перемещение колонок

Подвиньте колонки вправо, используя классы.offset* . Каждый класс увеличивает левый отступ колонки на размер ее самой. Например, .offset4 перемещает.span4 на четыре колонки.

...

...

Верстка колонок

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

Колонка уровня 1

Уровень 2

Уровень 2

Level 1 column

Level 2

Level 2

Плавающая сетка Демонстрация

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

Основная плавающая сетка HTML

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

...

...

Плавающее перемещение

Устанавливается таким же образом, как и в фиксированной сетке: добавьте класс.offset* в любую колонку, чтобы при этом переместить несколько колонок.

...

...

Плавающая верстка

Верстка плавающей сетки немного отличается: количество верстаемых колонок не должно соответствовать количеству родительских колонок. Вместо этого каждый уровень сверстанных колонок «сбрасывается», потому что каждая строка принимает 100% свойств родительской колонки.

Level 1 of column

Level 2

Level 2

Макеты Фиксированная разметка

Основной фиксированный по ширине макет (опционально динамический) с единственным требованием — .

Плавающая разметка

Создайте плавающую страницу с двумя колонками с помощью . Идеально подходит для приложений и документации.

Адаптивный дизайн Включение адаптивных возможностей

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

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

Об адаптивных особенностях Bootstrap

Медиа запросы изменяют обычный CSS, основанный на большом количестве условий и соотношений, размеров, типов дисплея и пр., но чаще всего — на фокусе в пределах min-width и max-width .

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

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

Поддерживаемые устройства

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

/* Large desktop */

@media (min - width : 1200px ) { ... }

/* Portrait tablet to landscape and desktop */

@media (min - width : 768px ) and (max - width : 979px ) { ... }

/* Landscape phone to portrait tablet */

@media (max - width : 767px ) { ... }

/* Landscape phones and down */

@media (max - width : 480px ) { ... }

Дополнительные адаптивные классы

Показанная здесь таблица классов обеспечивает динамику для различных устройств и их работу в связке с сеткой макета и медиа-запросами (разделено по устройствам). Данные классы вы можете найти в responsive.less .

Класс Телефоны 767px и менее Планшеты 979px to 768px Ноутбуки и десктопы По умолчанию .visible-phone .visible-tablet .visible-desktop .hidden-phone .hidden-tablet .hidden-desktop

Виден	Скрыт	Скрыт
Скрыт	Виден	Скрыт
Скрыт	Скрыт	Виден
Скрыт	Виден	Виден
Виден	Скрыт	Виден
Виден	Виден	Скрыт

Когда использовать?

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

Тестирование адаптивных классов

Измените размер окна в вашем браузере или запустите сайт на других устройствах для тестирования адаптивные классов.

Виден на…

Зеленые отметки обозначают, что класс виден на данном дисплее.

• Телефон? Телефон
• Планшет? Планшет
• Десктоп? Десктоп

Скрыт на…

В этом случае зеленые отметки обозначают, что класс не отображается на данном дисплее.

• Телефон? Телефон
• Планшет? Планшет
• Десктоп? Десктоп

Хотели бы вы улучшить адаптивность своего сайта с помощью Бутстрап ? Важнейшим аспектом этого фреймворка является его базовая сетка с 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 ». Сохраните файл.

Вторая половина статья уже воспринимается попроще, там больше примеров со скриншотами.

Bootstrap — что это?

Итак, начинаем с важного вопроса. Бутстрап — это css и js-фреймворк, по сути, по сути, набор файлов с готовым написанным кодом. Цель разработчиков практически любого фреймворка — упростить разработку сайта себе и другим, кому будет доступен инструмент. В случае с Bootstrap он полностью бесплатен, так что вы можете использовать его любым образом, редактировать исходный код и как угодно переделывать фреймворк под себя. Это отлично.

Установка Bootstrap

Если вам нужно просто подключить файлы фреймворка к html-документу (например, для практики), просто скачайте фреймворк с официального сайта getbootstrap.com , скопируйте его файлы в проект и подключите те, которые вам нужны. Сделаю краткий обзор этих файлов:

bootstrap.css и bootstrap.min.css — несжатая и сжатая версии css-кода фреймворка. К рабочему проекту рекомендуется подключать сжатый файл, таким образом вы чуть-чуть улучшите скорость загрузки. Но если вы планируете смотреть код в файле, подключайте несжатую версию.

bootstrap.js и bootstrap.min.js — файл со скриптами

папка fonts и в ней файлы glyphicons — это иконочный шрифт Bootstrap. В нем около 200 иконок. Для большинства случаев вам их хватит, иногда требуется подключение других. Об иконочном шрифте мы еще поговорим.

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

Русская документация Bootstrap

Зайдя на getbootstrap вы наверняка заметили, что тут все на английском. Нам же пригодилась бы русская справка по фреймворку. Найти ее легко. Для этого перейдите с главной страницы в раздел Getting Started . Листайте в самый низ, там будет ссылка на переводы. Ищите там русский и кликайте по нему. Все, теперь вы на русскоязычной версии сайта. Правда, тут переведено не все, но где-то 70-80% точно, так что все разберетесь.

Сетка Бутстрапа

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

Что это за классы? Отправляемся к документации, она нам сильно поможет. Зайдите в раздел CSS — Grid System . Общие правила работы с сеткой просты, сейчас перечислю их.

Как работать с сеткой?

Представьте себе ее, как html-таблицу. Если вы когда-нибудь писали html-код для таблиц, то знаете, что все содержимое помещается в тег table , один ряд помещается в тег tr , а уже в него помещаются ячейки — td .

Так вот, в сетке все аналогично. Класс container служит общим контейнером для сетки. Есть 2 варианта сетки бутстрапа — полностью резиновая и имеющая все-таки конечную максимальную ширину. Так вот, при задании общему блоку класса container сайт будет иметь максимальную ширину в 1170 пикселей. Больше он расширяться не будет. Естественно, содержимое будет отцентрировано.

Если же задать класс container-fluid , то сетка будет полностью резиновой, то есть не будет ограничений по размеру. Например, если человек откроект сайт на мониторе шириной 1920 пикселей, он увидит его на всю ширину.

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

Отлично, в блоке container следует размещать ряд сетки. В него нужно поместить все блоки, которые стоят в одной строке. То есть если мы возьмем самый типичный шаблон: шапка, основная часть, колонка справа и футер, то тут 3 колонки. В первой будет только шапка, во второй — контент и боковая колонка, а в последней — футер. Разметка для такого сайта будет примерно такой:

Шапка
Контент... и боковая колонка
Футер

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

Как же работает эта самая 12-ти колоночная система?

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

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

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

ld — для больших экранов, шириной более 1200 пикселей (десктопные компьютеры);

md — для средних экранов, ширина от 992 до 1199 (компьютеры, нетбуки);

sm — для маленьких экранов, ширина от 768 до 991 пикселя (планшеты);

xs — экстра-маленькие экраны, ширина менее 768px.

Вот такие 4 класса, ну а для управления размерами элементов используются числа от 1 до 12, потому что, как помните, колонок в сетке именно 12.

Шапка

Контент
Боковая колонка

Футер

Разобраться в ней достаточно просто. Первым делом создаем шапку, ее вообще можно не помещать в сетку, так как она в любом случае будет занимать 100% ширины (обычно). Но мы все-таки поместим. Что это за класс col-md-12 ? Как я вам уже говорил, просто col- никто не пишет, этим классом мы, по сути, сообщаем браузеру:
Это ячейка | колонка
На средних устройствах (класс md) ее ширина должна составлять 12 колонок из 12, то есть 100% от ширины ряда (row).
Ну а что с шириной на других устройствах? На large (lg) экранах она тоже будет 100%, потому что значения для больших экранов наследуются, а для меньших нет. Все просто: если вы бы написали col-xs-4 , то ширина колонки была бы 33% на всех устройствах, а если col-lg-4 , то только на больших. Вот такая особенность, запомните ее.

Ну а если на меньшие экраны значение ширины не сохраняется, то что происходит? Оно сбрасывается. Вот как это происходит:
col-sm-4 — на маленьких экранах блок будет занимать 33% ширины, таким же он будет на экранах md и lg, но на xs, то есть самых маленьких, ширина сброситься до 100%. Итак, запомните еще 1 простое правило: Если для меньших экранов ничего не задано, то на них блок будет отображаться на 100% ширины.

Контент
Боковая колонка

По сути, мы указываем браузеру:
Пусть блок контента будет на ширину 8 из 12-ти колонок и такая ситуация будет на маленьких, средних и больших экранах (достаточно указать для маленьких, для больших экранов, как вы помните, значение наследуется). А вот на самых маленьких экранах блок будет заниматься 100%. Это правильно, обычно на мобильных устройствах сайты идут именно в 1 колонку.
Пусть боковая колонка будет шириной в одну треть ширины ряда на все тех же маленьких, средних и больших экранах.Ну а на самых маленьких, как вы уже поняли, ее ширина также сбрасывается до 100%. Вот так все просто.

Ну а с футером и разбираться нечего. Что ж, базовые принципы работы сетки мы разобрали, но нужно еще посмотреть как работает…

Вложенная сетка Bootstrap

Дело в том, что сейчас с вами мы разбили шаблон лишь на основные блоки, но ведь у них внутри тоже может быть разделение на колонки. Например, в контенте могут выводиться товары в несколько колонок. Как быть? Очень просто — мы создаем внутри точно такую же сетку. Она будет вложенной, но тоже содержит в себе 12 колонок. Если все это обобщить, то вот к какому заключению приходим:
Внутри любого блока может быть неограниченное количество сеток. Например, в блоке с товарами сетка для разделения товаров, в самом блоке с одним товаром можно создать еще одну сетку, например, для разделения цены, информации о наличии и доп. информации.

Сейчас мы с вами попробуем сделать еще одну сетку внутри блока с контентом, чтобы расположить в 3 колонки товары. Итак, берем блок, в котором у нас контент:

Контент

И пишем в него:

Каталог товаров:


Название товара

Описание товара

Как видите, мы создали внутри контента новую сетку — вложили внутрь ряд, а в ряду уже будут 3 блока с товарами. Просто скопируйте блок col-sm-4 с карточкой товара и вставьте его еще 2 раза, получится вот что (картинку товара можно взять любую, я взял велик):

Упустил еще один важный момент, чтобы картинки адаптировались под блоки, в которых находятся, каждой из них нужно задать класс img-responsive . Я если вы, как и я, считаете, что это делать неудобно, то просто напишите в собственном style.css так:

Img{ max-width: 100%; height: auto; display: block; }

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

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

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

Responsive-утилиты

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

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

Футер

Что в данном случае сделает класс hidden-xs ? Он скроет футер на экстра-маленьких устройствах. На всех остальных блок будет виден.

Если же вам нужно наоборот показать его только на самых маленьких экранах, нужно использовать класс visible-xs-block . В таком случае блок будет скрыт на всех экранах, кроме самых узких. Итак, классы адаптивных утилит прописываются так:

Слово hidden или visible, в зависимости от того, что вам нужно

Сокращение xs, sm, md или lg, указывающее, на каких экранах скрывать или показывать блок.

Для visible также нужно добавить одно из трех значений: block — отображать элемент как блочный, inline-block — как строчно-блочный, inline — строчный.

Ну и парочку примеров, чтобы было понятно:

hidden-xs hidden-lg — скроет элемент на самых маленьких и больших экранах. Как видите, можно указывать несколько классов через пробел.

visible-xs-inline visible-md-block — на маленьких и large-экранах элемент отображаться не будет вообще. На экстра-маленьких он будет строчным, а на средних — блоком.

visible-lg-block — элемент будет виден только на самых больших экранах, на всех остальных будет скрыт

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

Задача: сделать так, чтобы на маленьких экранах исчезала боковая колонка, а на самых маленьких еще и один товар. И чтобы на xs-устройствах товары были уже в 2 колонки, а не в 3.

Попробуйте сделать это самостоятельно, редактируя лишь html-код. Что же нужно сделать? Сначала разберемся с колонкой, чтобы скрыть ее на sm-экранах, всего лишь нужно добавить ей класс hidden-sm .

Отлично, теперь третьему товару нужно добавить класс hidden-xs , и он исчезнет на самых маленьких экранах. Ну а классы оставшихся двух товаров будут таковыми:

То есть на средних устройствах блок будет занимать 4 колонки из 12, что можно перевести в 33,33% ширины, а на экстра-маленьких — 50%. И поскольку один блок с товаром исчезнет на этой ширине, оба блока с товарами аккуратно расположатся в 1 ряд, вот так:


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

Сдвинь меня полностью

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

Оставим один блок с товаром:

Достаточно произвести простые расчеты, чтобы понять, насколько нужно сдвинуть блок, чтобы отцентрировать его. Его нужно сдвинуть на 4 колонки влево на средних и больших экранах, и на 3 колонки на маленьких. Вот так это выглядит:

Класс col-md-offset-4 говорит: на средних и больших экранах сдвинь блок влево на 33% ширины родительского контейнера (1/3 отступ слева, 1/3 ширина блока, ⅓ отступ справа, получается центровка).
Класс col-xs-offset-6: на экстра-маленьких и маленьких экранах сдвинь влево на 25% (¼ отступ слева, ½ ширина блока, ¼ отступ справа).

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

Компоненты Bootstrap и примеры их использования

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

Быстрые флоаты и отмена обтекания

Классы pull-left и pull-right позволяют быстро сделать любой блок плавающим, отправив его влево или вправо. Не забывайте при этом про отмену обтекания. Для этого вы можете использовать класс clearfix .

Bootstrap: Горизонтальное адаптивное (мобильное) меню

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

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

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

Кнопка переключения




Логотип/название

• Велоспорт


• Мотоспорт


• 
  Тренажеры
  
  
  
  • Беговые дорожки
  
  
  • Элиптические тренажеры
  
  
  • Скамьи
  
  
  
  

Искать

То, что кода много, этому не пугайтесь. Вот так теперь выглядит сайт:


Но если меню у вас будет занимать не всю ширину экрана, есть смысл его отцентрировать. Для этого следует после следует создать дополнительный блок-обертку для меню, который разместить после блока с классом container-fluid . Не забудьте закрыть этот блок. Я дал ему класс navbar-wrap . Вот такие стили для него:

То есть можно просто ограничить ширину и отцентрировать. Либо изначально замените container-fluid на container .


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

Вот так меню будет выглядеть на устройствах с шириной экрана менее 768 пикселей:


Как видите, меню свернулось. Оно раскрывается при клике по кнопке в правом верхнем углу. На экране остался только логотип.

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

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

Тренажеры

• Беговые дорожки


• Элиптические тренажеры


• Скамьи

Итак, контейнером для выпадающего пункта служит обычный пункт списка с классом dropdown . Внутри него лежит основная ссылка, клик по которой раскрывает выпадающее меню. Очень важно прописать ей data-атрибут , который вы видите в коде, без него ничего не будет работать. Также вы должны убедиться, что файл bootstrap.js подключен к веб-страницам.

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

Добавляем с помощью Bootstrap хлебные крошки (навигационная цепочка)

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

Главная

Каталог

Товары

По сути, достаточно нумерованному списку указать класс breadcrumb , а в него вписать обычные пункты списка. Кстати, выровняю по центру заголовки второго уровня в шаблоне (это нужно прописать в css):

H2{ text-align: center; }

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

Breadcrumb{ background: transparent; }

Вот так сейчас выглядит сайт:

Bootstrap таблицы

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

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

Если вы хотите сделать таблицу полосатой, то есть чтобы у рядов чередовался фоновый цвет — добавьте класс table-striped . Чтобы при наведении на ряд таблицы он подсвечивался другим цветом, используйте класс table-hover .

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

Естественно, вы можете без проблем прописать свои собственные классы в style.css и использовать их. На этом с таблицами заканчиваем.

P.S. Статья будет дописываться и дополняться...

Итог

Надеюсь, статья была полезна и вы смогли понять самое важное. Любые вопросы можете задавать с помощью комментариев.

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

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

Чтобы задать ширину колонок для смартфонов достаточно в код включить класс col-xs-N, для мониторов он уже будет именоваться col-md-N. Любые классы можно комбинировать между собой, если класс для выбранного устройства не указан, то он наследуется снизу вверх. Это значит, что макет для смартфона будет выглядеть так же, как и макет для монитора. Но не наоборот. Именно поэтому вёрстка всегда начинается с макета для смартфона, затем уже идёт планшет и монитор.

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

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

С учётом этой строки и новых классов сделаем простой макет с двумя колонками (пример 1).

Пример 1. Адаптивный макет

Адаптивный макет { background-color: #eee; text-align: center; padding-top: 10px; padding-bottom: 10px; margin-bottom: 10px; font-size: 2rem; } Заголовок Колонка 1 Колонка 2

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

Рис. 1. Вид на смартфоне

Рис. 2. Вид на планшете

Рис. 3. Вид на мониторе

Мы рассмотрели самый простой случай, когда расположение элементов практически не меняется относительно друг друга. Как быть, если потребуется переставить элементы местами или кое-что убрать для маленьких экранов? Напрямую это сделать не получится, поэтому пойдём на небольшую хитрость - добавим два одинаковых элемента в разных местах и будем один прятать, а другой отображать. Bootstrap предлагает два набора классов для сокрытия и показа элементов в зависимости от ширины окна - hidden-xs и visible-xs-block . Принцип тот же, что и при работе с колонками, вместо xs подставляем нужное ключевое слово. В примере 2 показано как «перемещать» таким образом заголовок.

Пример 2. Изменение положения заголовка

Заголовок Колонка 1 Колонка 2 Заголовок

Результат данного примера показан на рис. 4.

Доброго времени суток, любители веб-разработки и желающие изучить 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 /*Верстаю отдельный статический контейнер для основного контента*/ Наша деятельность

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

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

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

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

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