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

Блог web-розробника Олексія Ртищева

Форма пошуку

  1. Головна
  2. Створення теми на основі Bootstrap 3 для Drupal 7. Оновлення

Створення теми на основі Bootstrap 3 для Drupal 7. Оновлення

Першою приємною подією є те, що зменшилася кількість етапів створення теми. Тепер список має такий вигляд:

  1. Установка Bootstrap
  2. Створення субтеми
  3. Налаштування субтеми
  4. Вибір типу з'єднання Bootstrap

З етапами визначилися, можна починати!

1. Встановлення Bootstrap

Завантажити тему оформлення Botstrap. Тема повинна розташовуватись \sites\all\themes\. Тему активувати не потрібно.

2. Створення субтеми.

Всередині теми Bootstrap знаходиться папка starterkits. У цій папці лежать 2 варіанти заготовок для субтемиcdn іless. Я використовуватиму варіант CDN.

Копіюємо папкуcdn у папку з темами \sites\all\themes\. Далі починається налаштування теми.

3. Налаштування субтеми.

Почнемо з того, що перейменуємо папку заготівлю нашої темиcdn, наприклад вbootstrap_drupal.​ Переходимо в папкуbootstrap_drupal і перейменовуємо файлcdn.starterkit уbootstrap_drupal.info.

Після чого відредагуємо декілька рядків:

Де ім'я нашої субтеми, description - довільний опис субтеми.

Все після цих дій у списку тем http://мій_домен/admin/appearance з'явиться нова тема під назвоюbootstrap_drupal.

основі

Це і є наша субтема, вона цілком готова до роботи. Включаємо її та переходимо на сайт.

основі

4. Вибір типу підключення Bootstrap

Є два способи підключення файлівфреймворку Bootstrap:

Використання CDN Локальні файли

При використанні варіанта c провайдером cdn, додаткові параметри теми більше не потрібні. Великим плюсом цього варіанта є те, що дозволяє підключити 18 варіантів тем. Варіанти тим легко можна підправляти під себе, вносячи зміни до файлуstyle.css, що знаходиться в папціcss нашої субтеми. Для деяких сайтів цього цілком достатньо. Мінусом - у варіанта з використанням cdn, повільніший відгук файлів стилів і скриптів. І як наслідок – менші можливості оптимізації та масштабування проекту.

основі

Для використання локальної версії бібліотеки bootstrap необхідно:

  1. Вимкнути cdn
  2. Підключити бібліотеку bootstrap
  3. Встановити та налаштувати модуль bootstrap_library

1. Відключення провайдера CDN

Для відключення провайдера cdn потрібно в налаштуваннях теми, у розділі розширені перевести селектор у режим "Не вказано" відповідно до зображення нижче.

теми

2. Підключення бібліотеки bootstrap.

Отже, перед тим як завантажити файли фреймворку bootstrap необхідно створити папкуlibraries, якщо на звичайно не створена раніше (з версії drupal 7.43 вона створюється автоматично). Тепер залишилось завантажити файли бібліотеки bootstrap. Завантажити можна звідси http://getbootstrap.com/getting-started/#download

основі

Завантажену бібліотеку слід перейменувати зbootstrap-3.3.6-dist уbootstrap. Файли в бібліотеці повинні мати таку структуру.

3. Встановити та налаштувати модуль bootstrap_library.

Для під'єднання бібліотеки boostrap до субтеми допоможе наступний модуль bootstrap_library. На жаль наdupal 7 робочим варіантомзалишається тільки версія dev. Встановлюється він як і інші модулі, але вимагає установки модуля libraries. Після встановлення налаштовуємо модуль bootstrap_library, шлях до конфігурації my_domen/admin/config/development/bootstrap_library

  1. Вказати версію файлів мініфіковану чи повну.
  2. Вибрати тему, до якої буде підключено bootstrap library
  3. І які бібліотеки підключатимемо
створення

Для темизації теми як у першому і у другому варіанті редагується файл style.css.

У цьому створення теми закінчено.

На момент написання статті, я виявив, що існує і третій варіант підключення файлів фреймворку Bootstrap. Де бібліотеку можна підключити за винятком додаткових модулів. Тобто повністю виключити крок 3 у пункті 4.

Спосіб робітник, але я його ще не тестував і не коли не використовував. Нижче приклад налаштування.