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

11.08.2014 (обновлено: 24.01.2019) Александр Мальцев

Содержание:

На этом уроке узнаем, как скачать и подключить фреймворк Bootstrap (версию 3 или 4) к сайту.

Набор инструментов для изучения Bootstrap

Минимальный набор инструментов (программ) для создания веб-проектов на фреймворке Bootstrap:

текстовый редактор для работы с кодом ("Блокнот", "Brackets", "Notepad++" или др.);
браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.).

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

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

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

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

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

Скачать Bootstrap 3.4.0 Скачать Bootstrap 4.2.1

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

Исходные коды Bootstrap 3.4.0 Исходные коды Bootstrap 4.2.1

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

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

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

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.0)

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

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

Архив фреймворка 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 странице:

Bootstrap CSS (bootstrap.min.css);
Последней версии библиотеки jQuery (необходима для работы JS плагинов Bootstrap);
Bootstrap JavaScript (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.3.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.3.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>

Подключить 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">

    <!-- Подключаем Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

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

    <!-- Подключаем jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- Подключаем плагин Popper -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    
    <!-- Подключаем Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>

CDN Bootstrap 3.4.0:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">

<!-- Дополнительные стили (не обязательно) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css" integrity="sha384-jzngWsPS6op3fgRCDTESqrEJwRKck+CILhJVO5VvaAZCq8JYf8HsR/HPpBOOPZfR" crossorigin="anonymous">

<!-- Подключаем jQuery (необходим для Bootstrap JavaScript) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" 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 подсказки при поднесении к кнопке курсора

Скачать пример

Если статья понравилась, то поделитесь ей в социальных сетях:

Дата публикации

11-08-2014

Автор

Александр Мальцев

Просмотры

58930

Избранное

Нравится

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

sonbel 21 февраля 2018, 08:53 0

Спасибо!
Игорь Денисов 03 февраля 2016, 15:12 0

Доброго времени суток!
У меня возник такой вопрос — если помимо bootstrap.js и jquery.js подключить ещё jquery-ui.js, то никаких проблем не возникнет? UI с bootstrap-ом конфликтовать не будет?
Заранее спасибо за ответ!
1. Александр Мальцев 03 февраля 2016, 17:04 0
  Здравствуйте, Игорь.
  Да, т.к. некоторые компоненты jQuery UI имеют такие же названия, что и компоненты Bootstrap. Например, tooltip и button.
  Чтобы этого избежать, можно, например, сделать так:
```

<script src="jqueryui.js"></script>

<script>
$.widget.bridge('uitooltip', $.ui.tooltip);
$.widget.bridge('uibutton', $.ui.button);
</script>

<script src="bootstrap.min.js"></script>
```
  1. Игорь Денисов 04 февраля 2016, 13:10 0
    
    И, кстати, это единственные два компонента или еще есть совпадающие?
    1. Александр Мальцев 05 февраля 2016, 14:31 0
      
      Нет, только этих два.
      К тому же можно выбрать при скачивании кастомную сборку, исключив из Bootstrap или jQuery UI эти компоненты.
      1. Игорь Денисов 06 февраля 2016, 11:44 0
        
        Да, спасибо!
        Уже посмотрел, так же как и на jQuery UI можно кастомную версию собрать…
        Спасибо Вам за отзывчивость. Очень полезный сайт.
  2. Игорь Денисов 04 февраля 2016, 12:57 0
    
    Спасибо за ответ! Буду знать и в будущем применять.
Ануш 11 января 2016, 13:05 0

Здравствуйте! Спасибо вам за труд. С помощью вашего сайта я научилась верстать :)
У меня 2 вопроса:
1. Как ускорить скорость загрузки сайта? Можно ли в файле bootstrap.min.css оставить только те стили, которые я использую, а остальные удалить?
2. Обязательно ли подключить шрифты, если я их не использую?
1. Александр Мальцев 11 января 2016, 15:18 0
  
  Да, это очень важный этап, но он необходим только для сайта в продакшене.
  Наиболее просто это сделать на странице getbootstrap.com/customize/. Данная страница специально предназначена для создания сборки, в которую можно включить только необходимые стили и скрипты.
  Для этого необходимо отметить галочками только используемые модули.
  
  Например, если Вам не нужны шрифты, то отключаем Glyphicons. Т.е. выбирайте только то, что используете.
  
  После этого переходим в конец страницы и нажимаем на кнопку «Compile and Download». Получаем сборку Bootstrap 3 и подключаем её (или заменяем существующие файлы). После этого Ваш сайт будет загружаться быстрее…
  1. Ануш 12 января 2016, 09:19 0
    
    Огромное спасибо. Потому что оптимизация картинок, подключение кэша и т.п. так и не дали ожидаемый результат. Осталось оптимизировать код, но как, не знала. Bootstrap для меня пока темный лес. Спасибо :)
Евгений 30 ноября 2015, 16:23 0
Здравствуйте!
Начал знакомиться с 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 0
  Здравствуйте, Евгений!
  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 0
    Здравствуйте, Александр.
    
    В конец body это классно (в cms работает), а вот в html нет. Не пойму, почему не работает и как это проверить.
    Можно подробнее, а то у меня произошёл конфликт файлов css и пропали шрифты.
    Где об этом можно почитать подробно?
    Опишите, как их использовать? Например, как в своем css изменить цвет и т.п.
    1. Александр Мальцев 02 декабря 2015, 13:22 0
      
      Здравствуйте, Евгений.
      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>
Кирилл 09 сентября 2015, 11:26 0

Добрый день. Можно ли каким-то образом применить стили bootstrap.min.css только к определённым элементам.
Это связано с тем, что разработчики WordPress в своём файле «style.css» при именовании классов очень часто применяют те же названия, которые использует Bootstrap.
1. Александр Мальцев 09 сентября 2015, 14:02 0
  
  Добрый день.
  В файле bootstrap.css содержатся общие стили, которые применяются по умолчанию к большинству элементам HTML и стили, которые вы задаёте элементам с помощью классов Bootstrap.
  Для того чтобы узнать какие стили накладываются на элемент: открываем браузер (например: Google Chrome) -> нажимаем клавишу F12 -> открываем вкладку Elements -> выбираем нужный элемент в дереве или с помощью значка «Лупа» -> изучаем содержимое правой панели.
  1. Кирилл 09 сентября 2015, 17:52 0
    
    Может можно оборачивать все в class или id (например, bootstrap).
    1. Александр Мальцев 10 сентября 2015, 14:46 0
      
      Нет, так просто это не получится. Лучше их переименовать и привести всё в порядок.
Дамир 21 мая 2015, 12:22 0

круто буду ждать :)
1. Александр Мальцев 15 июня 2015, 16:12 0
  
  Про способы установки платформы и её сборку с помощью Grunt можно почитать в этой статье.
Дамир 19 мая 2015, 20:25 0

Привет, преотличный сайт!
В новых версиях у Bootstrap появился третий файл js (npm.js) для чего он нужен?
Можешь немного рассказать про grunt и bower. Для чего они нужны и как ими пользоваться?
Спасибо!
1. Александр Мальцев 20 мая 2015, 16:09 0
  
  Привет, Дамир!
  Спасибо. Про nmp.js, grunt и bower расскажу в отдельной статье.

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