Ребята, я считаю, что Bootstrap — очень классная вещь. Почему так, я попытаюсь объяснить в этой статье. Что ж, поехали Я сразу извиняюсь за то, что почти вся первая половина статьи написана без картинок, там только теория, объяснение работы сетки. Но это очень важно! Кому из вас надо, тот возьмет в себя в руки, прочитает, и, я надеюсь, поймет. Вторая половина статья уже воспринимается попроще, там больше примеров со скриншотами.
Bootstrap — что это?Итак, начинаем с важного вопроса. Бутстрап — это css и js-фреймворк, по сути, по сути, набор файлов с готовым написанным кодом. Цель разработчиков практически любого фреймворка — упростить разработку сайта себе и другим, кому будет доступен инструмент. В случае с Bootstrap он полностью бесплатен, так что вы можете использовать его любым образом, редактировать исходный код и как угодно переделывать фреймворк под себя. Это отлично.
Установка BootstrapЕсли вам нужно просто подключить файлы фреймворка к html-документу (например, для практики), просто скачайте фреймворк с официального сайта getbootstrap.com , скопируйте его файлы в проект и подключите те, которые вам нужны. Сделаю краткий обзор этих файлов:
Это стандартный набор фреймворка. На самом деле вы легко можете его кастомизировать и изменять под себя. Например, вообще не использовать скрипты или подключить одну только сетку. В общем, об этом мы также поговорим.
Русская документация 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 специальных класса, которые предназначены для управления размерами блоков на разной ширине, вот они:
Вот такие 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 . В таком случае блок будет скрыт на всех экранах, кроме самых узких. Итак, классы адаптивных утилит прописываются так:
Ну и парочку примеров, чтобы было понятно:
Вот так вот все работает. Именно так и никак иначе. Надеюсь, вы это поняли. Давайте закрепим на практике. У нас есть тестовый шаблон, хоть и очень примитивный.
Задача: сделать так, чтобы на маленьких экранах исчезала боковая колонка, а на самых маленьких еще и один товар. И чтобы на 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; }
Вот так сейчас выглядит сайт:
По умолчанию таблица будет растянута на все окно, поэтому оборачивайте ее в блок с ограниченной шириной, чтобы ограничить размеры. По умолчанию она выглядит ужасно, но если добавить тегу table класс table , все будет уже гораздо приятнее:
| Виден | Скрыто | Скрыто |
| Скрыто | Виден | Скрыто |
| Скрыто | Скрыто | Виден |
| Скрыто | Виден | Виден |
| Виден | Скрыто | Виден |
| Виден | Виден | Скрыто |
Измените размер окна или откройте данную страницу на мобильном устройстве для тестирование вышеуказанных классов в действии.
Виден на...Зеленая отметка означает что блок виден в текущем окне шаблона.
- Телефон✔ Телефон
- Планшет✔ Планшет
- Монитор✔ Монитор
Здесь зеленая отметка блока означает что он скрыт в текущем окне шаблона.
- Телефон✔ Телефон
- Планшет✔ Планшет
- Монитор✔ Монитор
Перед загрузкой убедитесь, что у вас имеется редактор кода (мы рекомендуем Sublime Text 3) и некоторые знания в области HTML и CSS. Здесь мы не будем затрагивать исходные файлы, но скачать и изучить их Вы всегда можете сами. Мы сфокусируем наше внимание на начале работы с компилированными файлами Bootstrap.
Загрузка компилированных файловСамый быстрый способ начать работу: получить компилированные и минимизированные версии наших CSS, JS, и изображений. Никаких документов или исходных файлов.
2. Структура файловВ загруженных файлах вы обнаружите следующую структуру и содержание, сгруппированные логически по общим свойствам и содержащие обе версии: минимизированную и компилированную.
После загрузки распакуйте сжатую папку, чтобы увидеть структуру (компилированого) Bootstrap. Она должна быть примерно такой:
bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min . css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min . js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README . mdЭто основная форма Bootstrap: компилированные файлы для быстрого и легкого использования почти в любом Web-проекте. Мы предоставляем вам компилированные CSS и JS (bootstrap.*), и также компилированные и минимизированные CSS и JS (bootstrap.min.*). Файлы изображений сжаты при помощи ImageOptim , приложения Mac для сжатия изображений в PNG.
Пожалуйста, обратите внимание, что все плагины JavaScript требуют jQuery.
3. Что включеноBootstrap оснащен HTML, CSS и JS для всех видов работы, они все перечислены в категориях, которые вы можете найти в верхней части страницы .
Разделы документов Поддерживаемые элементыОбщие стили для тела (body) для сброса типа и фона, стилей ссылок, сетки шаблонов и двух простых элементов разметки.
Стили CSSСтили для общих элементов HTML: оформления, кода, таблиц, форм и кнопок. Также включает в себя Glyphicons , великолепный набор иконок.
КомпонентыОсновные стили для простых компонентов интерфейса: вкладок и кнопок, панелей навигации, сообщений, заголовков страниц и др.
Плагины JavascriptКак и компоненты, эти плагины Javascript являются интерактивными компонентами для всплывающих подсказок, информационных блоков, модальных компонентов и др.
Список компонентовВсе вместе компоненты и плагины Javascript содержат следующие элементы интерфейса:
- Группы кнопок
- Выпадающие списки кнопок
- Навигационные вкладки, кнопки и списки
- Панель навигации
- Ярлыки
- Бейджи
- Заголовки страниц и элемент hero
- Миниатюры
- Сообщения
- Индикаторы процесса
- Модальные элементы
- Выпадающие списки
- Всплывающие подсказки
- Информационные блоки
- Элемент «Гармошка»
- Элемент «Карусель»
- Опережающий ввод с клавиатуры
После короткого введения мы сфокусируем внимание на использовании Bootstrap. Для этого мы применим основной шаблон HTML, который включает все элементы, перечисленные в .
Вот как выглядит типичный файл HTML :
Чтобы сделать такой шаблон Bootstrap , просто присоедините соответствующие файлы CSS и JS:
И все настроено! Добавив эти два файла, вы можете с помощью 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 |
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, об основных преимуществах данной библиотеки и о функционале фреймворка, который может помочь нам в создании современной адаптивной темы. Изучайте туториалы и экспериментируйте!
Обзор проекта, компонентов, а так же как начать с простого шаблона.
1. СкачатьПеред скачиванием убедитесь что у Вас имеется удобный редактор кода (мы рекомендуем Sublime Text 2), а так же какое-либо понимание и знание технологий HTML и CSS. Здесь мы не дадим описание исходных файлов, но они находятся в свободном доступе на GitHub.
2. Файловая структураПосле скачивания Вы увидите следующую структуру и файлы, Логически сгрупированые и предоставленные в скомпилированном и минифицированном виде.
Разархивировав скаченный архив (скомпилированного) Bootstrap"а. Вы увидите следующую структуру:
Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js ├── img/ │ ├── glyphicons-halflings.png │ ├── glyphicons-halflings-white.png └── README.md
Это основной вид Bootstrap"а: скомпилированные файлы для начала быстрой работы, просто загрузите на сервер и Вы готовы к работе. Мы предоставили скомпилированные CSS и JS (bootstrap.*), наряду со скомпилированными и минифицированными CSS и JS (bootstrap.min.*) файлами. Картинки были сжаты через ImageOptim , приложение для Mac, позволяющее сжимать PNG-файлы.
Учитывайте что все JavaScript-плагины основаны на jQuery.
3. Что включено?Bootstrap заряжен порцией высококачественного HTML, CSS, и JS для любого типа веб-разработки.
Документация ШаблонГлобальные стили для элемента body: изменение background"а, ссылки на стили, сетка шаблона и два простых макета.
CSSСтили основных HTML элементов, оформление и шрифты, код, таблицы, формы и кнопки. Включая Glyphicons - набор иконок.
КомпонентыОсновные стили компонентов интерфейса: вкладки и навигационные кнопки, навигационный бар (navbar), сообщения, заголовки страниц и т.п.
Javascript-плагиныСхоже с компонентами, Javascript-плагины оживляют ваш веб-проект, и Компоненты такие как всплывающие подсказки (tooltips), всплывающий контент (popovers), всплывающие окна (modals) и много других вкусностей.
Список компонентовВместе Компоненты и Javascript-плагины представляют следующий список элементов интерфейса:
- Группы кнопок
- Кнопки с выпадающими списками
- Элементы навигации: вкладки, кнопки и списки
- Навигационный бар (Navbar)
- Этикетки
- Бейджи
- Заголовки страниц и элемент hero
- Миниатюры
- Сообщения
- Индикаторы процесса (прогресса)
- Всплывающие окна
- Выпадающие списки
- Всплывающие подсказки
- Всплывающий контент
- Стек вкладок
- Каруселька
- Вспомогательное меню input элемента (Typeahead)
В будущих обзорах, мы рассмотрим эти компоненты по отдельности более подробно. А пока, посмотрите на каждую из них в документации для получения информации о том, как их использовать.
4. Основной HTML шаблонВместо чтения красочных описаний Bootstrap"a, мы предлагаем Вам начать его использовать. Для начала создайте базовый HTML шаблон, который будет включать в себя все что писано в .
Затем обратите внимание на стандартный HTML-файл :
Bootstrap 101 Шаблон Привет! Я Bootstrap...
Что бы Забутстреппить эту страничку, просто добавьте линк на CSS и JS файлы:
Bootstrap 101 Шаблон Привет! Я Bootstrap...
Все готово! Благодаря этим файлам, вы можете начать разрабатывать ваш сайт или приложение на Bootstrap"е.
