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

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

В этой статье я расскажу о том, как с помощью Bootstrap создавать в шаблоне Joomla фиксированные и плавающие адаптивные блоки под модули и компонент 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

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

Блок:

<div class=”col-md-3”></div>

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

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

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

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

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

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

<div class=”col-lg-2 col-md-3 col-sm-6 col-xs-12”></div>

или вот так:

<div class=”col-lg-2 col-md-3 col-sm-6”></div>

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

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

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

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

<div class=”row”>
	<div class=”col-md-8”></div>
	<div class=”col-md-4”></div>
</div>

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

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

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

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

<div class=”row”>

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

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

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

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

<div class=”container”>
	<div class=”row”>
		<div class=”col-md-8”></div>
		<div class=”col-md-4”></div>
	</div>
</div>

Это и будет являться готовым кодом сетки 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 id="wrap">
			<!--Navigation-->
				<header id="header" class="header header--fixed hide-from-print" role="banner">

				</header>
				<!--Navigation-->
				<section>

				</section>
		<!-- page -->        
		<!-- JS -->
		<script type="text/javascript" src="/<?php echo $tpath; ?>/js/template.js"></script>
		<!-- JS -->
	</body>
</html>

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

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

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

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

<div class="container-fluid">

	<!-- Header -->
	<div class="row">
		<div id="header" class="col-md-12">	
			header
		</div>	
	</div>
	<!-- Header -->
	
	<!-- Область между header и footer -->
	<div class="row">
	
		<!-- nav -->
		<div id="nav" class="col-md-3 col-sm-12">	
			nav
		</div>	
		<!-- nav -->
		
		<!-- article -->
		<div id="article" class="col-md-6 col-sm-12">	
			article
		</div>	
		<!-- article -->
		
		<!-- aside -->
		<div id="aside" class="col-md-3 col-sm-12">	
			aside
		</div>	
		<!-- aside -->
		
	</div>	
	<!-- Область между header и footer -->	
	
	<!-- Footer -->	
	<div class="row">
		<div id="footer" class="col-md-12">	
			footer
		</div>	
	</div>
	<!-- Footer -->
	
</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 id="wrap">
			<!--Navigation-->
				<header id="header" class="header header--fixed hide-from-print" role="banner">
				
					<div class="container-fluid">

						<!-- Header -->
						<div class="row">
							<div id="header" class="col-md-12">	
								header
							</div>	
						</div>
						<!-- Header -->
						
					</div>	
					
				</header>
				<!--Navigation-->
				<section>

					<div class="container-fluid">
						
						<!-- Область между header и footer -->
						<div class="row">
						
							<!-- nav -->
							<div id="nav" class="col-md-3 col-sm-12">	
								nav
							</div>	
							<!-- nav -->
							
							<!-- article -->
							<div id="article" class="col-md-6 col-sm-12">	
								article
							</div>	
							<!-- article -->
							
							<!-- aside -->
							<div id="aside" class="col-md-3 col-sm-12">	
								aside
							</div>	
							<!-- aside -->
							
						</div>	
						<!-- Область между header и footer -->	
						
						<!-- Footer -->	
						<div class="row">
							<div id="footer" class="col-md-12">	
								footer
							</div>	
						</div>
						<!-- Footer -->
						
					</div>				
				
				</section>
		<!-- page -->        
		<!-- JS -->
		<script type="text/javascript" src="/<?php echo $tpath; ?>/js/template.js"></script>
		<!-- JS -->
	</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="название_позиции_модуля" style="block" />       
<?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 id="wrap">
			<!--Navigation-->
				<header id="header">
				
					<div class="container-fluid">

						<!-- Header -->
						<div class="row">
							<div id="header" class="col-md-12">	
								<?php  if($this->countModules('header')) { ?>
									<jdoc:include type="modules" name="header" style="block" />        
								<?php } ?>
							</div>	
						</div>
						<!-- Header -->
						
					</div>	
					
				</header>
				<!--Navigation-->
				<section>

					<div class="container-fluid">
						
						<!-- Область между header и footer -->
						<div class="row">
						
							<!-- nav -->
							<div id="nav" class="col-md-3 col-sm-12">	
								<?php  if($this->countModules('nav')) { ?>
									<jdoc:include type="modules" name="nav" style="block" />        
								<?php } ?>
							</div>	
							<!-- nav -->
							
							<!-- article -->
							<div id="article" class="col-md-6 col-sm-12">	
								<jdoc:include type="message" />
								<jdoc:include type="component" />
							</div>	
							<!-- article -->
							
							<!-- aside -->
							<div id="aside" class="col-md-3 col-sm-12">	
								<?php  if($this->countModules('aside')) { ?>
									<jdoc:include type="modules" name="aside" style="block" />        
								<?php } ?>
							</div>	
							<!-- aside -->
							
						</div>	
						<!-- Область между header и footer -->	
						
						<!-- Footer -->	
						<div class="row">
							<div id="footer" class="col-md-12">	
								<?php  if($this->countModules('footer')) { ?>
									<jdoc:include type="modules" name="footer" style="block" />        
								<?php } ?>
							</div>	
						</div>
						<!-- Footer -->
						
					</div>				
				
				</section>
		<!-- page -->        
		<!-- JS -->
		<script type="text/javascript" src="/<?php echo $tpath; ?>/js/template.js"></script>
		<!-- JS -->
	</body>
</html>

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

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

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

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

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

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

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