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

21.02.2019

Здравствуйте, уважаемые читатели блога сайт. В первой части статьи по мы познакомились с возможностями этого фреймворка, узнали о том, что такое отзывчивый дизайн и почему он так важен в нашу эпоху повального роста популярности различных мобильных гаджетов. Там мы также во всех подробностях рассмотрели вопросы подключения Бутстрапа к Html странице (подключение файлов стилей, скриптов и библиотеки jQuery).

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

Как работает сеточная система в Bootstrap 3

Bootstrap 3 идет в комплекте с двенадцатиколоночной сеточной системой , которая рассчитана в основном на мобильные устройства. Т.е. она разработана с прицелом в первую очередь именно на маленькие дисплеи, в уже во вторую — на широкие экраны. В новой версии этого фреймворка есть четыре размера сетки. Всю эту информацию можно подробно изучить на официальном сайте GetBootstrap.com , перейдя на вкладку «CSS» из верхнего меню и выбрав пункт «Grid system» в правом.

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

Ну, а сами элементы внутри ряда вы сможете распределить по одной или сразу по нескольким типам сеток с помощью прописывания атрибута class со значением, например, .col-xs-цифра (в этом случае используется только сверхмалая сетка).

Для примера, если вам нужно получить в результате три равные по размеру колонки, то нужно разделить 12 (размерность сетки в Bootstrap 3) на 3 (требуемое число колонок). Значит для каждого Html элемента внутри ряда (это опять же могут быть контейнеры Div) нужно будет прописать одинаковые классы — . Если нужны колонки не равной ширины, то нужно будет просто соблюсти условие, при котором цифры после col-xs- во всех трех классах в сумме должны составлять 12 (например, 2-4-6). Но прежде давайте рассмотрим, что такое «xs» в этой записи и что это значит?

Чуть ниже в области «Grid options» вы найдет объяснение упомянутых выше четырех размеров сетки современного Бутстрапа.

Сначала идет очень маленькая сетка (в столбце «Extra small devices»), разработанная для мобильных устройств, размер экрана, которых по ширине меньше 768 пикселей (про читайте по приведенной ссылке). Она всегда будет горизонтальной при любом размере экрана, а что это такое, я попробую пояснить чуть ниже. Обратите внимание, что префикс класса для этого типа сетки будет как раз col-xs , как в рассмотренном чуть выше примере.

Если размер экрана устройства лежит в пределах от 768 до 992 пикселей (сейчас это чаще всего планшеты), то для них подойдет сетка Бутстрапа, предназначенная для маленьких девайсов. Называется она малой, а для ее задания используются префиксы класса col-sm .

Для устройств размером экрана больше 992, но меньше 1200 (в основном это мониторы десктопных компьютеров или ноутбуков), имеется сетка для средних девайсов. Называется она средней, и префикс класса у нее col-md .

Ну и для мониторов с размером по ширине свыше 1200 пикселей имеется самая большая сетка с префиксом класса col-lg .

Последние три сетки будут горизонтальными лишь при размерах экрана по ширине больше точки, при которой наступает «коллапс» (слом). Например, для большой сетки на экранах размером меньше 1200 пикселей она перестанет быть горизонтальной и превратится в вертикальную. На странице официального сайта GetBootstrap.com , которую мы сейчас рассматриваем, приведены примеры и пояснения по этому поводу. Однако, на мой взгляд, там все несколько путано и сложно.

Пример работы сеточной системы Bootstrap 3 при разной ширине экрана

Попробую пояснить все это на готовом примере. Вам нужно будет лишь скопировать файлик setka.html (для этого и выберите из контекстного меню пункт «Сохранить по ссылке как...»). Если этот файлик вы напрямую откроете в браузере (кликнув по приведенной ссылке левой кнопкой мыши), то ничего не получится, ибо не подключится фреймворк Бутстрап.

Скачанный файлик setka.html поместите в папку Bootstrap, о которой мы говорили в . Он должен находиться на том же уровне, что и созданный нами ранее файл index.html.

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

У меня разрешение экрана монитора по ширине составляет 1280 пикселей, что больше точки слома в 1200 пикселей, заданной для большой сетки. Что мы видим в результате? Примерно такую картину:

Здесь приведены пять примеров макета сайта, построенных на разных типах сеток:

