Bootstrap: постараемся освоить

Drupal / 6 октября 2015
/ 605

Не знаю чем это все закончится, но на одном проекте я решил попробовать Bootstrap. В чистом виде, благо есть одноименная тема для drupal. Есть вариант связки с темой omega, но не вижу в этом особого смысла. Немного поковырявшись в этом фреймворке я, честно говоря, так и не понял почему ему так часто поют хвалебные песни. Минусы имеются, а с другой стороны, где их нет? Так почему я решил его попробовать? Дело в том, что мы с другом решили замутить небольшой тандем, я уже о нем писал. У него много заказов на сайты, а заказчики, ни с того, ни с сего, вдруг стали чураться джумлы и требовать что-то более серьезное, при этом, все чаще стал упоминаться drupal. Мой друг решил что будет быстрее, если он отдаст всю работу над сайтом мне, а сам займется дизайном и поиском заказов. Мне же вдруг захотелось поработать. Вообще я не люблю людей, не люблю общение, особенно с клиентами. "Дизайнерить" я, в принципе, могу, но этот процесс иногда у меня занимает больше времени, чем работа над самим сайтом. И еще я люблю отстаивать свою точку зрения когда это не совсем уместно. Поэтому для меня это предложение показалось интересным, тем более, что это была моя идея :). И в данном случае, использование bootstrap неплохой выход для дизайнера, который почти не знает drupal. Попробуем запустить.

Часть 1. Тема

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

1. Устанавливаем тему bootstrap

2. Копируем папку bootstrap/bootstrap_subtheme в sites/ваш_сайт/themes или sites/all/themes

3. Переименовываем папку bootstrap_subtheme как хотите, допустим mytheme. В результате, в папке themes должны лежать две папки: mytheme и bootstrap.

4. Файл bootstrap_subtheme.info.starterkit переименовываем в mytheme.info

5. В файле mytheme .info можете изменить название темы в самом верху, в этих строчках:

name = Bootstrap Sub-theme
description = A Bootstrap Sub-theme.

Включаем нашу новую тему, но для правильной работы нужен jQuery 1.9+ поэтому:

6. Устанавливаем, если еще не установлен, jQuery Update.

7. На странице admin/config/development/jquery_update в поле Default jQuery version выбираем версию 1.9 или выше.

Подключаем bootstrap

Везде пишут, и даже на drupal.org, что существует 2 типа подключения bootstrap. Но, оказалось, что все врут кроме меня. На самом деле существует 3 варианта.

1. Изначально сам bootstrap грузится из CDN. В файле .info вашей темы он прописан как "METHOD 2: Bootstrap CDN". Это вполне приемлемый метод, быстрый и подходит, если вы не хотите лезть в переменные, правила и т.д.

2. Можно использовать локальные файлы – "METHOD 1: Bootstrap Source Files". Для использования этого метода скачиваем bootstrap отсюда, выбираем версию, я взял 3.3.5, в самом низу скачиваем по ссылке Source code (zip).

Распаковываем архив в папку mytheme/bootstrap. В файле .info вашей темы раскомментируем все строки

scripts[]... 

в блоке METHOD 1.

Далее копируем папку fonts из bootstrap/dist в директорию mytheme/css.

Идем в настройки темы admin/appearance/settings/mytheme в "Расширенные настройки" и в поле "BootstrapCDN версия" выбираем "Отключено".

Чистим кэш. Все. Я решил использовать этот метод.

3. Третий метод – "и нашим и вашим" – используем модуль Bootstrap Library. Устанавливаем модуль, скачиваем bootstrap, распаковываем в папку library, папку переименовываем в bootstrap. В настройках модуля выбираем к какой теме подключить библиотеку.

Идем в настройки темы admin/appearance/settings/mytheme в "Расширенные настройки" и в поле "BootstrapCDN версия" выбираем "Отключено".

Все.

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

Если вы это сообщение можете закрыть по крестику справа, значит все подключено правильно. Если нет, исходники bootstrap не подключены. Я так проверил все 3 варианта. Думаю есть еще способы, но я не заморачивался.

comments powered by HyperComments