Внимание! Данная статья несколько устарела. В новой версии темы Bootstrap иная структура папок. О новом принципе создания субтемы можно прочесть в статье Создание темы на основе Bootstrap 3 для Drupal 7. Обновление.
Небольшой гайд по созданию темы на основе фреймворка Bootstrap 3. Фреймворк чудесно масштабируемый и значительно упрощает создание темы. Создание темы для Drupal 7 состоит из следующих этапов:
- Установка Bootstrap
- Установка модуля jquery update
- Создание субтемы
- Настройка субтемы
- Выбор типа подключения Bootstrap
- Компиляция LESS файлов
- Подключение субтемы
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:
- Использование CDN
- Локальные файлы
Использование 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/ - кастомайзер компонентов, очень удобно собирать под конкретный проект.
- Войдите, чтобы оставлять комментарии
- 3844 просмотра
Версия модуля обновилась. Теперь всё находиться в папка starterkits. Вам папка нужна cdn это и есть аналог bootstrap_subtheme . Нужно подправить статью.
Доброго времени суток!
Пробую создавать субтемы по вашей статье. При описании настройки использования локальных файлов приведен такой текст "Cкачать дистрибутив Bootstrap sourse, и распаковать в папку с темой. Не забываем папку переименовать в bootstpap." Имя {bootstpap} - это описка или именно так и надо переименовать?
Приветствую. Да это опечатка, исправил. Спасибо за внимательность. После обновления модуля несколько изменилась настройка. Рекомендую посмотреть статью http://delay-delo.com/sozdanie-themy-boostrap3-na-drupal8. Тут уже используется новый принцип создания субтемы, с учётом обновления модуля.
"Скачать тему оформления Botstrap." {Botstrap} -наверно нужно добавить букву "о"?
Здравствуйте!
Наверное вопрос и выеденного яйца не стоит, но не могли бы подсказать.
Устанавливаю bootstrap-7.x-3.5. в папку \sites\all\themes\
Захожу, но внутри темы Bootstrap нет папки bootstrap_subtheme. Что делать? Возможно в новой версии субтема устанавливается как-то по-другому?