Первый ряд описан с помощью использования всех четырех сеточных систем, имеющихся на данный момент в Бутстрапе. В зависимости от разрешения экрана устройства, на котором просматривается макет, там будет отображаться название сетки, которая используется в каждой из ячеек (сейчас над первым рядом написано, что используется крупная сетка, а в ячейках «cl-lg» — префикс класса большой сетки). При уменьшении ширины экрана эти надписи будут меняться.

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

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

Теперь давайте чуток сузим размер окна браузера, чтобы по, и пронаблюдаем произошедший слом (коллапс).

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

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

Давайте еще раз уменьшим размер окна браузера по ширине так, чтобы оно стало. Произойдет очередной слом:

Теперь (исходя из размера экрана) мы работаем с маленькой сеткой. Соответственно, уже не только крупная, но и средняя сетка тоже сложилась вертикально. Ну, а в первом ряду, где используется комбинация сеток, сейчас все контролируется малой сеточной системой Бутстрапа. При этом, в файле setka.html меняется еще и распределение колонок в этом первом ряду, что вовсе не обязательно, но так вполне можно делать для удовлетворения каких-то своих нужд в плане верстки (причем на «раз-два», вообще без проблем).

Продолжаем уменьшать ширину окна браузера до значений. Происходит очередной слом:

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

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

Пояснения к исходному коду нашего примера

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

lg Используется крупная сетка для экранов по ширине больше 1200px. md Используется средняя сетка для экранов меньше 1200, но больше 992px. sm Используется малая сетка для экранов меньше 992, но больше 768px. xs Используется сверхмалая сетка для размеров экрана меньше 768px, которая всегда остается горизонтальной.

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

.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5 .col-lg-4 .col-md-5 .col-sm-1 .col-xs-6 .col-lg-4 .col-md-6 .col-sm-6 .col-xs-1

Это мастер-сетка , где скомбинированы все четыре сеточные системы (вы это можете видеть по атрибутам ячеек подобным class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , в которых перечислены префиксы классов всех четырех сеток). Сам ряд, как уже упоминалось выше, задается с помощью помещения всех составляющих его элементов в контейнер с классом class="row" (в нашем примере это контейнер на основе div).

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

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

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

Создание рядов (строк) и ячеек с помощью классов Бутстрапа

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

Точнее, создам заготовку я сам, а вам лишь предложу по аналогии с предыдущим примером скачать файлик sait.html (для этого и выберите из контекстного меню пункт «Сохранить как...»), чтобы уже потом вместе дописывать к этой «рыбе» нужные классы бутстрапа. Его также нужно будет поместить в папку Bootstrap на тот же уровень, что и созданный нами в первой статье файлик index.html (и setka.html, с которым мы работали чуть выше).

Если вы посмотрите исходный код файла sait.html, то увидите, что в нем уже подключен Бутстрап и jquery, а также добавлен контент для имитации внешнего вида среднестатистической вебстраницы. Да, еще папочка с используемыми на этой странице изображениями вам понадобится. Скачать ее можно отсюда — img.zip . Просто распакуйте архив и поместите папку img (проверьте, чтобы внутри нее лежали файлы изображений, а не еще одна папка img) в папку Bootstrap на один уровень с файлом sait.html. Структура получится такая:

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

В исходном Html коде файла sait.html я использовал , чтобы показать границы предполагаемых мною рядов (строк), для которых мы будем настраивать отображение колонок с использование каких-то сеточных систем Бутстрапа. Рядов всего четыре (они пронумерованы на приведенном скриншоте) — хедер (шапка с названием сайта и логотипом), заголовок и описание страницы, содержательная часть (основной контент, состоящий из анонсов четырех статей) и футер.

Теперь нам нужно будет добавить в файл sait.html разметку Бутстрапа, которая. Для создания рядов, как вы помните, достаточно будет заключить все его содержимое в контейнер (чаще всего это теги Div, хотя могут быть и другие) и прописать в нем класс class="row" . Для первого ряда это будет выглядеть так:

сайт

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

Использование разных сеток для создания колонок с контентом при разной ширине экрана

Теперь давайте займемся формированием ячеек в тех строках (рядах), где это имеет смысл делать. Вполне логичным будет разместить анонсы статей (из третьего ряда) в четыре колонки, а при уменьшении ширины экрана пусть эти четыре колонки преобразуются в две. Как это сделать? Давайте посмотрим.

Итак, в Bootstrap 3 имеет место быть 12-ти колоночная сетка, о которой мы говорили выше. Раз мы задумали сделать четыре колонки с анонсами, то было бы логичным сделать их равными по ширине, а значит каждая из колонок будет шириной в три клетки (ячейки) нашей невидимой сеточной системы (вне зависимости от того, какую по размеру сетку мы выберем — сверхмалую, малую, среднюю или большую).

