Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 1. Все, что вы хотели знать, но боялись спросить. Joomla 3 bootstrap шаблоны

Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки Bootstrap

В этой статье я расскажу о том, как с помощью Bootstrap создавать в шаблоне Joomla фиксированные и плавающие адаптивные блоки под модули и компонент Joomla.

После того, как мы узнали, что такое Bootstrap и познакомились с основными принципами его использования, пришло время рассмотреть систему разметки Bootstrap и ее применение в шаблонах Joomla.

Основы разметки Bootstrap.

Первым делом рассмотрим основной принцип построения сетки Bootstrap для html-страницы. Если вы поймете его, то все остальное будет уже частностями. Построение сетки – самое главное.

Для начала, неплохо было бы понять, что вообще такое Сетка? В английском языке она называется Grid. Проще всего ассоциировать сетку с обычной таблицей, которую мы привыкли видеть в Word’е. Главное отличие – сетка строится не ячейками таблицы, а DIV’ами, или, проще говоря, блоками.

Все мы играли в морской бой. Бумажка, поле 10х10 клеток, на котором нужно расставить корабли. Корабли состоят из одной и более клеток. Точно также можно строить базовую разметку шаблона с помощью Bootsotrap, разница только в том, что поле здесь 12 х N клеток, где N любое целое число от 1 до бесконечности.

Давайте посмотрим на картинку:

Первая строчка – 12 однопалубных кораблей, вторая – 1 восьмипалубный и один четырехпалубный корабль, третья – 3 четырехпалубных корабля, 4 – 2 шестипалубных.

Bootsrap позволяет нам создать любое количество кораблей от 1 до 12 палуб. Главное условие – общее число палуб в строке должно быть 12.

Каждый из кораблей – это блок div c определенным классом.

Этот класс отвечает за размер блока и формируются следующим образом:

col-[диапазон размеров экранов]-[количество палуб]

Для начала разберемся с палубами. Здесь все элементарно. Какую цифру вы указали, такое количество палуб будет у вашего корабля (ширина div’a).

Теперь, что касается разрешений диапазонов экрана. Вот очень важная таблица:

Она показывает диапазоны размеров экранов, для которых характерно то или иное именование:

lg – экраны более 1200px
md – экраны от 992px до 1200px
sm – экраны от 768px до 992px
xs – экраны до 768px

Теперь вернемся еще раз к картинке с сеткой.

Блок:

будет иметь размер в 3 клетки из 12 на экранах шире 992px и будет иметь размер в 12 клеток из 12, на экранах менее 992px.

Дело в том, что мы указали ширину блока только для экранов md, но не указали ее для всех остальных экранов. В этом случае Bootstrap:

Делает такую же ширину на экранах, больших, чем указанный диапазон.
Делает ширину в 12 из 12 (т.е. 100%) на экранах меньших, чем указанный диапазон.

Давайте представим, что мы хотим, чтобы:

На экранах lg блок занимал 2 клетки
На экранах md блок занимал 3 клетки
На экранах sm блок занимал 6 клеток
На экранах xs блок занимал 12 клеток

Как нам это написать? Вот так:

или вот так:

В данном случае класс col-xs-12 можно опустить, поскольку в его отсутствие Bootstrap все равно сделает меньший блок размеров в 12 клеток.

Порядок перечисления классов также не важен. Можно писать от меньшего к большему, а можно от большего к меньшему.

Для формирования полноценной строки мы должны обернуть DIV’ы колонок в DIV с классом row .

Например, вторая строчка с нашей первой картинки реализуется таким кодом:

Некоторые, особо пытливые читатели, могут задать вопрос: «А что делать, если мне не хватает 12 колонок? Что если у меня должно быть 20 блоков в строке?»

Ответом будет следующая важная особенность сетки Bootstrap. Каждая из клеток сетки может являться полем 12 х N подклеток, а каждая из подклеток полем 12 х N подподклеток, и так до бесконечности. Представить себе это можно так:

Таблицы, для упрощения, сокращены до 2 столбцов. На самом деле их 12 на каждом уровне. Каждый уровень (разные цвета) – полная сетка Bootstrap, в которой можно строить все более точные макеты.

Еще одно правило: все строки:

т.е. вся наша сетка, должна быть в блоке с классом container или container-fluid.

В случае использования container у вас будет резиновый шаблон, максимальная ширина которого фиксирована (например, 1200px). На экранах меньшей ширины шаблон будет сжиматься, как резиновый, а на экранах большей ширины по краям будет появляться свободное пространство.

В случае использования container-fluid шаблон всегда будет растягиваться на максимальную ширину экрана, как на wedal.ru.

Вот общий пример:

Это и будет являться готовым кодом сетки Bootstrap.

Освоив этот нехитрый дзен, вы сможете без особых проблем создать сетку даже для очень сложного шаблона Joomla.

Интеграция компонента и модулей Joomla в разметку Bootstrap шаблона Joomla. Создание базовой разметки.

Пришло время воспользоваться знаниями, полученными в первой части урока, на практике.

Вас уже должен быть установлен шаблон Master Bootstrap, про который я писал в прошлой статье.

Структура типичного шаблона Joomla показана на рисунке:

Откроем на редактирование файл:

templates/masterbootstrap/index.php

Это основной файл шаблона, в котором храниться его базовая html-разметка.

Bootstrap Framework уже подключен в данном шаблоне и отдельно его подключать не нужно.

Поскольку мы хотим создать на основе этого шаблона свой, уникальный шаблон с использованием Bootstrap, удалим весь, уже созданный код между тегами:

<header> и </header>
<section> и </section>

После этих действий наш шаблон будет выглядеть следующим образом:

<?php defined('_JEXEC') or die; include 'includes/params.php'; ?> <!DOCTYPE html> <html lang="en"> <?php include 'includes/head.php'; ?> <body> <div>  <header role="banner"> </header>  <section> </section>   <script type="text/javascript" src="/<?php echo $tpath; ?>/js/template.js"></script>  </body> </html>

На сайте будет показываться пустая белая страница.

Первым делом создадим самую простую разметку, которая реализует стандартный трехколоночный макет в виде буквы «О»: шапка, полвал, центральный блок контента, левая и правая колонки. Примерно такой базовый макет используется на wedal.ru. Он показан на рисунке:

Сразу зададим условие, что наш макет на sm-экранах и ниже будет трансформироваться в одну колонку, как показано на рисунке.

Следуя правилам создания сетки, описанным выше, весь наш макет можно создать следующим кодом:

<div>  <div> <div> header </div> </div>   <div>  <div> nav </div>   <div> article </div>   <div> aside </div>  </div>   <div> <div> footer </div> </div>  </div>

Я создал сетку в соответствии с правилами, которые описывались выше. К каждому элементу был добавлен Id. Это делать не обязательно, но для дальнейшего оформления может пригодиться.

Поскольку первоначальная разметка нашего шаблона Joomla отделяет header от остальной части, а блока с классом container в ней нет, разобьем наш код на два контейнера: один будет в header, а другой в section. Вставим этот код в шаблон Joomla. Системе разметки Bootstrap это не противоречит. В итоге код шаблона Joomla будет следующим:

<?php defined('_JEXEC') or die; include 'includes/params.php'; ?> <!DOCTYPE html> <html lang="en"> <?php include 'includes/head.php'; ?> <body> <div>  <header role="banner"> <div>  <div> <div> header </div> </div>  </div> </header>  <section> <div>  <div>  <div> nav </div>   <div> article </div>   <div> aside </div>  </div>   <div> <div> footer </div> </div>  </div> </section>   <script type="text/javascript" src="/<?php echo $tpath; ?>/js/template.js"></script>  </body> </html>

Базовая сетка Bootstrap для нашего шаблона Joomla готова. И ее уже можно увидеть на лицевой стороне сайта. Для наглядности я раскрасил блоки в соответствие с картинкой, добавив в CSS-файл /css/template.css шаблона код:

#header{background: #ffeebb none repeat scroll 0 0;} #footer{background: #ffeebb none repeat scroll 0 0;} #article{background: #dddd88 none repeat scroll 0 0;} #nav{background: #ccccff none repeat scroll 0 0;} #aside{background: #ccccff none repeat scroll 0 0;}

и удалив из файла весь CSS-код от базового шаблона.

Вот что можно видеть на сайте:

Если мы начнем сжимать браузер, то получится:

Практически то, что изначально задумывалось на рисунке.

Все, что нам остается, это добавить вместо текстов в блоках позиции модулей Joomla и переменную вывода контента (компонента).

Интеграция компонента и модулей Joomla в разметку Bootstrap шаблона Joomla. Добавление позиций модулей и переменной компонента Joomla.

Структура Joomla устроена таким образом, что в шаблонах Joomla не принято выводить модули напрямую. Это хоть и возможно, но так никто не делает. По умолчанию в шаблон выводят позиции модулей, которые, затем, можно указать в настройках модуля в админке, чтобы опубликовать модуль в том или ином месте. Выводятся позиции очень просто:

<?php if($this->countModules('название_позиции_модуля')) { ?> <jdoc:include type="modules" name="название_позиции_модуля" /> <?php } ?>

Переменная компонента выводится еще проще:

<jdoc:include type="message" /> <jdoc:include type="component" />

Используя эти кусочки кода, мы заменяем ими тексты в нашем шаблоне. После недолгих манипуляций, получаем окончательный код сетки шаблона Joomla:

<?php defined('_JEXEC') or die; include 'includes/params.php'; ?> <!DOCTYPE html> <html lang="en"> <?php include 'includes/head.php'; ?> <body> <div>  <header> <div>  <div> <div> <?php if($this->countModules('header')) { ?> <jdoc:include type="modules" name="header" /> <?php } ?> </div> </div>  </div> </header>  <section> <div>  <div>  <div> <?php if($this->countModules('nav')) { ?> <jdoc:include type="modules" name="nav" /> <?php } ?> </div>   <div> <jdoc:include type="message" /> <jdoc:include type="component" /> </div>   <div> <?php if($this->countModules('aside')) { ?> <jdoc:include type="modules" name="aside" /> <?php } ?> </div>  </div>   <div> <div> <?php if($this->countModules('footer')) { ?> <jdoc:include type="modules" name="footer" /> <?php } ?> </div> </div>  </div> </section>   <script type="text/javascript" src="/<?php echo $tpath; ?>/js/template.js"></script>  </body> </html>

После этого, в админке, добавляем нужные нам модули в созданные позиции. Если нужно позиции нет в выпадающем списке доступных позиций, просто вписываем ее название вручную.

После того, как все сделано, смотрим наш сайт:

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

В следующих статьях серии мы будем совершенствовать данный шаблон, применяя Bootstrap к отдельным элементам страницы, таким, как меню, формы, списки.

Текущую версию шаблона вы можете скачать ниже:

Скачать шаблон Master Bootstrap. Часть 3.

Как видите, с использованием Bootstrap Framework базовая сетка шаблона создается очень просто. Достаточно всего лишь понимать принципы ее формирования. Используя подобную технику, можно создавать сложные многоколоночные шаблоны, перестраивая колонки на разных разрешениях экрана.

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

Понравилась статья? Сохраните себе на стену:

Facebook

Twitter

Вконтакте

Одноклассники

