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

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

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

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

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

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

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

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

2

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

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

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

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

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

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

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

3

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

  • 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 подподклеток, и так до бесконечности. Представить себе это можно так:

4

Таблицы, для упрощения, сокращены до 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 показана на рисунке:

5

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

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. Он показан на рисунке:

6

Сразу зададим условие, что наш макет на 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-код от базового шаблона.

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

7

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

8

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

Все, что нам остается, это добавить вместо текстов в блоках позиции модулей 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>

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

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

9

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

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

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

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

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

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

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

4.7857142857143 1 1 1 1 1 4.79

Комментарии  

+1 # Автору звала и наилучшие пожелания!Александр 20.02.2017 16:43
Спасибо автору, ценный материал и отлично подан!
Да и весь сайт супер, просто находка.
P.S. Не критично, конечно, но в последнем листинге незначительная опечатка: перед закрывающем должен быть закрывающий
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapКонстантин 31.08.2016 10:32
Спасибо, полезная статья!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки Bootstrapirena 20.08.2016 20:46
Все загрузилось
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки Bootstrapirena 20.08.2016 20:05
Добрый день! Я скачала шаблон с вашего сайта, часть 3, но в движке в менеджере расширений, поиск, пишет "ничего не найдено". Что делать?
Ответить | Ответить с цитатой | Цитировать
0 # Скрытые ссылкиАнтон 11.08.2016 10:48
На всякий случай хотел уточнить, в Master Bootstrap точно не будет скрытых ссылок и других пакостей? Или все-таки стоит создавать шаблон абсолютно с нуля?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Скрытые ссылкиWedal 16.08.2016 04:20
Антон, я не могу сказать за разработчика Master Bootstrap. Пока я не замечал в шаблоне скрытых ссылок и других пакостей, но что будет в будущем - неизвестно. Вы можете брать шаблон из уроков данной серии. Он чистый.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки Bootstrapsevhenia 25.05.2016 14:01
Я не очень большой знаток по joomla и bootstrap поетому нужен мудрый совет.
У меня есть сайт написаный на bootstap 3 вожможно подключить его на joomla? может быть как шаблон...
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapWedal 26.05.2016 04:58
sevhenia, сайт не может быть написан на Bootstrap 3. Bootstrap - это CSS-фреймворк, который используется только для оформления сайта. Напишите, на чем реально работает ваш сайт? Если PHP, то какая CMS или самописный? Или голый HTML?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapDmitry564352 25.04.2016 14:35
"Поскольку мы хотим создать на основе этого шаблона свой, уникальный шаблон с использованием Bootstrap, удалим весь, уже созданный код между тегами:

и
и
После этих действий наш шаблон будет выглядеть следующим образом"
Он не будет выглядеть тем образом, что у автора в посте этой главы, а будет выглядеть вот так:
"defined('_JEXEC') or die;

include 'includes/params.php';

if ($params->get('compile_sass', '0') === '1')
{
require_once "includes/sass.php";
}

?>







body {
background: url("") repeat fixed center top rgba(0, 0, 0, 0);
}
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapWedal 26.04.2016 04:14
Dmitry, кажется я понял, почему у вас "все не так". Дело в том, что с момента написания первой статьи разработчик Masterbootstrap обновил свой шаблон на официальном сайте. В него было добавлены некоторые новые элементы. Вы скачали уже обновленный шаблон с оф. сайта, поэтому что-то не совпадает с описанным в статье. Скачайте шаблон в конце этой статьи. Именно по нему будут идти все дальнейшие уроки.
Если вы в целом неплохо разбираетесь в коде шаблона, можно использовать и обновленный. Принцип весь тот же самый, только будут встречаться нестыковки кода, вроде тех, что вы привели.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapDmitry564352 25.04.2016 14:30
И все равно. Автор дает ссылку на master-bootstrap, где между и нифига не , а:


Я конечно не против того, что это можно самому поправить, но подобные мелочи могут быть и в других моментах, которые я и другие пользователи могут не заметить и будут долго ломать голову, почему у них не так, как у автора.
Просьба, делать все точно и последовательно.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapDmitry654345 19.04.2016 13:02
>подключает соответствующий php-файл, в котором происходит подключение скриптов и стилей.
И там никаких стилей, особо.
"
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapWedal 20.04.2016 04:29
Dmitry, а какие вам нужны стили? В этом файле только цвета фонов наших колонок. Больше пока ничего не нужно. Всё остальное формирует Bootstrap.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapDmitry654345 19.04.2016 12:49
Все равно, реально путаница. В результативном index.php вы советуете включить строки:


вторая часть