Какую сетку выбрать для работы? Давайте возьмем для начала среднюю, как компромиссный вариант. В этом случае в контейнеры всех четырех ячеек нужно будет добавить класс «col-md-3» — . Покажу на примере кода одной ячейки, чтобы не загромождать статью:

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

Правда, при уменьшении окна браузера до ширины меньшей точки слома (в случае используемой нами средней сетки это будет 992 пикселя), все анонсы опять выстроятся в столбик, что не есть хорошо, ибо юзабилити в этом случае снижается (разрешение в почти 1000 пикселей позволяет более плотно располагать информацию). Для исправления этой ситуации можно добавить еще одну сетку из арсенала Бутстрапа для тех же самых ячеек с анонсами. Как это сделать? Давайте посмотрим.

Давайте с помощью префиксов «col-xs-6» к названию класса в каждую ячейку с анонсом (в результате получится составной класс class="col-md-3 col-sm-6"). Выглядеть это будет так (на примере одной ячейки):

Google AdWords - создание групп

Текст анонса.

Как видите, мы здесь нарушили недавно озвученное правило, что числа после префиксов одной сетки во всех ячейках в сумме должны давать 12. У нас же получилось 24 (четыре раза по шесть). Но сделали мы это специально, чтобы добиться желаемого результата — получить вместо четырех две колонки при проходе точки срыва для средней сеточной системы Bootstrap (это 992 пиксела). Т.е. ячейки расположатся в двух строках по две штуки в каждой:

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

Если же вы хотите, чтобы четыре колонки при уменьшении ширины экрана превращались в две, а потом уже в одну колонку, то следует использовать вместо «col-xs-6» малую сеточную систему с помощью «col-sm-6» :

Яндекс Директ - основы создания кампании

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

Настраиваем шапку вебстраницы с помощью Bootstrap 3

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

сайт

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

Правда при использовании большой сетки слом происходит на довольно-таки больших разрешениях экрана (окна браузера, в нашем случае, ибо мы там имитируем устройства с различной шириной экрана). После чего ячейки складывают по вертикали. Чтобы этого избежать, мы добавим еще одну сетку Bootstrap 3 для первого ряда . Думаю, что подойдет малая сеточная система (префикс класса col-sm). Тогда код будет выглядеть примерно так:

сайт

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

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

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

Для этого нужно будет все содержимое вебстраницы (все, что заключено в тегах Body) обернуть в контейнер Div с одноименным классом — . Т.е. ставите этот тег сразу после открывающего тега Body, а закрываете его перед вызовом скриптов, которые расположены непосредственно перед закрывающим тегом Body. После этого текст уже не будет упираться в окно браузера.

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

Продолжение следует >>> (Вы можете подписаться на рассылку , чтобы его не пропустить)

А вот и продолжение вышло: (но вы все равно подписывайтесь — будет еще много интересного и полезного).

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

Текущая версия v3.3.2.

Bootstrap CDN

$ bower install bootstrap

Что включено

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

Файловая структура Bootstrap 3

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

Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff

Это основная форма Bootstrap : скомпилированные файлы готовы для быстрого использования в любом веб-проекте. Предоставлены сборки CSS и JS (bootstrap.*) и минимизированный вариант (bootstrap.min.*). В качестве дополнительной опции для Bootstrap включены шрифты Glyphicons.

Исходный код Bootstrap 3

Исходный код Bootstrap включает прекомпелированные CSS, JavaScript и шрифты, вместе с исходным Less, JavaScript и документацией. Для наглядности посмотрите приведенный пример ниже.

Bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/

less/ , js/ , шрифты/ с иконками. Папка dist/ включает в себя все перечисленные скомпилированные файлы, указанные в разделе выше. Папка docs/ содержит документацию и примеры/ использования Bootstrap. Кроме того, находится информация о лицензиях и развитии предыдущих версий.

Сообщество

Оставайтесь в курсе развития Bootstrap. Обратитесь к сообществу за полезной информацией.

Поддержка Bootstrap на русском языке Шаги для блокировки адаптивного просмотра

Не создавайте с именем viewport как об этом сказано в описании CSS

Отмените width , .container для каждого уровня разметки определенной ширины, например так: width: 970px !important; Убедитесь, что этот код идет после включения основного кода Bootstrap CSS. При желании можно избежать!important с медиа-запросами или со специальным селектором.

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

