Подключение фреймворка Bootstrap к сайту

Александр Мальцев
137K
1
Подключение фреймворка Bootstrap к сайту
Содержание:
  1. Минимальный набор инструментов для разработки на Bootstrap
  2. Загрузка фреймворка Bootstrap
  3. Распаковка архива Bootstrap
  4. Подключение Bootstrap к HTML странице
  5. Комментарии

В этой статье мы разберём как скачать и подключить фреймворк Bootstrap (3 и 4 версий) к сайту.

Минимальный набор инструментов для разработки на Bootstrap

Для создания веб-проектов на фреймворке Bootstrap необходимо иметь:

  • текстовый редактор для работы с кодом (Visual Studio Code, Sublime Text, Atom или др.) или IDE (WebStorm, NetBeans или др.);
  • браузер (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge или др.).

Загрузка фреймворка Bootstrap

Создание веб-проекта, в основу дизайна которого положен фреймворк Bootstrap всегда начинают с его загрузки. Загрузить фреймворк Bootstrap можно различными способами. Например, посредством ссылки, расположенной на сайте getbootstrap.com или с помощью пакетного менеджера npm, Composer, Bower или др. Способ как это осуществить зависит от вашего опыта или конкретной ситуации.

Как установить фреймворк Bootstrap с помощью пакетных менеджеров, а также как осуществить его сборку посредством Grunt, можно почитать в этой статье.

Наиболее просто выполнить загрузку – это воспользоваться ссылкой. На сайте Bootstrap присутствуют 2 ссылки.

Первая ссылка содержит готовые к использованию файлы CSS и JavaScript. Эту сборку в основном используют для изучения фреймворка или для использования в проектах, дизайн которых может быть выполнен в стилях заложенных авторами по умолчанию.

Скачать Bootstrap 3.4.1 Скачать Bootstrap 4.6.0 Скачать Bootstrap 5.0.0-beta2

Вторая ссылка содержит фреймворк в исходных кодах. Эта версия более удобна для разработки сайтов, т.к. позволяет очень просто изменить стили, цветовую гамму компонентов, выполнить их настройку и др. Но эти исходные файлы, перед тем как использовать на странице, нужно будет скомпилировать и минимизировать. Данный процесс обычно автоматизируют, например, с помощью Gulp.

Исходные коды Bootstrap 3.4.1 Исходные коды Bootstrap 4.6.0 Исходные коды Bootstrap 5.0.0-beta2

Распаковка архива Bootstrap

После скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего веб-проекта.

Если рассмотреть архив, то можно заметить, что он имеет следующее содержимое (на примере Bootstrap 3.4.1):

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

В каталоге css находятся стили фреймворка Bootstrap, а в js - плагины для обеспечения работы некоторых компонентов. Плагины написаны с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery.

Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min, она просто минимизирована (сжата).

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

Не минимизированные версии более удобно использовать при разработке, а также для изучения.

Кроме этих файлов, в данный архив ещё входит иконочный шрифт "Glyphicons". Шрифт "Glyphicons" насчитывает более 250 иконок из набора "Glyphicon Halflings". Шрифт представлен с помощью 4 файлов: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).

Скачать Glyphicons (Bootstrap 3.4.1)

Такое разнообразие форматов одного и того же шрифта необходимо для того чтобы обеспечить его отображение во всех браузерах.

Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.

Архив фреймворка Bootstrap 4 практически ничем ни отличается от Bootstrap 3. Основное его отличие в том, что он не содержит шрифт "Glyphicons". Если вам нужны шрифтовые иконки, то их необходимо будет подключить самостоятельно. Например, воспользовавшись одним из следующих наборов: FontAwesome, Octicons, Glyphicons, IcoMoon или др. Если же вы не хотите использовать готовый шрифт, а создать свой, который будет состоять только из нужных значков, то воспользуйтесь этой информацией.

Кроме этого архив Bootstrap 4 содержит ещё файлы «bootstrap-grid.css» и «bootstrap-reboot.css». Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть.

