Bootstrap шаблоны на полный экран. Создание темы для WordPress с помощью Bootstrap: когда применять? Устанавливаем Bootstrap на wordpress
Темы WordPress на фреймворке Bootstrap совмещают в себе лучшие черты функционала CMS и техники адаптивной верстки. Наличие мобильной версии сайта стало новой нормой и положительно влияет на место в поисковой выдаче. Bootstrap воплощает идею 100% «отзывчивого» дизайна, за счет чего сайты, использующие шаблоны Bootstrap WordPress, одинаково хорошо отображаются на десктопных и мобильных устройствах. Использование медиа запросов в css фреймворка позволяет верстке автоматически подстраиваться под нужное разрешение экрана.
25 шаблонов Bootstrap WordPress на разные тематики
Крайне популярный благодаря универсальности шаблон-мультилендинг. Представляет собой подборку WordPress theme с готовым дизайном различной тематики. Во всех заготовках включены:
- регулируемые хедеры, футеры;
- настройка в визуальном редакторе без кодинга;
- вписана адаптивность под мобильные устройства;
- интеграция с популярным WooCommerce-плагином для интернет магазина.
Всего предлагается более трехсот вариантов темплейтов, из которых всегда можно выбрать подходящий под задачу.
2. Puca
Оптимизация - одна из главных «фишек» этого шаблона, о которой авторы заявляют сразу же. Вордпресс тема была отмечена как одна из лучших в 2018 году и обещает завоевать еще больше популярности в 2019. Удобные настройки «умного меню» за счет плагина Elementor помогут реализовать любую задумку без необходимости изучать веб-программирование. Уже готовы к кастомизации 350 страниц.
3. OneLove
Элегантная «чистая» тема для свадебного Internet shop, которую можно легко адаптировать под другие задачи. Авторы предлагают:
- 22 уникальных страницы;
- широкие возможности для размещения портфолио - слайдеры, настройки прокрутки;
- плагины для интернет шоппинга включены в комплект;
- разработаны внутренние страницы.
Также предлагается комплект Google-шрифтов, иконок. Все отлично адаптировано под мобильные.
4. Dentalia
Ресурс стоматологической клиники универсален по концепту дизайна, поэтому достаточно будет поменять картинки с помощью интуитивно понятного плагина конструктора Элементор, чтобы получить визитку, лендинг, небольшой сайт любой тематики. Включены широкие возможности настройки слайдеров, плагинов и других опций. Полезный плагин «До и После» поможет оценить эффекты правок и разработать собственный уникальный дизайн на основе готового.
Подборка по теме: 20 шаблонов для сайта стоматолога »
5. Knowhere Pro
- расширенной версии WooCommerce - Sumo;
- встроенным функциям календаря, ивент-менеджера;
- плагину для обработки cookie;
- возможности добавлять карты;
Все настройки в режиме онлайн, полностью визуальны, остаются интуитивно понятны, даже если подключать «продвинутые» опции.
6. Cocoon
Простая и очень эффектная тема в стиле «флэт дизайн» подойдет для landing, посвященных какому-либо продукту либо интернет магазинам. В комплекте предлагается продвинутый плагин на Ajax для расширенного поиска по модели, характеристикам. Можно размещать «трехмерные» изображения товара, давать акции на те или иные специальные предложения. Мобильная навигация такая же мощная за счет адаптивности и респонсивности.
7. iMate
Всего за 40 долларов вы получите современный, актуальный в 2019 вариант шаблона с запоминающимся оформлением, полностью совместимый с Bootstrap. Универсальный инструмент для посадочных страниц. Интегрирован с основными социальными сетями, в том числе, YouTube для вставки видео. Оптимизирован под быструю загрузку и онлайн-торговлю.
8. Stribe
Универсальная по удобству и функционалу основа для landing page и сайтов визиток. Есть все необходимое:
- визуальная настройка;
- бесконечный выбор цветовых схем;
- множество виджетов и дополнительных деталей;
Подойдет также для портфолио благодаря встроенному слайдер-меню с удобной прокруткой. Есть возможность встройки видео. Совместимость с Bootstrap.
9. Miex
Шаблон, объединяющий в себе возможности Parallax эффекта и Bootstpap, гарантирующего максимальную адаптивность, респонсивность и идеальный UX на любом устройстве. Удобство темы WordPress в том, что все настройки установлены заранее, пользователь редактирует в режиме визуального редактора, не боясь ошибиться в коде. Также адаптировано под поисковики.
10. Kallyas
Kallyas является креативной универсальной темой, которая укомплектована внушительным набором WP опций и может быть использована для eCommerce. Как и многие шаблоны WordPress Bootstrap 3, Kallyas выполнен в соответствии с концепцией mobile-first. Текстовые и видео туториалы, а также отзывчивая команда техподдержки помогут быстро разобраться с кастомизацией темы.
11. Kalium
Kalium — креативный темплейт, созданный для специалистов, чья профессиональная деятельность требует наличие информационного веб-ресурса в интернете. К теме прилагаются демо-сайты для всех видов проектов, их список постоянно пополняется. Совместимость с Bootstrap 3.x делает шаблон полностью адаптивным.
12. Jevelin
Jevelin — адаптивный шаблон Bootstrap для WordPress под сайты для бизнеса, онлайн-резюме фрилансеров, персональные веб-страницы. Разработанный с учетом последних веяний в дизайне, темплейт подойдет и под простой, и под более продвинутый проект. Встроенный плагин WooCommerce превращает сайт на Jevelin в торговую площадку.
13. Uplift
Uplift — тема с «резиновой» mobile-first версткой. Ее чистый семантический HTML5 код помогает добиться высокой производительности сайта, не жертвуя его дизайном. За счет скорости загрузки страниц, премиальных характеристик дизайна, функционала и продуктивности темплейт может стать основой под веб-проект любой тематики.
14. Foundry
Foundry — универсальный шаблон с чистым кодом и великолепным дизайном. Совместимость с WooCommerce разрешает использовать Foundry как Bootstrap шаблон интернет магазина. Тема соответствует стандартам WP, отличается внимательным отношением к деталям и работает со всеми популярными плагинами.
15. H-Code
H-Code — универсальная, творчески выполненная тема с адаптивной и retina-ready версткой. Тема оптимизирована по скорости загрузки страниц и совместима с плагином W3 Total Cache. Код и структура шаблона соответствуют seo-стандартам. H-Code станет отличным выбором для бизнес-портала, онлайн-магазина или портфолио.
16. Entrepreneur
Entrepreneur — темплейт для сайта небольшой компании, оснащенного функционалом для бронирования и онлайн записи. Плагин WooCommerce реализует возможность приема платежей и депозитов. В шаблон включено множество легко кастомизируемых форм. Он также позволяет синхронизировать расписание с Google календарем.
17. Launchkit
Launchkit — коммерческий шаблон landing Bootstrap для продающих сайтов. Благодаря появившейся в результате очередного обновления поддержке WooCommerce через лендинг можно организовать продажу товаров. Прямые призывы к действию и привлекающие внимание формы заказа успешно служат цели повышения конверсии.
18. Lambda
Lambda — адаптивная тема на Bootstrap, подходящая для любого проекта. Установить демо шаблоны Бутстрап на Lambda можно за один клик в разделе сборки сайтов. Популярный фреймворк делает дизайн их страниц адаптивным, в результате чего с любого устройства посетители видят красивый сайт. Несколько плагинов и бонусных опций включены в шаблон бесплатно. За счет поддержки WooCommerce на темплейте можно поднять интернет-магазин.
19. Kleo
Kleo — темплейт, являющийся удобным инструментом для создания интернет-сообществ и социальных сетей. Функционал соцсети обеспечивает интегрированный с темой плагин BuddyPress. Благодаря использованию Бутстрап шаблоны сайтов на Kleo прекрасно адаптируются под экраны мобильных гаджетов.
20. WPLMS
WPLMS — тема, оснащенная функционалом системы контроля обучения. Это не просто шаблон для образовательных порталов, а полноценный набор eLearning опций. Система тестировалась на высокопосещаемых (до 1 миллиона пользователей) ресурсах и в составе темы WPLMS может найти применение на сайте тренингового центра, школы, университета или частного репетитора.
21. Real Homes
Real Homes — лидер среди темплейтов под сайты агентств недвижимости, предлагающий соответствующий тематике стиль оформления веб-страниц и опции, востребованные такими сайтами. Тема позволяет создавать пакеты платной подписки для пользователей и принимать платежи через Paypal, Bank Transfer и Stripe.
22. Porto
Porto — адаптивная тема с функционалом WordPress и eCommerce. Типы проектов, под которые подготовлены ее демо шаблоны Bootstrap: магазин, лендинг, веб-студия, сайты профессиональных услуг. Используя Visual Composer, можно кастомизировать дизайн сайта, не притрагиваясь к коду. Каждый элемент страниц создаваемого на Porto веб-ресурса идеально отображается на экранах любого разрешения.
24. Education
Education — темплейт для образовательных порталов. При его разработке были задействованы последние версии фреймворков Bootstrap и Font-Awesome, сделавшие фронтенд темы проще и эффективнее. С применением темы разработано 12 уникальных демо-сайтов, среди которых есть и простые 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:
Изображения . Для элементов «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 "top_menu", "depth" => 2, "container" => false, "menu_class" => "nav navbar-nav", //Process nav menu using our custom nav walker "walker" => new wp_bootstrap_navwalker())); ?> "top_menu", "depth" => 2, "container" => false, "menu_class" => "nav navbar-nav", //Process nav menu using our custom nav walker "walker" => new wp_bootstrap_navwalker())); ?>
Конечный результат навигации размещаем в соответствующем файле вместо существующей. У меня это файл 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
В строке " 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 - мощный и элегантный, интуитивно понятный фронт-енд фреймворк, разработанный командой Twitter. Это open-source CSS и JavaScript среда разработки современных интернет проектов. Относительно молодая платформа веб-разработки, безусловно заслуживающая изучения, предлагает множество полезных вещей: стили компонентов интерфейса (заголовки, вкладки, навигационные панели…) и HTML-элементов (кнопоки, формы, шрифты…), адаптивные queries, JS-плагины и т.д.
Демо | Скачать
18. Sonic Creative Portfolio
Sonic – бесплатный адаптивный шаблон на Bootstrap версии 3.1.1. со слайдером FlexSlider на главной странице. Шаблон основан на и подойдет для создания креативного портфолио.
19. Powerful
Powerful – адаптивный шаблон на Bootstrap, использующий в качестве основных элементов дизайна. Ключевые особенности шаблона: гибкий макет, чистый дизайн, слайдер на главной странице, фильтр по категориям для портфолио.
Демо | Скачать
20. 403 Karma
403 Karma — бесплатный HTML5 шаблон на основе Bootstrap. Благодаря адаптивной верстке, плоскому дизайну и эффектному параллакс-сколлингу шаблон отлично выглядит на мобильных устройствах.
Демо | Скачать
21. Tonic Pro
Созданный на основе Twitter Bootstrap, шаблон Tonic Pro поставляется со слайдером, кастомным визуальным CSS-редактором (упрощающим редактирование кода), font awesome иконками и всем тем, что помогает сайту выделиться среди остальных. Базовый набор из всех полезностей предоставляется бесплатно, но вы можете приобрести премиум версию шаблона со значительно большим функционалом.
Демо | Скачать
22. Free Bootstrap 3.0 HTML Template
Вам нужно найти эффектный шаблон для персональной Web-страницы, онлайн-портфолио или ресторанный шаблон, подходящий для бара, пиццерии, кафе или бистро? Тогда лучше обезопасить себя от проблем с кастомизацией и быть уверенным в возможностях шаблона, на случай возникновения необходимости расширения функционала. Free Bootstrap 3.0 HTML Template — вполне подходящее для этого решение. Хотя он создан для ознакомительных целей, вы всегда можете приобрести оригинальный шаблон (с точно такой же структурой) для создания своего startup-проекта.
Демо | Скачать
23. Tulip
Tulip – креативный шаблон с адаптивной версткой, подходящий для создания сайта юридической фирмы, адвокатской конторы, консалтинговой компании и ряда коммерческих проектов, требующих современного . Выбирая Tulip, вы получаете легальный шаблон, который можете использовать бесплатно для своих коммерческих целей. User-Frendly дизайн этого шаблона (дружественный для пользователей десктопов и мобильных устройств) всегда будет способствовать успешности будующего веб-проекта.
Демо | Скачать
24. Andia – Free HTML Bootstrap Theme
Andia – бесплатная адаптивная HTML тема на Bootstrap. В составе: 5 примеров полностью адаптивных страниц, страница портфолио, сервисы, About, форма контактов. Andia идеально подойдет для креативного агентства с портфолио, личного или под небольшой бизнес проект. Особенности и функционал: адаптивный макет, адаптивный слайдер изображений, возможность демонстрировать ваши фотографии из сервиса Flickr благодаря интеграции с Flicr Photostream, возможность создавать иконки на базе иконочного шрифта Font Awesome 4.0, лента твиттер (twitter feed) и многое другое.
Демо | Скачать
25. Dellow
Dellow – минималистичная адаптивная тема со множеством премиум опций, которые вы получаете бесплатно. Ключевые особенности: слайдер с эффектом параллакса в шапке, нумерованная постраничная навигация, адаптивный слайдер, кастомный хедер & футер, 4 макета страниц, кастомные виджеты & Time Display. Мощная панель настроек значительно расширяет возможности редактирования и упрощает процесс модификации темы.
Демо | Скачать
28. Creation – Flat Industrial Bootstrap Responsive template
Шаблон Creation предназначен для создания сайта индустриальной компании. Может широко использоваться для интернет представительств различных компаний-изготовителей, от небольших организаций до крупных производственных предприятий и фабрик. В этом шаблоне тщательно подобрана цветовая схема, хорошо организовано расположение элементов, продуман стиль и структура макета сетки. Ключевые особенности шаблона: HTML5, адаптивность, по лицензии Creative Commons Attribution 3.0 предполагается использование без ограничений. В комплект шаблона включены исходные файлы: HTML файлы (.html), таблицы стилей (.css), изображений (.jpg/png/gif), JQuery плагинов (.js), файлы исходников Photoshop (.psd), шрифтов (.ttf).
Демо | Скачать
29. My Restaurant
My Restaurant – оригинальный и стильный bootstrap шаблон с фоновым jQuery слайдером, фиксированным меню на jQuery меняющим цвет при наведении. — jQuery галерея, управлять которой можно указателем или колесом мыши и образующая красивый лайтбокс с эффектом затемнения основного фона.
Демо | Скачать
30. Corlate – Free Responsive Business HTML Template
Corlate – бесплатный адаптивный HTML бизнес-шаблон, со встроенными шрифтами Font Awesome и css3 анимацией. Также оснащен своим собственным бутстраповским слайдером -каруселью, шорткодами – позволяющими легко создавать вкладки, аккордеон-слайдеры и даже галереи. Это полностью адаптивный, легкий и супер-быстрый шаблон. Хорошо подойдет сайту небольшой бизнес компании, стратап-проекту, или если вам, как талантливой личности, нужен сайт для демонстрации своего творчества.
, Buddypress и BBpress. Bootstrap подключен только файлами CSS. Тема разработана на основе 2-х колоночного макета и может отлично подойти для блога.
Демо | Скачать
33. Temptation
Temptation – бесплатная темная WordPress тема, построенная с использованием Bootstrap 3. Это подготовленая к Retina и полностью адаптивная тема, использующая сеточный макет, имеет: витрину Showcase, Nivo слайдер, и многое другое. По сочетанию темных цветов это, пожалуй, одна из лучших тем из всего репозитория WordPress.
Демо | Скачать
34. RICHY
RICHY – адаптивная многоцелевая HTML5/CSS3 Bootstrap тема. Имеет чистый аккуратный дизайн и легкость в кастомизации.