Для макета разметки используйте классы.col-xs-* как дополнение или вместо классов medium/large. Разметка с классом xs (extra small) масштабируется для всех размеров мониторов.

Вам понадобится Respond.js для IE8 (поскольку существуют медиа-запросы и они должны обрабатываться). Это заблокирует свойство "мобильность сайта" Bootstrap.

Шаблон Bootstrap с заблокированной адаптивностью

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

Переход с v2.x на v3.x

Посмотрите документацию о переходе со старой версии Bootstrap на v3.x? Ознакомьтесь с руководством по переходу .

Браузеры и поддержка устройств

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

Поддержка браузерами

В частности, мы поддерживаем последние версии из следующих браузеров и платформ. На платформе Windows, мы поддерживаем Internet Explorer 8-11 . Более конкретная информация поддержки предоставлена ниже.

Chrome Firefox Internet Explorer Opera Safari Android iOS Mac OS X Windows


Поддерживается	Не поддерживается	N/A	Не поддерживается	N/A
Поддерживается	N/A		Не поддерживается	Поддерживается
Поддерживается	Поддерживается		Поддерживается	Поддерживается
Поддерживается	Поддерживается	Поддерживается	Поддерживается	Не поддерживается

Bootstrap должен достаточно хорошо выглядеть и вести себя в Chromium и Chrome для Linux, Firefox для Linux, и Internet Explorer 7, хотя они официально не поддерживаются.

Internet Explorer 8 и 9

Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js , чтобы разрешить поддержку медиа запросов.

Свойство Internet Explorer 8 Internet Explorer 9 border-radius box-shadow transform transition placeholder

Не поддерживается	Поддерживается
Не поддерживается	Поддерживается
Не поддерживается	Поддерживается с префиксом -ms
Не поддерживается
Не поддерживается

Чтобы привлечь внимание, мы включили это в качестве примеров в документации Bootstrap.

Процентное округления в Safari

В версиях Safari v6.1 для OS X и Safari для iOS v7.0.1, при использовании класса разметки.col-*-1 , движок Safari имеет некоторые проблемы с количеством десятичных знаков. То есть если вы имеете 12 отдельных колонок разметки, вы заметите, что они будут более короткими по сравнению с другими рядами колонок. Здесь можно немного изменить (), но у вас есть несколько вариантов:

Добавить.pull-right в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)

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

Модаль, navbars, и виртуальные клавиатуры Переполнение и прокрутка

Поддержка overflow: hidden для элемента достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в .

Виртуальная клавиатура

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

Navbar Dropdowns

Элемент.dropdown-backdrop не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).

Браузерное масштабирование

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

Выводы на принтер

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

Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
Добавте пользовательские запросы, чтобы изменить размер разметки точек останова только для печатных СМИ.

Android stock браузер

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select меню

On elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

var nua = navigator . userAgent var isAndroid = (nua . indexOf ("Mozilla/5.0" ) > - 1 && nua . indexOf ("Android " ) > - 1 && nua . indexOf ("AppleWebKit" ) > - 1 && nua . indexOf ("Chrome" ) === - 1 ) if (isAndroid ) { $ ("select.form-control" ). removeClass ("form-control" ). css ("width" , "100%" ) }

Поддержка третьих сторон

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

Размерность блоков

В зависимости от контекста, вы можете переопределить box-sizing только там, где это необходимо (Вариант 1), либо сбросить его для целых областей (Вариант 2).

/* Box-sizing resets * * Reset individual elements or override regions to avoid conflicts due to * global box model settings of Bootstrap. Two options, individual overrides and * region resets, are available as plain CSS and uncompiled Less formats. */ /* Option 1A: Override a single element"s box model via CSS */ .element { -webkit-box-sizing : content - box ; -moz-box-sizing : content - box ; box-sizing : content - box ; } /* Option 1B: Override a single element"s box model by using a Bootstrap Less mixin */ .element { .box-sizing (content-box ); } /* Option 2A: Reset an entire region via CSS */ .reset-box-sizing , .reset-box-sizing *, .reset-box-sizing * :before , .reset-box-sizing * :after { -webkit-box-sizing : content - box ; -moz-box-sizing : content - box ; box-sizing : content - box ; } /* Option 2B: Reset an entire region with a custom Less mixin */ .reset-box-sizing { & , *, * :before , * :after { .box-sizing (content-box ); } } .element { .reset-box-sizing (); }

Доступность