Google+

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

wedal.ru

Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 2. Основные принципы использования Bootstrap.

В этой статье мы познакомимся с основными принципами использования Bootstrap и подключим его к CMS Joomla.

Если вы читаете эту статью, значит, вдохновились и решили освоить создание шаблона Joomla с адаптивным дизайном. В этой статье мы познакомимся с основными принципами использования Bootstrap и подключим его к CMS Joomla.

Как работает Bootstrap Framework?

В свое время, когда я только знакомился с данной технологией, несмотря на наличие массы информации в Интернете, мне было сложно понять что же вообще такое CSS-фреймворки. Почему-то все сайты об этом умалчивали, рассказывая непосредственно про их использование.

Вообще, фреймворк или, по-нашему, библиотека – это набор готовых функций, которые можно вызывать. Это можно описать следующей конструкцией:

Результат = Функция(Передаваемые данные)

Или:

Передаваемые данные -> [Функция] -> Результат

Примеры возьмем из интернет-магазинов:

Получить данные заказа, передавая идентификатор заказа в функцию получения данных о заказах.
Получить информацию о пользователе, передавая идентификатор пользователя в функцию получения данных о пользователях.
Получить информацию о товарах категории, передавая идентификатор категории в функцию получения данных о товарах категорий.

Это действительно похоже на классическую библиотеку. Вы приходите в библиотеку, передаете библиотекарю информацию о книге (название, автор, год выпуска) и в результате получаете книгу (информацию из книги). В данном примере функция – это библиотекарь, который по переданным вами данным пойдет и принесет нужную вам книгу.

Все описанное выше – пример классического фреймворка. Так все работает и в Joomla, и в Virtuemart, и в других расширениях.

Любой CSS-фреймворк, в том числе и Bootstrap, устроен немного иначе. Здесь роль функций выполняют заранее подготовленные CSS-конструкции, а роль передаваемых данных – css-классы, css-идентификаторы и html-разметка.

Рассмотрим простейший пример: создание красивой кнопки.

Исходные данные:

<button type="button">Success</button>

Html-кнопка Button.
Новая кнопка должна выглядеть как кнопка.
Цвет новой кнопки должен быть зеленым.
Размер новой кнопки должен быть большим.

Внешний вид кнопки по умолчанию:

html-кнопка

С исходными данными все понятно. Но как называется функция и как ее вызвать? Очень просто. Мы заменяем в шаблоне код кнопки на:

<button type="button">Success</button>

Т.е. добавляем CSS-класс с передаваемыми данными, которые сами являются функциями.

Разберем:

btn – говорит фреймворку, что нужно сделать из исходного html-кода кнопку в стиле Bootstrap
btn-success – говорит фреймворку, что нужно сделать эту кнопку зеленой (не спрашивайте в чем логика).
btn-lg – говорит фреймворку, что нужно сделать эту кнопку большой.

В результате наша стандартная кнопка превратится в:

Bootstrap-кнопка

Предвижу вопрос: «Как я должен был понять, что нужно писать "btn btn-success btn-lg"?». Ответ прост. Это описано в документации. Знакомьтесь, Альма-матер каждого Bootstrap’щика, документация по Bootstrap.

Я бы представил ее в виде 3 основных частей:

Документация по оформлению основной типографики (заголовки, блоки, таблицы, формы, кнопки, картинки)
Документация по оформлению CSS-компонентов (иконки, списки, меню, хлебные крошки, разбиение на страницы, превьюшки, и др.)
Документация по оформлению компонентов, использующих JS-скрипты (всплывающие окна, выпадающие списки, вкладки, всплывающие подсказки, аккордеоны, слайдеры и др.)

Все это представлено в очень удобном виде, с примерами, но на английском языке. Есть и русскоязычные сайты с переводом документации, но использовать их я не рекомендую, поскольку информация, представленная там, может быть уже не актуальной. Официальная документация хоть и представлена на английском языке, является интуитивно понятной и снабжена примерами по принципу «скопируй и пользуйся».

Если вы уже занимались версткой сайтов ранее, то вам будет проще представить принцип работы Bootstrap как задачу, обратную CSS-верстке.

Задача классической CSS-верстки:

Добавить html-тегу css-класс.
Добавить в CSS-файле этот класс и указать в нем css-стили.

Задача верстки с использованием Bootstrap Framework:

Узнать в документации css-классы и html-структуру элемента, который требуется создать.
Привести html-код страницы к этой структуре с этими классами.

Вот таким образом, можно представить принцип работы Bootstrap Framework. Надеюсь, что это понятно.

Как подключить Bootstrap Framework к Joomla?

В вопросе подключения фреймворка Bootstrap к Joomla есть одна особенность. Joomla, сразу после установки, содержит в себе Bootstrap Framework. Но. Версия фреймворка, используемая CMS Joomla, устаревшая, и применять ее для шаблона фронтенда настоятельно не рекомендуется. С другой стороны, админка Joomla использует Bootstrap из Joomla, который заменять не рекомендуется также настоятельно. В этом нет конфликта. Админка Joomla и фронтенд используют разные шаблоны. Это значит, ничего не мешает нам использовать разные версии Bootstrap.

Теперь про подключение. Подключить Bootstrap Framework к Joomla очень просто:

Скачиваем архив с Bootstrap Framework c официального сайта.
Копируем файл bootstrap.min.css из папки css архива в папку css используемого шаблона Joomla.
Копируем файл bootstrap.min.js из папки js архива в папку js используемого шаблона Joomla.
Копируем все файлы из папки fonts архива в папку fonts используемого шаблона Joomla. Если такой папки в шаблоне не существует, создаем ее в корневом каталоге шаблона.
В файле index.php шаблона добавляем перед </head> следующий код:

После этого проверяем на сайте пример с кнопкой, описанный выше. Он должен работать.

Подключение Bootstrap элементарно. Этот фреймворк может работать не только с Joomla, но и с любой другой CMS, а также с сайтами, работающими на чистом html. Единственная вещь, про которую не следует забывать – к сайту также должна быть подключена библиотека jQuery, которая должна находиться выше подключения файла скриптов Bootstrap.

Поисковые системы для ускорения загрузки сайта рекомендуют подключать js-файлы в конце страницы. Это же относится и к js-файлу Bootstrap. Данные вопрос не является критичным, но желательно следовать хорошему тону (в списке подключения выше это действие целенаправленно исключено для упрощения).

Master Bootstrap – базовый шаблон Joomla для использования Bootstrap.

Каким бы хорошим не был Bootstrap Framework, он не сделает за вас всю грязную работу по созданию шаблона Joomla: создание всех файлов, в том числе xml, написания базовой разметки и минимального CSS-кода, создания позиций модулей, другие мелочи.

Чтобы не выполнять эту работу, я использую бесплатный шаблон Joomla 3, который называется Master Bootstrap. Скачать его можно по этой ссылке. В принципе, это уже готовый шаблон для Joomla 3, который содержит в себе свежий подключенный по умолчанию Bootstrap, а также множество позиций модулей и некоторые опции. При этом данный шаблон не содержит практически ничего лишнего и прост в понимании. В последующих уроках мы будем использовать данный шаблон, как основу, изменяя и дорабатывая его под свои нужды. Это, с одной стороны, позволит избежать массы ошибок и упущений, а с другой сэкономит нам много времени.

В следующей статье серии мы рассмотрим систему разметки Bootstrap Framework, научимся создавать фиксированные и плавающие адаптивные колонки, которые подстраиваются под мобильные устройства, и разместим в них компонент и модули Joomla. А самые нетерпеливые уже сейчас могут установить шаблон Master Bootstrap и испробовать примеры из документации.

Подписывайтесь на обновления и получайте все новые статьи на электронную почту!

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

Понравилась статья? Сохраните себе на стену:

Facebook

Twitter

Вконтакте

Одноклассники

Google+

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

wedal.ru

Шаблоны Joomla | Bootstrap по-русски

SHAPER EXTREME — адаптивный коммерческий шаблон для Joomla

shaperex

Shaper Extreme November 12 template is a stylish and feature-rich Joomla 2.5 responsive template with Twitter Bootstrap integration. It is a multi-purpose template that’s simply perfect for business, portfolio and business websites! Extreme has six color styles

Demo: http://demo.joomshaper.com/?template=extreme

Подробнее...

NICANIAN 2 — Bootstrap шаблон для Joomla 3.0

1Bn9USN

As a continuation of the first released Nicanian with Joomla 2.5. Nicanian II is continued to be improved based on the the idea of a photography studio. For the first time, it is introduced as a responsive Joomla template with TZ Portfolio v3 and T3 Framework v3, integrating well with Joomla 3 and Bootstrap

Demo: http://demo.templaza.com/joomla-template/2013/nicanian-ii

Подробнее...

MORPHOLOGY — Адаптивный Bootstrap шаблон для Joomla

wVvckjqy

Morphology is a responsive Joomla! template that incorporates and takes advantage of Twitter’s very own Bootstrap framework. So for anyone who enjoys their iPad, Android, or even the newer iPhone5, Morphology will adapt to your viewing needs and will still look great as you surf online! As for features, Morphology brings you a huge array of built-in features…including the ability to create UNLIMITED colours! Let’s showcase some more key features of Morphology…

Demo: http://themeforest.net/item/morphology-responsive-joomla-business-template/3214036

Подробнее...

mybootstrap.ru

Как сделать Bootstrap 3 форму для Joomla

Рассмотрим один из вариантов создания формы для CMS Joomla 3 с помощью css-фреймворка Bootstrap 3 на примере формы для обратной связи. Созданная форма будет соответствовать самым современным требованиям, предъявляемым к разработке сайтов.

В качестве подопытного, на котором мы будем проводить этот эксперимент, возьмем уже подготовленную с помощью Bootstrap тему для Joomla из репозитория GitHub: https://github.com/sbogdanov108/example_joomla

Обратите внимание, что Bootstrap и другие необходимые файлы уже подключены в файле темы joomlabootstrap3/index.php.

Подготовка

Первым делом нам нужно создать переопределение макета стандартной формы обратной связи через админку Joomla.

Для этого, в админке сайта, перейдем в Расширения -> Менеджер Шаблонов -> Шаблоны -> Параметры Joomla Bootstrap 3.

Теперь создадим переопределение шаблона, нажав Создать переопределение и в секции Компоненты выберем com_contact -> contact.

Создание формы

Откроем в редакторе директорию с темой и приведем файл joomlabootstrap3/html/com_contact/contact/default.php к такому состоянию:

<?php defined( '_JEXEC' ) or die; ?> <div itemscope itemtype="http://schema.org/Person"> <div> <h2>Обратная связь</h2> </div> <? /* Загрузка вложенного шаблона с формой */ ?> <?= $this->loadTemplate( 'form' ) ?> </div>

Теперь перейдем к созданию самой формы. Для этого откроем файл default_form.php в папке joomlabootstrap3/html/com_contact/contact. Полностью всё удалим из него и добавим следующий код:

<?php defined( '_JEXEC' ) or die; ?> <? if ( isset( $this->error ) ) : ?> <div> <?= $this->error ?> </div> <? endif ?> <form action="<?= JRoute::_( 'index.php' ) ?>" method="post">  <div> <label for="jform_contact_name"> Имя <span>*</span> </label> <div> <? $this->form->setFieldAttribute( 'contact_name', 'class', 'form-control' ) ?> <?= $this->form->getInput( 'contact_name' ) ?> </div> </div>  <div>gt; <label for="jform_contact_email"> E-mail <span>*</span> </label> <div> <? $this->form->setFieldAttribute( 'contact_email', 'class', 'form-control' ) ?> <?= $this->form->getInput( 'contact_email' ) ?> </div> </div>  <div> <label for="jform_contact_emailmsg"> Тема <span>*</span> </label> <div> <? $this->form->setFieldAttribute( 'contact_subject', 'class', 'form-control' ) ?> <?= $this->form->getInput( 'contact_subject' ) ?> </div> </div>  <div> <div> <label for="jform_contact_message"> Сообщение <span>*</span> </label> <? $this->form->setFieldAttribute( 'contact_message', 'class', 'form-control' ) ?> <?= $this->form->getInput( 'contact_message' ) ?>  <div> <span>*</span> Обязательно к заполнению </div> </div> </div> <div>  <div> <button type="submit">Отправить</button> </div>  <? if ( $this->params->get( 'show_email_copy' ) ) : ?> <div> <div> <label> <?= $this->form->getInput( 'contact_email_copy' ) ?> Отправить копию этого сообщения на ваш адрес </label> </div> </div> <? endif ?>  <input type="hidden" name="option" value="com_contact"/> <input type="hidden" name="task" value="contact.submit"/> <input type="hidden" name="return" value="<?= $this->return_page ?>"/> <input type="hidden" name="id" value="<?= $this->contact->slug ?>"/> <?= JHtml::_( 'form.token' ) ?> </div> </form>

И добавим немного стилей к этой форме для более наглядного отображения. Откроем файл styles.css, затем добавим к нему следующий код:

.form-feedback { margin-bottom: 59px; } .my-form .form-group { margin-bottom: 20px; } .my-form input.form-control { height: 40px; } .my-form input, .my-form textarea { transition: all 250ms linear; border: none; background-color: #e5e6e6; box-shadow: inset 3px 2px 0 #d8dada; border-radius: 3px; } .my-form .control-label, .my-form input, .my-form textarea { font-size: 16px; font-weight: normal; } .my-form .control-label { color: #7f8c8c; } .my-form textarea.form-control { font-size: 16px; height: 240px; margin-bottom: 5px; resize: vertical; } .my-form label.control-label { text-align: center; padding-top: 7px; padding-right: 0; } .my-form .asterisk { color : #e95d3c; } .my-form .help-required { color: #7f8c8c; float: right; margin-top: 0; margin-bottom: 13px; } .my-form .help-required.help-feedback { float: none; } .my-form input[type="checkbox"] { box-shadow: none; } .my-form .email-copy-checkbox { padding-top: 15px; } .my-form .btn-red { border: none; border-radius: 40px; background-color: #e95d3c; color: #fff; font-size: 18px; padding: 13px 26px; text-transform: uppercase; } .my-form .btn-red:hover { background: #de3d27; } .my-form input:hover, .my-form input:focus, .my-form textarea:hover, .my-form textarea:focus { box-shadow: inset 3px 2px 0 #bec1c1; } #contact-form label[for="jform_contact_message"] { padding: 0 0 10px; } joomla-bootstrap-2

Данная реализация формы обратной связи не включает в себя возможность управления выводом данных из админ-панели. Например, вывод контактов, дополнительной информации и т.п. Создание такого функционала выходит за рамки этой статьи.

Тем не менее, в итоге, мы получили полностью функциональную форму, созданную с помощью css-фреймворка Bootstrap 3 и через которую пользователь вашего сайта может отправлять сообщения на ваш почтовый ящик.

Исходные коды для данной статьи доступны по ссылке: https://github.com/sbogdanov108/example_joomla

bogdanov-blog.ru

MinBootstrap-y. Современный шаблон со строгим дизайном для Joomla.

Разработчики шаблона MinBootstrap-y предоставили пользователям множество функций и расширений для создания достойного веб-ресурса.

MinBootstrap-y - многофункциональный шаблон, разработан на основе таких мощных фреймворков как Warp Framework (Warp 7.3.2) и Bootstrap. Продумано в этом шаблоне все, даже включая панель управления, дизайн страниц, страницу ошибки 404. Warp Framework доказал исправность своей работы уже на нескольких десятках шаблонов и продолжает радовать пользователей расширяющимся функционалом не нагромождая тем не менее настройки.

Настройки MinBootstrap-y разбиты на 2 группы-вкладки - "Общие" и "Профили". Во вкладке "Профили" содержатся настройки оформления шаблона MinBootstrap-y. Ведь дизайн сайта - такой немаловажный аспект работы с шаблоном. Пользователям предоставляется выбрать из 10-ти цветов основной и второстепенные цвета шаблона. Также предоставляется на выбор 10 типов шрифтов для оформления текста, меню, заголовков. Для удобства пользователей в шаблон MinBootstrap-y уже встроены кнопка "Наверх" и показ текущей даты (эти функции можно отключить в данной вкладке).

Во вкладке "Общие" доступны для редактирования такие настройки шаблона как: настройки сжатия CSS JavaScript в один файл для ускорения загрузки страниц сайта, gzip и Data URIs, сжатие для сокращения числа запросов к серверу после которого ускоряется загрузка страниц сайта. Пользователям шаблона MinBootstrap-y доступна функция включения/выключения иконок социальных сетей Twitter, Google+, Facebook.

Структура шаблона MinBootstrap-y представлена следующими модулями:

mod

Страница шаблона целиком:

1 1

Настройки шаблона в панели управления:

Страница ошибки 404:

1 2

СКАЧАТЬ ШАБЛОН

joomla3x.ru

Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 1. Все, что вы хотели знать, но боялись спросить.

В этой серии статей я простым языком расскажу о том, что такое Bootstrap framework и его особенностях применительно Joomla.

Начиная с Joomla 3, в CMS внедрен так называемый Bootstrap framework. Это специальная библиотека CSS-стилей, которая позволяет профессионально и гибко оформить сайт, даже если вы не знаете CSS.

Главным преимуществом Bootstrap framework является возможность создания адаптивного шаблона для сайта на Joomla, который будет одинаково хорошо отображаться и на компьютерах и на мобильных устройствах, таких, как телефоны и планшеты.

Поскольку создание адаптивного дизайна сейчас как никогда актуально, этой статьей я открываю новую серию статей «Создание шаблона Joomla с использованием Bootstrap». В этой серии статей я простым языком расскажу о том, что такое Bootstrap framework и его особенностях применительно Joomla. Мы c нуля создадим шаблон Joomla с помощью Bootstrap и применим его особенности и скрипты к стандартным элементам Joomla.

Зачем мне нужен адаптивный дизайн?

Причин создания адаптивного дизайна несколько, но основная причина – удобство просмотра сайта для пользователей, использующих мобильные устройства.

Если еще несколько лет назад мобильный интернет был скорее роскошью, и подавляющая часть пользователей просматривала сайты со стационарных компьютеров, то сегодня все кардинально изменилось. Доля мобильного трафика растет лавинообразно. Да что скрывать, я и сам теперь использую для выхода в Интернет телефон при каждом удобном и неудобном случае.

Давайте взглянем на один интереснейший график, который показывает доли переходов на сайты Рунета с устройств с различными операционными системами за последние два с половиной года. Он получен лично мной с сервиса статистики Liveinternet.ru и построен в относительном выражении.

Доля мобильного трафика

Мы видим, что с апреля 2013 года доля трафика только с устройств на базе Android (очевидно, мобильных) и iOS(iPhone) выросла с ~18% до ~52%! Только вдумайтесь в эти цифры! Каждое второе посещение сайтов Рунета осуществляется с мобильных устройств!

Конечно, эти цифры нельзя применять к каждому сайту и тематике. Например, на wedal.ru доля мобильного трафика составляет всего 5%. Уж не оттого ли, что у сайта нет мобильной версии? Об этом далее.

Если вы читали статью Joomla, Google, оптимизация сайта для мобильных устройств и файл robots.txt., то уже знаете о том, что Google объявил о том, что сайты, не имеющие мобильной версии (или адаптивного дизайна), будут ранжироваться в мобильном поиске гораздо хуже. Иными словами: зачем показывать в результатах поиска сайт, который не может быть нормально показан на устройстве, с которого осуществляется поиск?

Таким образом, ответ на вопрос «Зачем мне нужен адаптивный дизайн?» вырисовывается сам собой. Если вы не хотите терять значительную долю пользователей, использующих сотовый телефон или планшет, как основное устройство для выхода в Интернет, ваш сайт должен корректно отображаться на этих устройствах.

Что лучше: мобильная версия сайта или адаптивный дизайн?

Я думаю, далеко не все понимают разницу терминов «Мобильная версия сайта» и «Сайт с адаптивным дизайном». Давайте разберемся что есть что.

Мобильная версия сайта подразумевает отдельный шаблон, оптимизированный для мобильных устройств. Когда пользователь обращается к сайту, его браузер передает серверу некоторую информацию, в том числе тип операционной системы и тип устройства. Сервер читает эту информацию и в зависимости от типа устройства решает, какой шаблон выдать пользователю: обычный или мобильный.

Сайт с адаптивным дизайном всегда отдает пользователю одинаковую страницу, но эта страница построена таким образом, что в зависимости от разрешения экрана пользователя она может видоизменяться. Проще говоря, если вы откроете сайт с адаптивным дизайном на мониторе 24’ и затем начнете сжимать браузер по горизонтали, сайт будет меняться у вас на глазах, и всегда будет выглядеть правильно. Элементы, которые уже не будут входить в область браузера из-за его размеров, перескочат на подходящее место. При этом никакой горизонтальной полосы прокрутки вы не увидите.

Каждый из этих подходов имеет право на жизнь. У каждого есть свои достоинства и недостатки, сторонники и противники. Bootstrap framework предоставляет нам возможность создать сайт с адаптивным дизайном, поэтому далее мы будем рассматривать только этот вариант.

Как это работает? Зачем вообще нужен этот Bootstrap?

Каким образом создается «адаптивность»? Если структура сайта хоть немного сложная, стандартных средств CSS для создания адаптивности окажется недостаточно. Простейший пример: горизонтальное меню. На больших экранах оно показывается в одну полосу. На экранах же мобильных устройств, всё, что мы можем сделать с таким меню, так это начать показывать пункты меню друг под другом. Из-за некоторых особенностей горизонтальных меню, даже это не всегда будет возможно.

На помощь нам приходят, так называемые, медиа-запросы, которые появились в CSS3. Они позволяют добавлять для одного и того же элемента страницы различные стили в зависимости от ширины (разрешения) экрана. Благодаря медиа-запросам, в нашем примере с меню мы можем показывать его в стандартном виде на широких экранах и превращать в кнопку с выпадением меню на мобильных устройствах. Это очень удобно.

Вы спросите: «А при чем здесь Bootstrap?». Он в полной мере использует возможности медиа-запросов. Управление колонками сайта становится простым, как никогда. Хотите 3 колонки или 4? Пожалуйста. А на мобильных устройствах они должны вставать друг под другом по 2? Легко! Используя Bootstrap , вы можете создать шаблон Joomla со сложной структурой, не написав при этом, ни строчки CSS-кода. Конечно, здесь я немного лукавлю. Если хочется сделать все красиво, то все равно придется что-то дописать, но это не идет ни в какое сравнение с количеством CSS-кода, который нужно писать без использования Bootstrap.

Помимо формирования колонок, Bootstrap предлагает вам из коробки множество готовых компонентов, которые обычно используются на любом сайте. К вашим услугам: оформленные поля, меню, иконки, кнопки и др. Также в Bootstrap содержит набор самых необходимых скриптов: модальные окна, вкладки, выпадающие меню, подсказки(tooltips), слайдер. Про слайдер стоит упомянуть отдельно. Модуль Wedal Joomla Slider сделан мной специально для использования с Bootstrap. Он не содержит в себе никаких дополнительных скриптов. Если Bootstrap подключен в вашем шаблоне, слайдер сразу будет работать.

Сколько это стоит?

Bootstrap Framework распространяется по свободной лицензии. Это означает, что вы можете свободно скачивать его и использовать как в своих проектах, так и в коммерческих.

Если же вы спросите, сколько стоит адаптивный шаблон, созданный с использованием Bootstrap, я отвечу: «Дорого». Но он того стоит. Поверьте, это непередаваемое чувство, когда открываешь свой сайт со смартфона, находясь где-нибудь в дороге, и можешь его спокойно использовать. В рамках данной серии статей вы сможете создать свой собственный шаблон самостоятельно и совершенно бесплатно.

Смогу ли я использовать Bootstrap с Virtuemart и другими компонентами?

Bootstrap – это в первую очередь CSS-библиотека. Это означает, что она может использоваться на любых страницах сайта. Но принцип работы с ней прямо противоположен классической верстке.

В классической верстке вы узнаёте CSS-класс элемента, и добавляете в свой шаблон CSS-стили для этого класса. При использовании Bootstrap все стили заранее предопределены. Все, что вы должны сделать, указать нужному элементу в макете заранее известный класс.

Из написанного выше следует, что вы можете использовать Bootstrap как с Virtuemart, так и с другими компонентами. Главное условие: макеты страниц компонента должны иметь возможность переопределения в шаблон Joomla. Иными словами, вы должны быть уверены, что при обновлении внесенные вами изменения не будут стерты.

Bootstrap уже из коробки поддерживают многие расширения Joomla. Велика вероятность, что для достижения адаптивности вам вообще не придется ничего менять в расширении.

Где посмотреть примеры сайтов, созданных с использованием Bootstrap?

Очень много информации по Bootstrap и его составляющим вы сможете найти на официальном сайте. Там же, на главной странице, вы увидите примеры и ссылку на каталог сайтов, созданных с использованием Bootstrap.

Начиная со следующей статьи серии, мы будем подробно рассматривать все компоненты Bootstrap Framework и их использование в Joomla. Я хочу подчеркнуть, именно в Joomla. На этом всё. Если у вас остались вопросы, буду рад ответить на них в комментариях. Подписывайтесь на новые выпуски и не пропустите главного.

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

Понравилась статья? Сохраните себе на стену:

Facebook

Twitter

Вконтакте

Одноклассники

Google+

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

wedal.ru

Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 4. Оформление горизонтального и вертикального меню Joomla с помощью Bootstrap.

В этом уроке мы оформим горизонтальное и вертикальное меню для удобной навигации по страницам сайта.

Используя Bootstrap Framework, мы создали базовый шаблон Joomla, позиции модулей и компонента. В этом уроке мы оформим горизонтальное и вертикальное меню для удобной навигации по страницам сайта.

Если вы дочитали серию до этой статьи, то уже знаете, что применяя CSS-фреймворк, мы подстраиваем структуру сайта под готовое оформление, а не наоборот. Для создания красивого меню нам не понадобятся правки CSS (хотя какие-то небольшие изменения можно будет внести), но потребуется понимание того, как создать html-структуру меню в том виде, который требует Bootstrap.

Прижимаем footer шаблона к низу экрана.

Прежде чем мы начнем заниматься меню, предлагаю внедрить в наш шаблон одну небольшую особенность, а именно, прижать footer сайта к низу экрана. В современном web’е это является практически стандартом, потому footer, болтающиеся в середине экрана, на страницах с небольшим количеством контента, режет глаз:

Прижать Footer к низу страницы можно несколькими способами. Мы воспользуемся одним из них. В файл templates/masterbootstrap/css/template.css добавим следующий код:

html, body { height: 100%; } #wrap { position: relative; min-height: 100%; } #wrap section { padding-bottom: 180px; } #footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 180px; }

Мы задали для footer’а абсолютное позиционирование и прижали его к низу страницы. В этом коде важно подобрать высоту footer’а и установить ее в двух местах. Я сделал ее равной 180px.

Если все сделано правильно, наша сайт примет следующий вид:

Создание вертикального меню.

В принципе, вертикальное меню у нас уже создано и имеет базовый вид:

Прежде, чем оформлять меню, мы должны ответить для себя на один вопрос: «Будет ли меню иметь уровни вложенности и если да, то сколько?». Проще говоря, мы должны решить будет меню простым или выпадающим. Рассмотрим оба варианта.

Простое вертикальное меню (без вложенных пунктов).

Для такого меню нам подойдет функционал Bootstrap под названием Navs Pills. Navs Pills как раз реализует простое одноуровневое меню:

Код у него элементарный:

Joomla имеет схожую структуру меню, уже подготовленную для Bootstrap, поэтому все, что нам нужно сделать для интеграции меню с картинки выше – добавить соответствующий класс (nav nav-pills nav-stacked) для ul модуля меню. Сделать это можно в настройках модуля меню в админке Joomla.

Переходим в Расширения –> Менеджер модулей –> Модуль «Menu Example» –> вкладка «Дополнительные параметры» и в опции «Суффикс класса меню» пишем: nav nav-pills nav-stacked . После этого сохраняем модуль, и видим, что вертикальное меню на сайте приняло нужный нам вид:

Синиц цвет – это цвет фона колонки и к меню он не имеет никакого отношения. Цвета колонок я не убираю для большей наглядности. Вы в любой момент можете отключить их в CSS-файле.

Вот и всё. Простое вертикальное меню готово.

Выпадающее вертикальное меню.

По умолчанию в Bootstrap предусмотрено выпадение только одного подуровня меню. Для многих задач этого достаточно, а главное, для реализации выпадающего меню практически ничего дополнительно делать не нужно. Нужно лишь установить настройки модуля меню так, как показано на картинке ниже:

После этого на сайте всё уже будет работать, если, конечно, у вас в меню есть пункты второго уровня вложенности:

Если вам не нравится такое оформление или вы хотите создать более сложное меню, придется потрудиться.

Вот здесь представлено большое количество готовых вариантов меню для Bootstrap. Вы можете использовать их совершенно бесплатно, а основная задача интеграции любого из этих меню в сайт Joomla, сводится к приведении структуры меню Joomla к требуемой, и копирования CSS-кода меню в CSS-файл нашего шаблона Joomla.

В зависимости от сложности меню и вашей фантазии, эта задача может быть как простой, так и весьма сложной.

Вся структура модуля меню хранится в макете этого модуля, который может быть переопределен в шаблон Joomla. В нашем шаблоне уже создано два альтернативных макета для меню. default.php и panel.php. Они находятся по адресу: templates/masterbootstrap/html/mod_menu/. Вы можете сделать копию любого из этих макетов, изменить ее название и поместить в той же папке. Во вновь созданном макете вы должны будете внести изменения таким образом, что структура генерируемого меню совпадала со структурой меню, которое вы хотите интегрировать. Иногда достаточно поправить в макете пару классов, а иногда требуется дописывать php-код. Всё здесь зависит от меню. Когда новый альтернативный макет будет готов, не забудьте выбрать его в настройках модуля (опция «альтернативный макет»).

Используя альтернативные макеты, вы можете создать несколько совершенно разных меню в одном шаблоне Joomla, которые будут выбираться всего одной опцией в настройках модуля – альтернативный макет.

Создание горизонтального меню.

Горизонтальное меню, создается точно также как и вертикальное, с той лишь разницей, что в ul не добавляется класс nav-stacked. Здесь действуют все те же правила, но есть одно отличие. Горизонтальное меню должно помешаться по ширине на всех устройствах, в том числе и мобильных. По умолчанию, если в меню хотя бы 5-6 пунктов, те из них, которые не будут входить на ширину экрана, перепрыгнут на следующую строку вот так:

В целом это приемлемо, но выглядит не слишком красиво. В Bootstrap есть возможность автоматически показывать свернутое меню на маленьких экранах. Далее мы внедрим ее в наш шаблон.

Называется эта штука Navbar. Вот как она выглядит на широких экранах:

А вот так на узких:

На узких экранах меню скрыто, но виден его блок и кнопка с иконкой меню, при нажатии на которую оно выпадает:

Данный Navbar интегрируется с помощью следующего кода:

<nav> <div>  <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div>  <div> <ul> <li><a href="#">Link <span>(current)</span></a></li> <li><a href="#">Link</a></li> <li> <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span></span></a> <ul> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator"></li> <li><a href="#">Separated link</a></li> <li role="separator"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </nav>

Этот код отличается от того, что предлагает нам Joomla, а потому для его интеграции мы создадим альтернативный макет меню.

Действуем по шагам:

Шаг 1. Копируем и переименовываем макет меню.

Копируем файл templates/masterbootstrap/html/mod_menu/default.php, и вставляем в этом же каталоге с именем navbar.php .

В настройках модуля горизонтального меню выбираем новый макет в качестве альтернативного.

Шаг 2. Приводим код в альтернативном макете к исходному коду Navbar.

Это, пожалуй, самое сложное, что предстоит сделать. Нам нужно проанализировать код скопированного макета и привести его к формату Navbar. В данном случае это очень просто. В коде макета есть общий список с пунктами меню ul. Нам нужно добавить часть кода Navbar перед этим ul и два закрывающих тега после.

Было:

Стало:

Не забываем про суффиксы класса меню. Чтобы нужный нам код стал идентичен исходному, ul должен иметь css-класс nav navbar-nav. Мы можем добавить его как в макете, так и в настройках модуля. Я внес изменения в макете, заменив:

<ul

на:

<ul

После проделанных изменений меню на сайте будет выглядеть как navbar. Вот сайт на мониторах:

А вот на телефонах:

Как видите, в интеграции Bootstrap-меню нет ничего сложного. Следуя практике создания альтернативных макетов вы сможете подогнать структуру практически любого модуля под предлагаемую Bootstrap.

Текущую версию шаблона вы можете скачать ниже:

Скачать шаблон Master Bootstrap. Часть 4.

В следующих статьях серии мы продолжим совершенствовать наш шаблон, добавляя в него все новые и новые Bootstrap-элементы.

--------------------

Если вам ближе WordPress, то вы можете скачать готовые темы, плагины, курсы и уроки на сайте InBenefit.

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

Понравилась статья? Сохраните себе на стену:

Facebook

Twitter

Вконтакте

Одноклассники

Google+

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

wedal.ru