Первый файл («bootstrap-grid.css») содержит сетку Bootstrap, а второй (bootstrap-reboot.css) - нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.

Подключение Bootstrap к HTML странице

Процесс установки фреймворка Bootstrap 3 состоит из подключения следующих файлов к HTML 5 странице:

  1. Bootstrap CSS (bootstrap.min.css);
  2. jQuery (необходима для работы JS плагинов Bootstrap, рекомендуется использовать последнюю на текущий момент версию);
  3. Bootstrap JS (bootstrap.min.js).

Примечание: Файлы JavaScript лучше подключать перед закрывающим тегом body (</body>), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы.

<!doctype html>
<html lang="ru">
<head>
  <!-- Кодировка веб-страницы -->
  <meta charset="utf-8">
  <!-- Настройка viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Подключаем Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css" >
</head>
<body>

  <!-- Контент страницы -->
  ...

  <!-- Подключаем jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Подключаем Bootstrap JS -->
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

Подключение фреймворка Bootstrap 4 осуществляется так:

<!doctype html>
<html lang="ru">
<head>
  <!-- Кодировка веб-страницы -->
  <meta charset="utf-8">
  <!-- Настройка viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Подключаем Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css" >
</head>
<body>

  <!-- Контент страницы -->
  ...

  <!-- Подключаем jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Подключаем плагин Popper (необходим для работы компонента Dropdown и др.) -->
  <script src="js/popper.min.js"></script>
  <!-- Подключаем Bootstrap JS -->
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

Вместо подключения Popper JS и Bootstrap JS можно просто подключить Bootstrap Bundle JS:

<!-- Подключаем Bootstrap Bundle JS (включает в себя Popper JS) -->
<script src="js/bootstrap.bundle.min.js"></script>

Современный подход подключения Bootstrap 4 (с использованием defer):

<!doctype html>
<html lang="ru">
<head>
  <!-- Кодировка веб-страницы -->
  <meta charset="utf-8">
  <!-- Настройка viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- jQuery -->
  <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Popper (необходим для работы некоторых компонентов Bootstrap 4, таких как Dropdown и др.) -->
  <script defer src="js/popper.min.js"></script>
  <!-- Bootstrap JS -->
  <script defer src="js/bootstrap.min.js"></script>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css" >
</head>
<body>

  <!-- Контент страницы -->
  ...

</body>
</html>

Подключить Bootstrap 4 можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):

<!doctype html>
<html lang="ru">
<head>
  <!-- Кодировка веб-страницы -->
  <meta charset="utf-8">
  <!-- Настройка viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- jQuery с CDN -->
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
  <!-- Bootstrap Bundle JS с CDN -->
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js" integrity="sha512-wV7Yj1alIZDqZFCUQJy85VN+qvEIly93fIQAN7iqDFCPEucLCeNFz4r35FCo9s6WrpdDQPi80xbljXB8Bjtvcg==" crossorigin="anonymous"></script>

  <!-- Bootstrap CSS с CDN-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous">
</head>
<body>

  <!-- Контент страницы -->
  ...

</body>
</html>

Подключение «Bootstrap 3.4.1» с CDN:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha512-Dop/vW3iOtayerlYAqCgkVr2aTr2ErwwTYOvRFUpzl2VhCMJyjQF0Q9TjUXIo6JhuM/3i0vVEt2e/7QQmnHQqw==" crossorigin="anonymous">
<!-- Дополнительные стили (не обязательно) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha512-iy8EXLW01a00b26BaqJWaCmk9fJ4PsMdgNRqV96KwMPSH+blO82OHzisF/zQbRIIi8m0PiO10dpS0QxrcXsisw==" crossorigin="anonymous">

<!-- jQuery (необходим для Bootstrap JS) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg==" crossorigin="anonymous"></script>

Для проверки работоспособности фреймворка, создадим кнопку, при поднесении к которой будет показываться всплывающая подсказка popover.