Bootstrap следует общим веб-стандартам, и—при минимальных дополнительных усилиях—может быть использован для создания сайтов, доступных через AT .

Пропуск навигации

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

Skip to main content The main page content.

Вложенные заголовки

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

Дополнительные ресурсы Она позволяет: Она не требует:

Включать исходный код Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
Предоставлять изменения, которые вы внесли в Bootstrap для демонстрации в проекте Bootstrap (хотя обратная связь приветствуется)

Полная версия лицензии Bootstrap размещена в проекте репозитория более подробно.

Настройка Bootstrap

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

После того как вы скачали и подключили стили и скрипты Bootstrap, вы можете настроить их компоненты. Чтобы это сделать, просто создайте новую таблицу стилей (LESS, если желаете, или просто CSS).

Простую сборку или минимизированную?

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

Настройка составных

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

Мы определяем легкая настройка как поверхностные изменения, например, изменение цвета и шрифта для существующих компонентов Bootstrap. Примером легкой настройки является

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

Что такое Bootstrap?

Бутстрап – это бесплатный фреймворк на базе css и JavaScript, предоставляющий целый ряд встроенных инструментов для создания адаптивных веб-сайтов, а точнее их front-end разработки. Изначально был создан для внутреннего использования компанией Twitter и носил название «Twitter Bootstrap», но в дальнейшем вырос в самостоятельный проект. Данная библиотека может быть использована в работе как со статическими html-файлами, так и с различными системами управления контентом, в которых поддерживаются внешние стили.

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

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

Что же делает Бутстрап популярным среди разработчиков? Давайте рассмотрим ряд неоспоримых плюсов, которые мы получаем в работе с ним:

открытый исходный код, то есть весь функционал предоставляется совершенно бесплатно;
встроенная 12-колоночная сетка. Достаточно просто добавить нужный класс html-элементу, чтобы задать ему необходимо позиционирование относительно других объектов и каркаса страницы;
адаптивность. Ранее я писала о том, и почему это однозначно необходимо делать. В Бутстрапе же данная опция включена по умолчанию и предполагает оптимизацию сайта под десктопные девайсы, планшеты и смартфоны. Помимо этого, вы можете сами установить любые варианты расширений вручную;
вариативность в оформлении самых часто используемых на веб-страницах элементов. С помощью специальных классов легко можно управлять отображением и поведением событий, вкладок, кнопок и прочего. Предусмотрены и готовые решения для динамических элементов. Так, к примеру, чтобы создать слайдер, достаточно найти необходимый код в документации, скопировать его и разместить в своем блоге, заменив картинки из примера своими собственными. Как это работает на практике, я покажу вам дальше на примере установки в WordPress меню Bootstrap;
иконочный шрифт. Приятный бонус в виде нескольких сотен иконок Glythicons в формате векторной графики;
кастомизация, т.е. возможность выборочного использования тех или иных возможностей фреймворка, например: подключение к проекту только сетки и шрифтов, или только медиа, или комбинации из нескольких опций;
легкость настройки – стандартные стили переопределяются простым созданием новых правил css, без применения «! important »;
отличная документация с примерами. Несмотря на то, что официальный сайт англоязычный, не составит труда найти в интернете его русскоязычный аналог.

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

Подключение фреймворка к Вордпрессу

Для начала скачиваем библиотеку с официального сайта — https://getbootstrap.com: жмем «Download Bootstrap» и в открывшейся вкладке «Getting started» выбираем вариант «Download Bootstrap». На текущий момент стабильной версией остается Bootstrap 3, но уже выпущена в режиме тестирования четвертая версия. Она имеет некоторые отличия от нынешней, но если вы изучите Бутстрап 3, то обновленный вариант фреймворка не вызовет никаких вопросов.

Распаковываем архив и видим 3 основных папки: css, js , fonts . Файлы, содержащие в своем названии «min» ничем не отличаются от одноименных без этой частицы. Она обозначает, что код записан без пробелов, в одну строку, для уменьшения веса файла без потерь в функционале. Такой формат нечитабелен, но как раз он зачастую и подключается к проекту. Это позитивно влияет на . В папках css и js лежат соответственно файлы стилей и скриптов, а в папке fonts – те самые векторные иконки, которые упоминались выше. По сути, мы видим здесь один шрифт, представленный в нескольких форматах.

Один из удобных способов размещение файлов фреймворка в проекте – создание отдельной папки. Для этого в корне сайта в каталоге wp-content – themes – название_вашей_темы формируется папка libs , где в дальнейшем могут находиться другие библиотеки, используемые в проекте. И уже в ней – папка bootstrap , куда мы и копируем все содержимое, извлеченное из архива.

