Авг
Как установить Вootstrap
Решил увеличить свою скорость вёрстки сайтов. Погуглив я понял что скорость разработки можно повысить используя html, css фреймворк. Мой выбор пал на Bootstrap. В этой заметке я опишу как подключить Bootstrap 3 к сайту.
Для начала я хотел бы сказать что такое фреймворк и какие есть преимущества его использования. Фреймворк - это каркас или можно сказать основа какой либо программной системы. По отношению к html, css фреймворку это базовый набор каких то html элементов и css правил (например уже готовые кнопки, поля, формы и тд). Ещё один плюсом использования twitter bootstrap является адаптивная модульная сетка, что упростит разработку вёрстки под мобильные устройства. А сейчас вёрстку под экраны с малым разрешением требуют повсеместно. Так же используя это фреймворк мы получим кроссбраузерный сайт настроенный под все современные браузеры. Используя Bootstrap мы получим уже готовые:
- Модульную сетку резиновую или адаптивную
- Готовые шрифты (типографику)
- Готовые таблицы, формы и другие их элементы
- Горизонтальные, вертикальные, выпадающие меню навигации
- Подключив js библиотеки мы получим модальные окна, вкладки, слайдеры
И так преимущества использования фреймворка очевидны
Как подключить Bootstrap
Перед установкой bootstrap 3 нужно скачать. Идём на официальный сайт twitter bootstrap по этой ссылке и качаем исходник нажав на левую кнопку под которой написано "Compiled and minified CSS, JavaScript, and fonts". Так же исходник можно скачать по этой ссылке с гитхаба. Из полученного архива извлекаем папки css, js, fonts и переносим их например в C:\bootstrap\public_html. В этой же папке создаём файл index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--//для ИЕ-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--//для адаптивности в мобилных устройствах-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My bootstrap</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!--//подкл. дополнительные библиотеки для старых версий ИЕ-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<button type="button" class="btn btn-primary btn-lg">Бутстрап подключён</button>
<!--//подкл. jquery и bootstrap js-->
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.11.0/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
Запускаем index.php в браузере, и если мы видим большую синюю кнопку с надписью Бутстрап подключён, то наше подключение удалось
Подключение Bootstrap к joomla
Подключение Bootstrap к joomla происходит по аналогии как я подключал к joomla syntaxhighlighter, это описано здесь.
Идём в файл шаблона, который мы используем на нашем сайте. Напоминаю он находится в корне нашего сайта в папке template, представим на минуту что мы используем
шаблон beez_20. Поэтому мы заходим в папку beez_20 и открываем файл index.php в любом текстовом редакторе. Но перед этим скопируем в папку шаблона нужные нам
файлы bootstrap. В папку css соответственно папки beez_20 копируем файл bootstrap.min.css или bootstrap.css, просто файл min это сжатая версия. В папку fonts
копируем все шрифты glyphicons-halflings-regular. Это шрифты для иконок. В папку js копируем bootstrap.min.js. Всё, все нужные нам файлы перенесены. Переходим
к файлу index.php. Для начала подключим css стили. Находим в фале такой вот тег <jdoc:include type="head" /> и после него вставляем ниже указанный код.
<link href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/
html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/
respond.min.js"></script>
<![endif]-->
Идём дальше. Подключаем js. Находим в index.php тег </body> и после него вставляем такой код:
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap.min.js"></script>
Обращу ваше внимание на то, что бы корректно работали js скрипты twitter bootstrap, версия подключаемой библиотеки jquery должна быть не ниже 1.9. Всё, теперь bootstrap 3 подключён к joomla.