<button type="button" class="btn btn-primary" data-toggle="popover" title="Сообщение" data-content="Ура, Bootstrap 4 работает">Поднеси ко мне курсор</button>

<!-- После подключения jQuery, Popper и Bootstrap JS -->
<script>
  $(function () {
    $('[data-toggle="popover"]').popover({trigger:'hover'});
  });
</script>
Проверка работоспособности фреймворка Bootstrap 4 (отображение popover подсказки при поднесении к кнопке курсора) Скачать пример

Комментарии ()

  1. Константин
    04 марта 2019, 08:04
    Добрый день.
    Подскажите пожалуйста, в скаченной папке Bootstrap 4.2.1 нет jquery.min.js, popper.min.js. Где их можно скачать?
    Второй вопрос. Если скачать jquery.min.js, popper.min.js и подключить, то дополнительное подключение с помощью CDN:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    
    Так возможно? Конфликтов не будет? Это влечет только увеличение кода?
    1. Александр Мальцев
      06 марта 2019, 15:31
      Привет!
      Это ссылки на официальные релизы. Поэтому в них нет сторонних библиотек. Библиотеку jQuery можно загрузить с «jquery.com». Минимизированную версию отсюда, а не минимизированную отсюда.
      Если нужно «bootstrap.min.js» и «popper.min.js», то можно просто подключить «bootstrap.bundle.min.js».
      Если по каким-то причинам вам всё таки его нужно подключить отдельно, то загрузить его можно со страницы этого проекта на Github. Осуществляется это на вкладке «Релизы».

      Подключать и то и другое не нужно, т.к. вы замедлите загрузку страницы. У вас к странице будут подгружены 2 файла с одинаковым содержимым. Выберите что-то одно.
    2. sonbel
      21 февраля 2018, 08:53
      Спасибо!
      1. Игорь Денисов
        03 февраля 2016, 15:12
        Доброго времени суток!
        У меня возник такой вопрос — если помимо bootstrap.js и jquery.js подключить ещё jquery-ui.js, то никаких проблем не возникнет? UI с bootstrap-ом конфликтовать не будет?
        Заранее спасибо за ответ!
        1. Александр Мальцев
          03 февраля 2016, 17:04
          Привет!
          Да, т.к. некоторые компоненты jQuery UI имеют такие же названия, что и компоненты Bootstrap. Например, tooltip и button.
          Чтобы этого избежать, можно, например, сделать так:
          <!-- Подключаем jQuery UI -->
          <script src="jqueryui.js"></script>
          <!-- Изменяем имена плагинов jQuery UI для того чтобы они не совпадали с Bootstrap -->
          <script>
          $.widget.bridge('uitooltip', $.ui.tooltip);
          $.widget.bridge('uibutton', $.ui.button);
          </script>
          <!-- Подключаем Bootstrap -->
          <script src="bootstrap.min.js"></script>
          
          1. Игорь Денисов
            04 февраля 2016, 13:10
            И, кстати, это единственные два компонента или еще есть совпадающие?
            1. Александр Мальцев
              05 февраля 2016, 14:31
              Нет, только этих два.
              К тому же можно выбрать при скачивании кастомную сборку, исключив из Bootstrap или jQuery UI эти компоненты.
              1. Игорь Денисов
                06 февраля 2016, 11:44
                Да, спасибо!
                Уже посмотрел, так же как и на jQuery UI можно кастомную версию собрать…
                Спасибо Вам за отзывчивость. Очень полезный сайт.
            2. Игорь Денисов
              04 февраля 2016, 12:57
              Спасибо за ответ! Буду знать и в будущем применять.
          2. Ануш
            11 января 2016, 13:05
            Здравствуйте! Спасибо вам за труд. С помощью вашего сайта я научилась верстать :)
            У меня 2 вопроса:
            1. Как ускорить скорость загрузки сайта? Можно ли в файле bootstrap.min.css оставить только те стили, которые я использую, а остальные удалить?
            2. Обязательно ли подключить шрифты, если я их не использую?
            1. Александр Мальцев
              11 января 2016, 15:18
              Да, это очень важный этап, но он необходим только для сайта в продакшене.
              Наиболее просто это сделать на странице getbootstrap.com/customize/. Данная страница специально предназначена для создания сборки, в которую можно включить только необходимые стили и скрипты.
              Для этого необходимо отметить галочками только используемые модули.
              Создание сборки Bootstrap, в которую будут входить только необходимые модули
              Например, если Вам не нужны шрифты, то отключаем Glyphicons. Т.е. выбирайте только то, что используете.

              После этого переходим в конец страницы и нажимаем на кнопку «Compile and Download». Получаем сборку Bootstrap 3 и подключаем её (или заменяем существующие файлы). После этого Ваш сайт будет загружаться быстрее…
              1. Ануш
                12 января 2016, 09:19
                Огромное спасибо. Потому что оптимизация картинок, подключение кэша и т.п. так и не дали ожидаемый результат. Осталось оптимизировать код, но как, не знала. Bootstrap для меня пока темный лес. Спасибо :)
            2. Евгений
              30 ноября 2015, 16:23
              Здравствуйте!
              Начал знакомиться с Bootstrap 3.3.5. Пока на базе подключения.
              Возникли вопросы:
              1. Почему js подключаете в body, а не в header?
              2. Расскажите подробно, как подключить свой css файл (и переопределять стили bootstrap.css). Чтобы при выходе новой версии — обновить без проблем.
              3. Распишите подробно, пожалуйста, о файле bootstrap-theme.css (для чего он нужен, как его подключить и как его использовать).
              4. Как Вы подключаете шрифты?
              Я шрифт подключаю так:
              @font-face {
                  font-family: 'Glyphicons Halflings';
                  src: url('../fonts/glyphicons-halflings-regular.eot');
                  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
                  url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
                  url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
                  url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
                  font-weight: normal;
                  font-style: normal;
              }
              .glyphicon {
                  font-family: 'Glyphicons Halflings';
              }
              
              Использую так:
              <p class="glyphicon">Текст</p>
              
              На сколько верно это?
              1. Александр Мальцев
                01 декабря 2015, 13:33
                Здравствуйте, Евгений!
                1. В разделе head правильно подключать только те сущности, которые используются для отображения самой страницы. Например, стили CSS. А файл bootstrap.min.js для отображения самой страницы не нужен, и его желательно помещать в самый конец. Это приведёт к тому, что пользователь быстрее сможет увидеть контент вашей страницы, т.к. скрипты будут грузиться в самом конце.
                Давайте по-другому… Скрипты обычно выполняют некоторые действия. А чтобы это осуществить необходимо, чтобы страница (DOM-дерево) была загружена. Поэтому нет смысла помещать скрипты в раздел head, когда ещё страница не загружена и мы не можем обратиться к её элементам. Т.е. более корректно размещать их перед закрывающим тегом body.
                При этом необходимо обратить внимание на очерёдность подключения js файлов: jQuery -> Bootstrap -> Ваши скрипты.
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script src="js/bootstrap.min.js"></script>
                <!-- Ваши скрипты -->
                <script src="js/my.js"></script>
                
                2. Свой CSS файл необходимо подключать после файла bootstrap.min.css. Это необходимо чтобы ваши стили были последними и переопределяли Bootstrap. В некоторых случаях нужно добавить к значению CSS свойства !important.
                <link href="css/bootstrap.min.css" rel="stylesheet">
                <link href="css/my.css" rel="stylesheet">
                
                3. Файл bootstrap-theme.css содержит некоторые дополнительные эффекты (анимацию) для компонентов. Его необходимо подключить после основного файла Bootstrap CSS. Этот файл не обязательный.
                <link href="css/bootstrap.min.css" rel="stylesheet">
                <link href="css/bootstrap-theme.min.css.css" rel="stylesheet">
                <link href="css/my.css" rel="stylesheet">
                
                4. Иконочные шрифты (glyphicons-halflings) подключать не надо, они и так уже подключены в файле bootstrap.min.css.
                1. Евгений
                  02 декабря 2015, 09:16
                  Здравствуйте, Александр.
                  1. В конец body это классно (в cms работает), а вот в html нет. Не пойму, почему не работает и как это проверить.
                  2. Можно подробнее, а то у меня произошёл конфликт файлов css и пропали шрифты.
                  3. Где об этом можно почитать подробно?
                  4. Опишите, как их использовать? Например, как в своем css изменить цвет и т.п.
                  1. Александр Мальцев
                    02 декабря 2015, 13:22
                    Здравствуйте, Евгений.
                    1. Скорее всего, вы неправильно указываете пути к файлам. Проверить это очень легко, клавиша F12 в браузере (инструменты разработчика). Там есть всё что нужно.
                    2. Что тут можно сказать, вы что-то неверно прописали в своём файле.
                    Тут всё очень просто. Допустим, вы хотите изменить значение color класса Bootstrap .text-success на красный (red). Открываете свой файл css и прописываете туда:
                    .text-success {
                      color: #ff0000;
                    }
                    
                    3. Там было примерно написано то же самое. А про него рассказывать больше нечего. Просто его подключаете и компоненты Bootstrap типа кнопок, меню, выпадающих списков и многих других, получают анимацию или какие-то эффекты.
                    4. Для этого необходимо использовать пустой элемент span или i, к которому необходимо добавить классы. Первый класс glyphicon (указывает, что необходимо использовать шрифт font-family: 'Glyphicons Halflings'), второй класс — за саму иконку (например, звёздочка: glyphicon-star)
                    //эта строчка отобразит звёздочку из шрифта Glyphicons Halflings
                    <span class="glyphicon glyphicon-star"></span>
                    
                    Т.к. это шрифт, то стили для него необходимо задавать как для текста:
                    //большая звёздочка (40px) красного цвета
                    <span class="glyphicon glyphicon-star" style="font-size:40px; color:#ff0000"></span>
                    
              2. Кирилл
                09 сентября 2015, 11:26
                Добрый день. Можно ли каким-то образом применить стили bootstrap.min.css только к определённым элементам.
                Это связано с тем, что разработчики WordPress в своём файле «style.css» при именовании классов очень часто применяют те же названия, которые использует Bootstrap.
                1. Александр Мальцев
                  09 сентября 2015, 14:02
                  Добрый день.
                  В файле bootstrap.css содержатся общие стили, которые применяются по умолчанию к большинству элементам HTML и стили, которые вы задаёте элементам с помощью классов Bootstrap.
                  Для того чтобы узнать какие стили накладываются на элемент: открываем браузер (например: Google Chrome) -> нажимаем клавишу F12 -> открываем вкладку Elements -> выбираем нужный элемент в дереве или с помощью значка «Лупа» -> изучаем содержимое правой панели.
                  Просмотр стилей, которые накладываются на элемент
                  1. Кирилл
                    09 сентября 2015, 17:52
                    Может можно оборачивать все в class или id (например, bootstrap).
                    1. Александр Мальцев
                      10 сентября 2015, 14:46
                      Нет, так просто это не получится. Лучше их переименовать и привести всё в порядок.
                2. Дамир
                  21 мая 2015, 12:22
                  круто буду ждать :)
                  1. Александр Мальцев
                    15 июня 2015, 16:12
                    Про способы установки платформы и её сборку с помощью Grunt можно почитать в этой статье.
                  2. Дамир
                    19 мая 2015, 20:25
                    Привет, преотличный сайт!
                    В новых версиях у Bootstrap появился третий файл js (npm.js) для чего он нужен?
                    Можешь немного рассказать про grunt и bower. Для чего они нужны и как ими пользоваться?
                    Спасибо!
                    1. Александр Мальцев
                      20 мая 2015, 16:09
                      Привет, Дамир!
                      Спасибо. Про nmp.js, grunt и bower расскажу в отдельной статье.
                    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.