Как мы уже отмечали ранее, существует возможность выкачать только отдельный функционал Бутстрапа, например сетку или иконки. Это реализовывается на странице официального сайта «Customize».

Здесь необходимо снять галочки с тех компонентов и плагинов библиотеки, которые вы не хотите подключать к проекту. А затем, прокрутив страницу вниз, загрузить кастомизированный вариант Bootstrap, нажав «Compile and Download».

Дополнительно, для переопределения бутстраповских стилей и «родных» стилей темы, можно создать в папке шаблона в каталоге css файл style.css . Если вы не знакомы со структурой шаблона Вордпресс, статья о том, обязательна к прочтению.

Чтобы подключить Bootstrap к WordPress, открываем в текстовом редакторе файл functions. php , который лежит в каталоге вашего активного шаблона. Находим функцию подключения скриптов (она может называться, например, funct ion twentysixteen_ scripts (){} , по названию темы) и вставляем следующий код:

1 2 3

// Bootstrap stylesheet. wp_enqueue_style( "bootstrap-style" , get_template_directory_uri() . , array () , " " ) ;

// Bootstrap stylesheet. wp_enqueue_style("bootstrap-style", get_template_directory_uri() . "/libs/bootstrap/css/bootstrap.min.css", array(), " ");

— данная строка подключает минимизированный файл стилей фреймворка. Первый параметр функции (" bootstrap — style ") – произвольное название подключаемого объекта.

Следующий параметр (get _ template _ directory _ uri () . "/ libs / bootstrap / css / bootstrap . min . css " ) – путь к файлу. Здесь с помощью функции get _ template _ directory _ uri () мы получаем путь к папке с активным шаблоном, а затем «пристыковываем» непосредственно путь к файлу в этом шаблоне — . "/ libs / bootstrap / css / bootstrap . min . css " .

Продолжаем вставлять код:

1 2 3 4

//Mytheme stylesheet. wp_enqueue_style( "mytheme-style" , get_template_directory_uri() . "/css/style.css" , array () , " " ) ;

//Mytheme stylesheet. wp_enqueue_style("mytheme-style", get_template_directory_uri() . "/css/style.css", array(), " ");

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

И последняя строка, которая нам понадобится для подключения Bootstrap к WordPress:

1 2 3 4

//Bootstrap js wp_enqueue_script( "bootstrap-js" , get_template_directory_uri() . , array ("jquery" ) , " " ) ;

//Bootstrap js wp_enqueue_script("bootstrap-js", get_template_directory_uri() . "/libs/bootstrap/js/bootstrap.min.js", array("jquery"), " ");

— в конце мы подключаем минимизированный файл скриптов. Здесь нам понадобится третий параметр функции – array () , который отвечает за очередность подключения скриптов. Дело в том, что Бутстрап зависит от библиотеки jQuery. Если на момент, когда сервер будет подгружать наш фреймворк, jQuery еще не будет подключено к проекту, скрипты Бутстрапа не сработают. Саму библиотеку jQuery нам загружать не надо, поскольку Вордпресс делает это автоматически. Но чтобы подключение происходило в необходимой нам последовательности, мы определим, что js-скрипты Bootstrap должны всегда идти после jQuery. Именно это и делает строка array ("jquery") .

