Вед-дев, Сео, Манимейкинг

Знакомство с Bootstrap используя Drupal

bЗнакомство с Bootstrap используя Drupal

Сегодня мы познакомимся с css-фреймворком под названием Bootstrap, который будем использовать вместе с Drupal 7. Данный фреймворк является очень популярным и имеет очень много любителей и хейтеров. Если все же каким-то образом вы впервые слышите о нём, то более детально с ним познакомиться можно по этой ссылке.

Итак, для начала необходимо скачать тему для Drupal: https://drupal.org/project/bootstrap
Далее, нужно закачать папку с темой в sites/all/themes или sites/sitename.com/themes в зависимости от вашей конфигурации (мультисайтинг или нет) и создать подтему путём копирования папки bootstrap_subtheme в sites/all/themes (название папки можно переименовать, а также необходимо удалить .starterkit у info файла). Также, не забудьте установить модуль jquery_update и установить версию 1.7 и выше.

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

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

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

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

Локальные файлы

Плюсы этого способа - это гибкость, вы сможете изменять все переменные и правила в оригинальных файлах фреймворка. Но будет необходимо потратить немного времени для его настройки, в отличии от первого способа с CDN. Для начала необходимо скачать файлы самого фреймворка по этой ссылке. Качать необходимо архив с названием "Source code". Содержимое скачанного архива необходимо поместить в папку bootstrap в вашей подтеме:

bootstrap_subtheme
--bootstrap
---содержимое папки bootstrap

Далее, идем в .info файл вашей подтемы и раскомментируем подключение всех скриптов под заголовком "METHOD 1", а также, необходимо из папки bootstrap/dist/css/ скопировать файл bootstrap.min.css в директорию css/bootstrap.min.css и подключить его в .info файле:

stylesheets[all][] = css/bootstrap.min.css

Далее, чтобы работали глификоны, необходимо скопировать шрифты из папки bootstrap/dist/fonts в директорию css/fonts/ (Не забудьте почистить кеш друпала!)

На этом, настройка метода с локальными файлами окончена.

Все тимплейты находятся в папке "templates" (page.tpl.php, node.tpl.php и прочее).

При помощи Bootstrap можно очень быстро создавать красивые адаптивные темы, но если все же вам необходим экслюзивный дизайн на основе Bootstrap, то вам можно обратиться в студию веб-дизайна Speed Motion. Большим минусом Bootstrap является его громоздкость - слишком много не нужных скриптов и стилей, которые не очень быстро отключаются. Если вам нужен легкий фреймворк без лишнего мусора, то можете попробовать Skeleton.



Комментарии (7)

Оооо. Давно жду от вас стетей по bootstrap))
Спасибо, пишите еще)

и у меня вопрос: у меня в ИЕ сайт не респонсив, хотя подключил библиотеку respond.js что еще не так

PS: хотелось бы больше инфы по bootstrap и вообще обзоров по другим css фреймверкам например Foundation он вроде легче чем бутстрап с его кучей всего...
PSPS: картинку к посту надо бы сменить, а то это bootstrap 2, а щас bootstrap 3 и статья про третью версию)

А IE какая версия? JS библиотека корректна подключена?

1. Постараюсь побольше инфы про фреймворки написать, но перед тем как писать, мне придется их поюзать)
2. Картинку заменю, спасибо за замечание)

Щас проверил сайт и вспомнил что как то решилась проблема с ие (с ие8 и ниже, ну только для этих версий нужны доп js... ie9 и выше понимают все норм)

PS: Вот картинка в тему) https://www.drupalfund.us/sites/default/files/styles/655x340/public/bootstrap3.png

Спасибо за изображение) Покажи свой сайт на bootstrap3

Сайт все еще на поддомене и там он еще не в лучшем виде =)
Обязательно оставлю ссыль после завершения)

Та же проблема, что была и у oneng - сайт не респонсив в IE(8, 7), хотя библиотека respond.js подключена.

to andrey,
Вроде чтобы заработало нужно отключить в теме (в админке) "BootstrapCDN version" и подключить все из .info файла...

Разделы

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 9 месяцев 2 недели назад
    Спасибо. С Новым Годом! 
  • Den 10 месяцев 2 недели назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 10 месяцев 2 недели назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 11 месяцев 2 недели назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 11 месяцев 2 недели назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 11 месяцев 2 недели назад
    захожу на mysql через ssh по команде  
  • admin 11 месяцев 2 недели назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 11 месяцев 2 недели назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 12 месяцев 1 день назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 1 год 1 месяц назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!