Создание темы на основе Bootstrap 3 для Drupal 7

Внимание! данная статья несколько устарела. В новой версии темы Bootstrap иная структура папок. О новом принципе создания субтемы можно прочесть в статье  Создание темы на основе Bootstrap 3 для Drupal 7. Обновление.

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

  1. Установка Bootstrap
  2. Установка модуля jquery update
  3. Создание субтемы 
  4. Настройка субтемы
  5. Выбор типа подключения Bootstrap
  6. Компиляция LESS файлов
  7. Подключение субтемы

1. Установка Bootstrap

Скачать тему оформления Bootstrap. Тема должна располагаться \sites\all\themes​\. Тему активировать не нужно.

2. Установить модуль jQuery Update.

Указать  в настройках следующие версии jquery:

3.Создание субтемы.

Внутри темы Bootstrap находиться папка bootstrap_subtheme. Нужно её скопировать в папку с темами \sites\all\themes​\. Это и будет заготовкой для субтемы.

4. Настройка субтемы.

Переименовываем bootstrap_subtheme например в bootstrap_drupal. Также переименовываем файл bootstrap_subtheme.info.starterkit в bootstrap_drupal.info. Редактируем его следующим образом.

name = Bootstrap drupal
description = A Bootstrap Sub-theme.
core = 7.x
base theme = bootstrap

5. Выбор типа подключения Bootstrap

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

  1. Использование CDN
  2. Локальные файлы

Использование CDN

Раскомментировать все строки под заголовком "METHOD 2" в .info файле. Файл для css находится по адресу bootstrap_drupal /css/style.css. Плюс этого способа - это простота, а минус придётся перезаписывать все правила, которые  не понадобятся. По умолчанию будет подгружено много библиотек. После окончания проекта, лишние стили и скрипты желательно отключить, для ускорения работы сайта.

exclude[css][] = 'modules/book/book.css'
exclude[js][]  = 'bootstrap/js/popover.js

Использование локальных файлов. 

Раскомментировать следующие строки

 scripts[] = 'bootstrap/js/affix.js'
 scripts[] = 'bootstrap/js/alert.js'
 scripts[] = 'bootstrap/js/button.js'
 scripts[] = 'bootstrap/js/carousel.js'
 scripts[] = 'bootstrap/js/collapse.js'
 scripts[] = 'bootstrap/js/dropdown.js'
 scripts[] = 'bootstrap/js/modal.js'
 scripts[] = 'bootstrap/js/tooltip.js'
 scripts[] = 'bootstrap/js/popover.js'
 scripts[] = 'bootstrap/js/scrollspy.js'
 scripts[] = 'bootstrap/js/tab.js'
 scripts[] = 'bootstrap/js/transition.js'

Cкачать дистрибутив Bootstrap sourse, и распаковать в папку с темой. Не забываем папку переименовать в bootstrap. Файлы должны расположиться так:

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

6. Компиляция LESS файлов

Компилировать файлы LESS можно программой WinLess. Работать с ней просто. Скачать, установить и добавить папку LESS для компиляции.

7. Подключение субтемы

Если был выбран метод с использованием CDN - субтема готова к работе и дальнейшей темизации.

Если был выбран метод с локальными файлами - нужно в настройках темы отключить выбор BootstrapCDN version.

Субтема создана! 

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

Я ещё использую модуль Views Bootstrap он добавляет во views несколько форматов. Все они упрощают использование "фишек" фреймворка.

На последок, полезные ссылки по использование Bootstrapa

http://getbootstrap.com/components/ - компоненты фреймворка на английском

http://bootstrap-3.ru/components.php - компоненты фреймворка на русском

http://getbootstrap.com/customize/  - кастомайзер компонентов, очень удобно собирать под конкретный проект.

 

Татьяна 17 марта, 2016

Здравствуйте!
Наверное вопрос и выеденного яйца не стоит, но не могли бы подсказать.
Устанавливаю bootstrap-7.x-3.5. в папку \sites\all\themes​\
Захожу, но внутри темы Bootstrap нет папки bootstrap_subtheme. Что делать? Возможно в новой версии субтема устанавливается как-то по-другому?

SuperAdmin 17 марта, 2016

Версия модуля обновилась. Теперь всё находиться в папка starterkits. Вам папка нужна cdn это и есть аналог bootstrap_subtheme . Нужно подправить статью.

Татьяна 17 марта, 2016

Спасибо огромное за быстрый ответ!

Александр 20 марта, 2016

Доброго времени суток!
Пробую создавать субтемы по вашей статье. При описании настройки использования локальных файлов приведен такой текст "Cкачать дистрибутив Bootstrap sourse, и распаковать в папку с темой. Не забываем папку переименовать в bootstpap." Имя {bootstpap} - это описка или именно так и надо переименовать?

SuperAdmin 20 марта, 2016

Приветствую. Да это опечатка, исправил. Спасибо за внимательность. После обновления модуля несколько изменилась настройка. Рекомендую посмотреть статью http://delay-delo.com/sozdanie-themy-boostrap3-na-drupal8. Тут уже используется новый принцип создания субтемы, с учётом обновления модуля.

Александр 20 марта, 2016

Спасибо за совет. Начинаю читать.

Александр 20 марта, 2016

"Скачать тему оформления Botstrap." {Botstrap} -наверно нужно добавить букву "о"?

SuperAdmin 20 марта, 2016

Ещё раз спасибо. Нужно мне внимательнее быть. Написана новая статья. http://delay-delo.com/content/sozdanie-temy-na-osnove-bootstrap-3-dlya-drupal-7-obnovlenie.

Оставить комментарий

Похожие материалы