Создание адаптивного шаблона 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 базовая сетка шаблона создается очень просто. Достаточно всего лишь понимать принципы ее формирования. Используя подобную технику, можно создавать сложные многоколоночные шаблоны, перестраивая колонки на разных разрешениях экрана.

Об авторе

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

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

• Об авторе
• Портфолио
• Услуги
• Контакты