2016
24
Авг

Как установить Вootstrap

grigoriev
2260
Установка bootstrap

Решил увеличить свою скорость вёрстки сайтов. Погуглив я понял что скорость разработки можно повысить используя 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.

Поделиться:

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

Защитный код
Обновить

Нажимая кнопку «Отправить», я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности этого сайта

Используя данный сайт, вы даете согласие на использование файлов cookie, помогающих мне сделать его удобнее для вас. Уведомление о cookie