В третьей же статье их нет.
Если опираться на третью статью, создав такой же index.php, скачав master-bootstrap с шаблоном, ссылку на который вы давали во второй статье, поправить потом так, как в третьей части вашего блога, исправить так же css, но страница состоит лишь из текста "header, nav, article etc". цвет отсутствует у блоков. Неделю перечитываю и никак не могу понять, что снова нужно убирать, как бы игнорируя вторую часть блога, что добавлять итц. Попробовал применить даже уже вами созданный шаблон (4я часть) - он то же далек от вашего рещультата. Сумбурно как-то расписано все у вас. Сначала одно. Затем вдруг другой шаблон.
те же несоответствия в index.php у вас тут и в скаченном шаблоне (ваша ссылка во второй части ("Чтобы не выполнять эту работу, я использую бесплатный шаблон Joomla 3, который называется Master Bootstrap. Скачать его можно по этой ссылке. ") https://github.com/gsuez/master-bootstrap-3/archive/master.zip. index.php в том файле, до блока отличается от вашего примера. Хотя, вы четко рассказали, что нужно удалять.
Можно конечно самому импровизировать в разных моментах, но у вас часто оговорены советы, рассчитанные "для самых маленьких", что как бы намекает, что импровизировать не нужно.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapWedal 20.04.2016 04:28
Dmitry, из вашего большого комментария я понял только, что у вас ничего не получается, и я плохо пишу статьи. Нет ни одного конкретного вопроса, а значит не будет и конкретных ответов. Свою неприязнь оставьте, пожалуйста, себе. Вас никто не заставляет читать эти статьи. Можете найти те, которые будут лучше.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapУколов Алексей 18.04.2016 12:24
Спасибо. очень доходчиво, и понятно... Автор молодец, от всей души благодарю
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapDmitry654345 15.04.2016 09:25
Конечно, полный чайник, но: css/template.css не прописан в index.php, в примере. с какого будут выводиться цвета, если прописан лишь ява код? :)
Вы же сами предлагали вписать путь к css/template.css в предыдущих статьях, а тут у вас в примере он вдруг резко исчез.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapWedal 18.04.2016 03:56
Dmitry, строчка:
Код:<?php include 'includes/head.php'; ?>
подключает соответствующий php-файл, в котором происходит подключение скриптов и стилей.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapВладимир 11.12.2016 22:21
Цитирую Wedal:
Dmitry, строчка:

подключает соответствующий php-файл, в котором происходит подключение скриптов и стилей.

У меня тоже не подключился template.css. Подключается его минимизированная версия - template.min.css. В связи с этим хотелось бы узнать почему? Это где-то прописано самой Joomla? У меня стоит последняя версия 3.6.4. Попробовал удалить template.min.css. и прописать template.css тупо через
Ответить | Ответить с цитатой | Цитировать
+2 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapВладимир 11.12.2016 23:03
Нашел. Я тоже скачал Master Bootstrap с официального сайта. Вообще в этом шаблоне объявление файлов стилей, скриптов и т.п. происходит в файле includes/params.php. В новых версиях шаблона файл стилей template.css не объявляется, объявляется только template.min.css. Поэтому у Dmitry было столько вопросов. Сразу причину не найдешь.
В общем, лучше убрать ссылку на скачивание Master Bootstrap с официального сайта или сделать поправку, что стили нужно менять в двух файлах стилей template.css и template.min.css. Или добавлять в файле includes/params.php строчку кода Код:$doc->addStyleSheet('templates/' . $this->template . '/css/template.css');
после первого Код:// Add Stylesheets
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapGeorge 17.04.2017 13:46
Да, действительно, только минимизированная версия подключается. После указания ссылки на template.css появляется цвет, но под хедером какая-то белая горизонтальная полоса. Если использовать код без указания хедера отдельно - полоса пропадает.
Ответить | Ответить с цитатой | Цитировать
0 # joomla 3 bootstrap 3m-alex 03.04.2016 17:33
просто божественный материал. идеальное изложение, автор безусловно талантлив!

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

с удовольствием подписываюсь на рассылку!

ps видно, что картинки уникальные и вложен труд ) на картинке со структурой шаблона есть опечатка напротив папки images - написано что там css хранится )
Ответить | Ответить с цитатой | Цитировать
0 # RE: joomla 3 bootstrap 3Wedal 04.04.2016 04:47
m-alex, спасибо! Картинку поправил.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки Bootstraprocker2003 03.03.2016 18:09
Спасибо! Жду с нетерпением!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки Bootstraprocker2003 02.03.2016 23:37
А когда будет следующая статья ? прочитал все 3 очень понравилось! очень полезная информация
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapWedal 03.03.2016 05:11
rocker2003, скоро. Скорее всего будет следующей выпущенной.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки Bootstrapspro1 25.02.2016 09:47
Спасибо за очередную полезную статью! давным давно собирался освоить бутстрап и тут появилась хорошая возможность сделать это с вашей помощью! Скажите пожалуйста, вот к примеру я создал модуль меню, и мне нужно, чтобы стили бутстрапа к этому модулю не применялись и соответственно модуль выводился бы просто без какого либо оформления, так как я привык оформлять менюшки сам и мне так удобнее, но в шаблоне бутстрап мастер если добавить меню в любой позиции, то оно выводится с форматированием. Заранее спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 3. Знакомство с системой разметки BootstrapWedal 03.03.2016 05:14
spro1, это уже подсуетились разработчики Joomla. Вы можете либо переопределить макет меню в используемый шаблон и убрать классы "nav", которые Bootstrap считает за меню, либо просто оформлять меню через CSS как вам вздумается, используя в CSS классы так, чтобы их приоритет был выше, чем приоритет классов Bootstrap. Я в своей работе всегда иду вторым путем.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх