Twitter Bootstrap основывается на сетчатой системе, которая разбивает веб-страницу на 12 столбцов равной ширины. Как мы узнали , CSS управляет внешним видом страницы, используя систему классов и идентификаторов (ID). В Twitter Bootstrap код class="spanl" присваивает сущности, например div-блоку, размер, равный ширине одного столбца, class="span2" соответствует ширине двух столбцов и т. д.
Помните, что на веб-странице Joomla! присутствует содержимое одного компонента (например, каталога ссылок или контактов) и в дополнение к этому, чаще всего, содержимое одного или нескольких моду¬лей. Мы будет организовывать эти элементы на странице, опираясь на сетку.
Для того чтобы посмотреть, как это работает, создадим левый столбец с несколькими позициями модулей и присвоим ему ширину (span) 3, затем столбец компонента с шириной 6 и правый столбец также шириной 3. Для этого объявления следует окружить jdoc тегами div с указанием соответствующих классов:
<div class="span3">
<jdoc: :include type=" 'modules" name= "position-0" />
<jdoc: :include type=' 'modules" name= "position-1" />
<jdoc: :include type=' 'modules" name= "position-2" />
<jdoc: :include type=' 'modules" name= "position-3" />
<jdoc: : include type=' 'modules" name= "position-4" />
<jdoc: : include type=' 'modules" name= "position-5" />
</div>
<div class="span6">
<jdoc:include type="component" /> </div>
<div class="span3">
<jdoc:include type="modules" name="position-6" />
<jdoc:include type="modules" name="position-7" />
<jdoc:include type="modules" name="position-8" />
<jdoc:include type="modules" name="position-9" />
<jdoc:include type="modules" name="position-10" />
<jdoc:include type="modules" name="position-11" />
<jdoc:include type="modules" name="position-12" />
<jdoc:include type="modules" name="position-13" />
<jdoc:include type="modules" name="position-14" />
</div>
Теперь ваша веб-страница стала похожа, и это куда ближе к желаемой компоновке содержимого страницы. Для визуализации страницы использовалась базовая стилизация Joomla! Bootstrap, а также мы определили три столбца разной ширины
Одно из преимуществ использования Joomla! bootstrap.css в качестве основы д. новой таблицы стилей заключается в том, что этот файл содержит много totobi классов и идентификаторов, которые вы можете сразу же использовать.
Например, мы можем добавить код class="site" к тегу body, чтобы включить автоматическое применение макетов для клиентской части сайта (в противоположное классу class=" admin", который подключает административные шаблоны). Так же давайте добавим теги div с классом body и container вокруг всего содержимо нашей css-таблицы.
<div class="body"> <div class="container">
(существующие позиции и блоки div)
</div>
</div>
body определяет некоторые базовые характеристики всего сайта, такие как основной шрифт текста, a container управляет областью страницы, в которой, собственно, находятся материалы сайта. По умолчанию область материалов выравнивается по центру страницы, и для нее устанавливается ширина 940 пикселей. Обычно несколько модулей помещают на самый верх страницы и чаще всего туда переносят верхнее меню и поле поиска. Поэтому давайте передвинем позиции position-0 и position-1 в новую строку наверху страницы:
<div class="row body-top">
<div class="span8">
<jdoc:include type="modules" name="position-l" />
</div>
<div class="span4">
<jdoc:include type="modules" name="position-0" />
</div>
</div>
Мы сделали позицию position-1 шире, чем position-0, так как меню обычно бывает шире поля поиска, а на сайтах на базе Joomla! для поиска традиционно используют позицию position-0. Для нижней части экрана мы создадим строку с тремя позициями модулей, равномерно распределенными по ширине страницы:
<div class="row body-bottom">
<div class="span4">
<jdoc:include type="modules" name="position-12" />
</div>
<div class="span4">
<jdoc:include type="modules" name="position-13" />
</div>
<div class="span4">
<jdoc:include type="modules" name="position-14" />
</div>
</div>
Также давайте добавим несколько часто используемых строк. Модуль Навигатор сайта (Breadcrumb) обычно отображается в горизонтальной строке над основны¬ми материалами страницы, поэтому под определенной выше верхней строкой мы добавим новую строку во всю ширину страницы, в которой будет выводиться содержащая данный модуль позиция position-2:
<div class="spanl2 breadcrumb"»
<jdoc:include type="modules" name="posltion-2" />
</div>
Обратите внимание, что на этот раз мы использовали класс breadcrumb. Благода¬ря этому будет работать встроенная стилизация модуля такого типа из Bootstrap в файле template.css. Схожим образом, добавьте классы nav и search в блоки <div>, содержащие позиции position-1 и position-0:
<div class="span8 nav">
<jdoc:include type="modules" name="position-l" />
</div>
<div class="span4 search">
<jdoc:include type="modules" name="position-0" />
</div>
Содержимое центра экрана поместите в строку с классом row-middle. Наконец, нам понадобится пространство, в которое мы поместим заголовок страницы, такой как название сайта, изображение или другой контент. Поскольку наличие модуля в этой позиции очень полезно — например, на.случай, если вам потребуется опубликовать срочное объявление, — мы поместим туда позицию position-11. Базовая структура страницы готова.
Вы наверняка заметили, что область в центре страницы, содержащая материал, слишком узкая, и если бы она дополнительно делилась на столбцы, как при ото-бражении макета Блог категории (Blog), то эти столбцы получились бы слишком маленькими. Кроме того, если бы модулей в правом или левом столбце не было, то страница бы выглядела сжатой и довольно странной. Для того чтобы спра¬виться с этой проблемой, добавим код РНР, который будет сжимать столбцы, не содержащие на определенной странице никакие модули. Помните, что вы мо¬жете управлять отображением модулей на различных страницах, привязывая их к конкретным пунктам меню.
В начало файла, внутри самого первого блока PHP-кода добавьте следующие строки:
$middlespan = 'span6';
$left = true;
$right = true;
if ($this->countModules('position-3') == 0
AND $this->countModules('position-4') == 0
AND $this->countModules('position-5') == 0
AND $this->countModules('position-6') == в
AND $this->countModules('position-7') == 0
AND $this->countModules('position-8') == 0
AND $this->countModules('position-9') == 0
AND $this->countModules('position-10') == 0):
$middlespan = 'spanl2';
$left = false;
$right = false; elseif
($this->countModules('position-3') == 0
AND $this->countModules('position-4') == 0
AND $this->countModules('position-5') == 0):
$middlespan = 'span9';
$left = false; elseif
($this->countModules('position-6') == 0
AND $this->countModules('position-7') == 0
AND $this->countModules('position-8') == в
AND $this->countModules('position-9'j == 0
AND $this->countModules('position-10') == 0):
$middlespan = 'span9';
Jright = false; endif;
Давайте разберемся, что здесь происходит. Во-первых, мы создаем переменную РНР с именем $middlespan и присваиваем ей значение 'span6', то есть размер div-блока, в котором содержится компонент. Затем мы определяем еще две переменные $left и $right, присваивая обеим значение true.
После этого мы подсчитываем количество модулей, связанных с позициями в двух столбцах, и если они все пусты, то присваиваем переменной $middlespan значение spanl2 (полная ширина страницы), а переменным $left и $right — значение false. Если же они не все пусты, то проверяем позиции в левом столбце, и если там пусто, то присваиваем переменной $middlespan значение span9, а переменной $left — значение false.
В противном случае мы подсчитываем модули в правом столбце, и если там пусто, то присваиваем переменной $middlespan значение span9, а переменной $right — значение false.
Теперь нужно добавить еще немного кода РНР. Поменяйте этот блок:
<div class="span6">
<jdoc:inc"lude type="component" /> </div>
на такой:
<div class=<?php echo $middlespan; ?>>
<jdoc:include type="component" />
</div>
Это означает, что, вместо того чтобы всегда занимать шесть столбцов Bootstrap, в случае если крайние столбцы пусты, центральный блок занимает 12 столбцов, а если пуст только один из крайних столбцов, то он использует 9 оставшихся столбцов.
Наконец, мы должны приказать браузеру не использовать левый и правый столб¬цы, если они пусты (в шаблонах Joomla! это действие часто называют «схлопнуть столбцы»). Для этого div-блок row-middle нужно изменить следующим образом:
<div class="row-middle">
<?php if (left == true) : ?>
<div class="span3">
<jdoc:include type="modules" name="position-3" />
<jdoc:include type="modules" name="position-4" />
<jdoc:include type="modules" name="position-5" />
</div> <?php endif; ?>
<div class=<?php echo $middlespan; ?>>
<jdoc:include type="component" />
</div>
<?php if ($right == true) : ?>
<div class="span3">
<jdoc:include type="modules" name="position-6" />
<jdoc:include type="modules" name="position-7" />
<jdoc:include type="modules" name="position-8" />
<jdoc:include type="modules" name="position-9" />
<jdoc:include type="modules" name="position-10" />
</div> <?php endif; ?> </div>
Здесь происходит следующее: если значение $left равно true (а его мы определили раньше), то освобождается пространство для отображения модулей слева. В противном случае этот раздел <divx/div> вообще не создается. То же самое верно и для правого столбца. Обратите внимание на использование знака ==. В РНР это означает «равно» (для того чтобы привыкнуть к такой форме записи, может потребоваться некоторое время).