Bootstrap drupal 7 швидкий екскурс для початківців

Реліз Bootstrap (в минулому відомий як Twitter Bootstrap) для Drupal 7 з'явився вже пару років як. Однак, вивчати його я взявся лише на цьому тижні. "Вхід" в цей фреймворк виявився для мене зовсім не простим і я набив багато шишок. Інформації по bootstrap багато, проте загальна картина вимальовується не відразу. Тому, я вирішив об'єднати всі в короткій оглядовій статті.

Що таке Bootstrap? Коротко - це конструктор для побудови інтерфейсу сайту, тобто з точки зору його зовнішнього вигляду. Це набір контролів призначеного для користувача інтерфейсу: кнопки, заголовки, поля введення, спливаючі підказки. (Їх оочень багато і. Вони красиві!).

Розробники Bootstrap виконали величезну роботу. Вони не тільки визначили зовнішній вигляд і поведінку кожного з контролів, а й відтестувати все це величезна кількість коду в різних браузерах (в тому числі і мобільних!).

За що люблять Bootstrap совеременние програмісти?

За що люблять Bootstrap власники сучасних сайтів?

  1. Bootstrap робить дизайн приємним, зрозумілим, передбачуваним, а HTML / CSS / JS код компактним.
  2. Навіть на мобільному інтернеті сторінка сайту, зробленого на Bootstrap вантажиться відчутно швидше! Звичайно, якщо все це в умілих руках, скажімо так, і на другому-третьому зробленому сайті;).

Bootstrap не залежить від того, на який CMS працює / робиться сайт. Важливо його правильно підключити. Я спеціалізуюся на Drupal, тому розповім як зробити свою тему оформлення на базі Bootstrap для Drupal 7.

Drupal + Bootstrap

Далі, весь процес описаний на прикладі Bootstrap 3.

Bootstrap drupal 7 швидкий екскурс для початківців

Для роботи Bootstrap вимагає більш свіжу бібліотеку jQuery, ніж Drupal, тому ставте модуль jQuery_update. включайте версію 1.9 або вище.

Щоб Bootstrap заробив правильно, з боку Drupal потрібно, щоб движок генерував адаптований HTML з класами, які описані в стилях Bootstrap.

Встановлюємо тему оформлення bootstrap

Для такого перевизначення класів і структури HTML давайте встановимо друпальную тему оформлення bootstrap версії 7.x-3.0. Структура файлів теми оформлення показана на картинці.

Створюємо свою тему на базі встановленої

Якщо ви плануєте змінювати темплейти, рекомендую відразу створити свою тему оформлення на базі встановленої. Якщо це зробити в основній темі, всі зміни будуть перезаписані (втрачені!) При найближчому оновленні сайту. Є вдумливе опісалово. Але якщо коротко і по-російськи, то для цього потрібно:

  • скопіювати директорію bootstrap_subtheme на рівень вище (в директорію з темами оформлення сайту);
  • перейменувати в щось своє, наприклад, mytheme;
  • перейменувати файл bootstrap_subtheme.info.starterkit в mytheme .info;
  • опціонально, можна відредагувати файл mytheme.info і змінити ім'я для теми оформлення.

Створення підтеми закінчено.

Включаємо і налаштовуємо створену тему оформлення

Починається найцікавіше. За замовчуванням, сам bootstrap вантажиться з стороннього джерела - CDN (content delivery network). Тобто, на вашому сервері скриптів бутстрапа ще немає. Вантажиться повна версія, яка включає в себе всі наявні компоненти. Вантажиться швидко (бо CDN), але далеко не оптимально. Тепер саме час розповісти, в яких видах буває bootstrap:

Коли використання CDN оптимально? Якщо сайт великий і, швидше за все, використовує практично всі контроли, використовуйте CDN-версію.

Для маленьких сайтів, які використовують від сили кілька контролів, не варто вантажити js-код і css-стилі від інших контролів. Можна їх прибрати і тим самим скоротити завантажуються браузером файли (читай, прискорити завантаження сторінки на мобільних пристроях).

Мінімізація (стиснення) дає відчутне зменшення розмірів файлів. Але в період розробки сайту краще користуватися незжатої версією - зручніше відловлювати помилки і редагувати файли (якщо це необхідно).

Для особливо просунутих, варто використовувати вихідні. Це дозволить змінювати їх. По закінченню розробки, пам'ятайте про те, що файли потрібно мінімізувати.

Підключення бутстрапа до теми оформлення

Найсвіжіша версія Bootstrap знаходиться в git. В директорії dist знаходяться мінімізовані і звичайні файли типу все-в-одному файлі. Класти такі файли варто в mytheme / bootstrap.

Мінімізація файлів, виключення зайвих css і js

Після того, як розробка сайту завершена і ви знаєте, які компоненти використовуються, саме час мінімізувати файли сценаріїв і стилів. Спершу варто виключити невикористовувані для відображення сайту стилі і сценарії. Це здорово скоротить обсяг CSS і JS коду. Зробити це можна наступними способами:

  • сама тема оформлення бутстрапа дозволяє вказувати в файлі * .info виключаються файли в вигляді exclude [css] [] = 'modules / book / book.css';
  • можна використовувати hook_js_alter, hook_css_alter - універсальний спосіб.

Стиснути і упакувати їх можна сторонніми засобами або на боці Drupal. Для останнього випадку відмінним рішенням є Advanced CSS / JS Aggregation. Даний модуль містить величезну кількість налаштувань і дозволить істотно уменішіть розмір скриптів.

Що далі?

Далі можна використовувати бутстрапа на повну котушку: додавати компоненти і налаштовувати їх зовнішній вигляд. Всі компоненти дуже добре описані на сторінках самого проекту (користуйтеся верхнім горизонтальним меню). Звичайно, є російська версія даної документації, але мені вона здалася занадто сирий і я не став її використовувати.

Як підключити контрол бутстрапа

Корисні посилання

Бутстрап розвивається стрімко, є багато документації про версію 2. Закликаю бути обережним, вона значно відрізняється від поточної версії.