Если же вы создаете Бутстрап-тему для WordPress с нуля или просто не хотите смешивать все скрипты в одном месте, предлагаю вам создать отдельную функцию для подключения Bootstrap 3 к WordPress. В конце файла functions.php расположите следующий код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function load_bootstrap() { function load_bootstrap() { // Bootstrap stylesheet. wp_enqueue_style( "bootstrap-style" , get_template_directory_uri() . "/libs/bootstrap/css/bootstrap.min.css" , array () , " " ) ; //Mytheme stylesheet. wp_enqueue_style( "mytheme-style" , get_template_directory_uri() . "/css/style.css" , array () , " " ) ; //Bootstrap js wp_enqueue_script( "bootstrap-js" , get_template_directory_uri() . "/libs/bootstrap/js/bootstrap.min.js" , array ("jquery" ) , " " ) ; } add_action("wp_enqueue_scripts" , "load_bootstrap" ) ;

function load_bootstrap() { function load_bootstrap() { // Bootstrap stylesheet. wp_enqueue_style("bootstrap-style", get_template_directory_uri() . "/libs/bootstrap/css/bootstrap.min.css", array(), " "); //Mytheme stylesheet. wp_enqueue_style("mytheme-style", get_template_directory_uri() . "/css/style.css", array(), " "); //Bootstrap js wp_enqueue_script("bootstrap-js", get_template_directory_uri() . "/libs/bootstrap/js/bootstrap.min.js", array("jquery"), " "); } add_action("wp_enqueue_scripts", "load_bootstrap");

— где load _ bootstrap () – произвольное название созданной нами функции, а последняя строка дает ее движку на выполнение.

Основные возможности Бутстрапа и как это работает

Чтобы понять, каким образом возможно взаимодействие WordPress и Bootstrap, давайте разберем сам принцип работы фреймворка.

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

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

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

Контент размещается в ячейках. Каждая строка разбита на 12 ячеек – html-элементов с классами .col – lg-*, col- md-*, col- sm-*, col- xs-* . Эти классы определяют ширину ячеек для телефонов (xs ), планшетов (sm ), десктопных девайсов с небольшим монитором (md ), для экраном с большим расширением (lg ). А вот какая цифра в пикселях подразумевается под каждым из этих расширений:

Вместо звездочки в названии класса указывается число от 1 до 12, равное количеству ячеек, которое должен занимать элемент. Но сумма всех ячеек в пределах одной строки не должна превышать 12. Вот пример кода:

А вот так он будет выглядеть в браузере:

Подробно и с примерами, как работать с сеткой Бутстрап, описано в документации фреймворка на официальном сайте в разделе «CSS» — «Grid system».

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

. table – базовый стиль, только горизонтальные границы;
. table- striped – чередование серых и белых строк в таблице;
.table-bordered – формирование всех границ строк и столбцов;
. table- hover – подсветка строки таблицы при наведении;
. table- responsive – этот класс делает таблицу адаптивной ко всем устройствам.

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

Вот так, например, необходимо прописать ваш элемент «button», чтобы получить зеленую кнопку в стиле Bootstrap 3: Success

Изображения . Для элементов «img» тоже есть интересные решения:

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

Как сформировать меню Bootstrap на Вордпресс

Мы с вами уже знаем, как подключить Bootstrap к WordPress , и теперь можем рассмотреть пример практического применения фреймворка для блога. Для этого мы заменим существующее меню активной темы адаптивной навигацией Бутстрап. Я буду использовать в примере тестовый шаблон на базе темы Вордпресс «Twenty Siхteen», где у меня уже создано двухуровневое меню.

Находим код меню «Default navbar», предлагаемый на официальном сайте фреймворка в разделе «Components» — «Navbar»:

Редактируем по необходимости. Я уберу, например, ссылку на логотип (Brand), форму и список с классом . navbar- right . А эту часть:

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

— заменяем следующим кодом:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Конечный результат навигации размещаем в соответствующем файле вместо существующей. У меня это файл header.php :

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

Toggle navigation

В строке " menu " => " top _ menu " указывается меню, которое вы назначили основным в админпанели. " depth " => 2 – уровень вложенности для тех случаев, если есть выпадающие пункты. " menu _ class " => " nav navbar — nav " – здесь указываются классы меню из Бутстрапа, которые мы использовали.

Но для интеграции навигации Bootstrap в WordPress нам потребуется еще один файл со специальным классом – wp _ bootstrap _ navwalker . php . Его можно скачать с GitHub по ссылке — . Здесь нажимаем кнопку «Clone or Download» и выбираем «Download ZIP».

Извлекаем файлы из архива и в папке «wp-bootstrap-navwalker-master» копируем необходимый файл.

wp _ bootstrap _ navwalker . php размещаем в папке нашей темы. Возвращаемся к файлу functions.php и в начале подключаем скачанный класс:

//Register custom navigation walker

require_once ("wp_bootstrap_navwalker.php");

Наша адаптивная навигация Бутстрап для Вордпресс-шаблона готова. Дальше дело остается за стилями. Вот такое меню получилось у меня:

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

Все детали подключения Bootstrap к WordPress и создания меню на основе фреймворка можно узнать из видео:

Если же вам некогда изучать все нюансы работы с библиотекой на WordPress, воспользуйтесь плагинами Bootstrap, самые популярные из которых – WordPress Twitter Bootstrap CSS и Easy Bootstrap Shortcode .

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

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

Установка Bootstrap

Подробно останавливаться на этой теме я не буду, потому что уже писал отдельную статью про установку — . Там описана установка на wordpress. Если вам нужно просто подключить файлы фреймворка к 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 . Вот такие стили для него:
Как видите, в меню мы добавили логотип, два простых пункта, выпадающий пункт, форму поиска. То есть получилось много элементов. Вы можете легко кастомизировать меню под себя, добавив ему свои классы. Но сейчас моя цель просто показать вам этот компонент.

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

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

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

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

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

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

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

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

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

Формы распространения платформы Twitter Bootstrap

Для изучения платформы Twitter Bootstrap необходимо иметь:

Скомпилированная и минимизированная версия платформы Twitter Bootstrap 3 - это основная форма поставки этой платформы, которую выбирают большинство веб-разработчиков. Данная форма поставки отличается простотой её подключения к вашему сайту, так как она содержит предварительно подготовленные и минимизированные файлы CSS и JavaScript, а также иконки в формате шрифта.

Версия платформы с исходными кодами включает в себя, кроме предварительно откомпилированных файлов CSS и JavaScript, ещё исходные коды этой платформы (файлы Less и JavaScript), документацию на английском языке, различные примеры, информацию о лицензии и многое другое.

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

Но перед тем как перейти к подключению платформы Twitter Bootstrap к веб-странице необходимо рассмотреть её структуру на файловом уровне.

Файловая структура платформы Bootstrap 3

После загрузки, предварительно скомпилированной и минимизированной версии Bootstrap 3 на компьютер, ее необходимо распаковать с помощью любого архиватора в каталог вашего веб-проекта.

Если эту папку рассмотреть, то мы увидим, что платформа Twitter Bootstrap состоит из 3 каталогов ("CSS", "FONTS" и "JS") и файлов.

Файлы платформы представлены в 2 видах:

1 вид - это предварительно скомпилированные файлы CSS и JavaScript (bootstrap.css , bootstrap-theme.css , bootstrap.js)
2 вид - это предварительно скомпилированные и минимизированные (сжатые) файлы CSS и JavaScript (bootstrap.min.css , bootstrap-theme.min.css , bootstrap.min.js)

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

Кроме этих файлов, в данную поставку входят ещё 4 файла шрифта "Glyphicons" (glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff), которые отличаются друг от друга только форматом, в котором хранится данный шрифт. Шрифт "Glyphicons" состоит из 200 иконок из набора "Glyphicon Halflings".

Внимание: для работы скриптов платформы Twitter Bootstrap 3 (bootstrap.js и bootstrap.min.js) необходимо иметь подключенную последнюю версию библиотеки jQuery.

Создание веб-страницы на HTML 5 и подключения к ней платформы Twitter Bootstrap 3

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

Шаг 1. Создание HTML страницы

Откройте ваш любимый редактор кода и создайте файл с именем index и расширением html . Наберите или вставьте в текстовый редактор, следующий код:

DOCTYPE html > Basic Bootstrap Template Нажмите на кнопку

Шаг 2. Подключение платформы Bootstrap 3 к веб-странице

Чтобы подключить платформу Twitter Bootstrap 3 к веб-странице необходимо выполнить следующее:

Подключить скомпилированный и минимизированный файл Bootstrap CSS (bootstrap.min.css);

Подключить последнюю версию библиотеки jQuery, которая необходимо для работы скриптов Bootstrap;

Подключить скомпилированный и минимизированный файл Bootstrap JavaScript (bootstrap.min.js).

Примечание: файлы JavaScript лучше всего подключать перед закрывающим тегом body (т.е. перед ), так как это повысит скорость загрузки основного контента веб-страницы.

DOCTYPE html > Basic Bootstrap Template Нажмите на кнопку $ (function () { $ ("" ).popover() })

Шаг 3. Сохранение веб-страницы и проверка работы компонента Bootstrap

После создания веб-страницы, к которой подключена платформа Twitter Bootstrap 3, её необходимо сохранить в файл с расширением html (Например: "index.html"). После этого созданную веб-страницу необходимо открыть в веб-браузере и проверить работу компонента Bootstrap "Popovers".

Примечание: При сохранении файла веб-страницы в текстовом редакторе обратите внимание на его расширение, которое должно быть "html". Так как некоторые текстовые редакторы, такие например как блокнот, автоматически сохраняют файлы с расширением "txt".

Файловая структура проекта, в основу которого положена платформа Twitter Bootstrap 3:

Демонстрация работы компонента Bootstrap "Popovers":

Нажмите на кнопку