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

20.06.2023

219.1K

Содержание:

Минимальный набор инструментов для разработки на Bootstrap
Варианты установки Bootstrap
Подключение Bootstrap через CDN
Локальная установка Bootstrap
Комментарии

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

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

Перед подключением Bootstrap и создании на его основе дизайна сайтов и веб-приложений необходимо иметь следующий минимальный набор программ:

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

Варианты установки Bootstrap

Создание дизайна веб-проекта, в основу которого положен Bootstrap всегда начинается с его установки.

Подключить Bootstrap к сайту можно разными способами, например:

с помощью CDN (в этом варианте помещать файлы непосредственно в проект не нужно);
локально с настройками по умолчанию (для этого необходимо скачать дефолтную готовую сборку Bootstrap с GitHub, извлечь из неё необходимые файлы и подключить их к HTML странице);
локально со своими настройками (для этого необходимо скачать исходные коды и программу для сборки frontend).

Какой способ выбрать зависит конечно от вашей конкретной задачи, знаний и опыта.

Сборка из исходных кодов

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

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

При этом загрузить исходные файлы Bootstrap можно как вручную с GitHub, так и с помощью пакетного менеджера (npm, yarn, RubyGems, Composer или NuGet).

Для загрузки исходных кодов Bootstrap с помощью npm нужно ввести следующую команду в консоль:

npm install bootstrap

Подробная инструкция по сборке проекта из исходных кодов Bootstrap v4 с помощью Gulp приведена на этой странице.

Подключение Bootstrap через CDN

Подключение через CDN — это самый простой вариант установки Bootstrap. Здесь скачивать ничего не нужно. Необходимо лишь вставить в HTML ссылки на файлы, размещенные на CDN серверах.

Подключение Bootstrap 5:

HTML

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

  <!-- Bootstrap CSS (jsDelivr CDN) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <!-- Bootstrap Bundle JS (jsDelivr CDN) -->
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</head>
<body>
  <!-- Контент страницы -->
  ...

</body>
</html>

Пример подключения Bootstrap 4 с помощью CDN:

HTML

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

  <!-- Bootstrap CSS (Cloudflare CDN) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
  <!-- jQuery (Cloudflare CDN) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- Bootstrap Bundle JS (Cloudflare CDN) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha512-igl8WEUuas9k5dtnhKqyyld6TzzRjvMqLC79jkgT3z02FvJyHAuUtyemm/P/jYSne1xwFI06ezQxEwweaiV7VA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
  <!-- Контент страницы -->
  ...

</body>
</html>

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

HTML

<!doctype html>
<html lang="ru">
<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>...</title>

  <!-- 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">
  <!-- Дополнительные стили Bootstrap (не обязательно) -->
  <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.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- Bootstrap JS -->
  <script defer 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>
</head>
<body>
  <!-- Контент страницы -->
  ...

</body>
</html>

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

HTML

<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 подсказки при поднесении к кнопке курсора)

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

Локальная установка Bootstrap

Для локальной установки Bootstrap (с настройками по умолчанию) необходимо:

скачать готовую сборку с GitHub;
распаковать полученный архив и скопировать из него минимизированные версии файлов («bootstrap.min.css» и «bootstrap.bundle.min.js») в свой проект;
подключить эти файлы к HTML странице.

1. Скачивание готовой сборки Bootstrap

Скачать дефолтную готовую к использованию сборку Bootstrap можно по следующим ссылкам (загрузка осуществляется с GitHub):

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

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

2. Распаковка загруженного архива

После скачивания архива его необходимо распаковать.

Содержание архива Bootstrap v5.1.3:

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

В каталоге css находятся стили фреймворка Bootstrap, а в js – плагины необходимые для работы различных компонентов.

Плагины начиная с Bootstrap 5 написаны без использования библиотеки jQuery. Если вы используете фреймворк Bootstrap v3 или v4, то для работы его JavaScript файла необходима библиотека jQuery. Её нужно подключить перед Bootstrap JS.

В большинстве случаев из архива нам нужны только эти 2 файла: «bootstrap.min.css» и «bootstrap.bundle.min.js»

Зачем другие файлы?

Минимизированные файлы

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

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

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

CSS файлы Bootstrap

Файлы «bootstrap.css», «bootstrap.rtl.css» и их минимизированные версии – это полные версии. Они включают в себя все стили фреймворка.

Остальные используются, когда вы хотите использовать не целый CSS фреймворк, а только какую-то его часть:

bootstrap-grid.* – сетка;
bootstrap-utilities.* – утилиты;
bootstrap-reboot.* – набор стилей для исправления различий дефолтных стилей браузеров (предназначен для облегчения кроссбраузерной вёрстки).

JavaScript файлы Bootstrap

«bootstrap.bundle.min.js» – это версия, которая включает в себя «bootstrap.min.js» и библиотеку «popper.min.js».

«bootstrap.min.js» – это версия без библиотеки «popper.min.js», от которой он зависит.

В случае использования «bootstrap.min.js» необходимо «popper.min.js» подключить самостоятельно:

HTML

<script defer src="/assets/js/popper.min.js"></script>
<script defer src="/assets/js/bootstrap.min.js"></script>

Поддержка RTL-языков в Bootstrap

Файлы, содержащие rtl предназначены для разработки сайтов, заточенных под RTL-языки, т.е. языки, которые пишутся и читаются справа налево.

Исходные карты файлов в Bootstrap

Файлы с map – это исходные карты, содержащие данные в JSON формате, которые нужны для связывания css и js файлов с их исходными файлами. Они используются для того, чтобы можно было вживую выполнять отладку исходных файлов прямо в веб-браузере.

Использования Bootstrap 5 в качестве модуля

В Bootstrap 5 добавлен скрипт, построенный как ESM («bootstrap.esm.js» и «bootstrap.esm.min.js»). Он позволяет использовать этот фреймворк в качестве модуля:

JavaScript

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Иконочный шрифт Glyphicons в Bootstrap

В Bootstrap 3, кроме CSS и JavaScript файлов, содержится ещё иконочный шрифт «Glyphicons». Шрифт «Glyphicons» насчитывает более 250 иконок из набора «Glyphicon Halflings». Этот шрифт представлен в архиве посредством 4 файлов: «glyphicons-halflings-regular.eot», «glyphicons-halflings-regular.svg», «glyphicons-halflings-regular.ttf», «glyphicons-halflings-regular.woff».

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

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

В Bootstrap v4 и v5 не содержится иконочный шрифт. Если он нужен, то его нужно подключить самостоятельно.

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

Если же нужен Glyphicons, то его можно взять из архива Bootstrap 3, а стили с GitHub.

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

Иконки SVG с открытым исходным кодом сейчас имеются от самих разработчиков Bootstrap. Можно воспользоваться ими. Официальная страница Bootstrap Icons: https://icons.getbootstrap.com/

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

3. Копирование файлов в проект и подключение их к странице

После распаковки загруженного архива скопируйте нужные файлы в проект.

Для Bootstrap v3 и v4 дополнительно загрузите библиотеку jQuery.

Пример локального подключения Bootstrap 4 к странице:

HTML

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

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css" >
  <!-- jQuery -->
  <script defer src="/assets/js/jquery.min.js"></script>
  <!-- Bootstrap JS + Popper JS -->
  <script defer src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <!-- Контент страницы -->
  ...

</body>
</html>

Пример локального подключения Bootstrap 5 к странице:

HTML

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

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css" >
  <!-- Bootstrap JS + Popper JS -->
  <script defer src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <!-- Контент страницы -->
  ...

</body>
</html>

Комментарии: 24

Константин

04.03.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>

Так возможно? Конфликтов не будет? Это влечет только увеличение кода?

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

06.03.2019, 15:31

Привет!
Это ссылки на официальные релизы. Поэтому в них нет сторонних библиотек. Библиотеку jQuery можно загрузить с «jquery.com». Минимизированную версию отсюда, а не минимизированную отсюда.
Если нужно «bootstrap.min.js» и «popper.min.js», то можно просто подключить «bootstrap.bundle.min.js».
Если по каким-то причинам вам всё таки его нужно подключить отдельно, то загрузить его можно со страницы этого проекта на Github. Осуществляется это на вкладке «Релизы».

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

sonbel

21.02.2018, 08:53

Спасибо!

Игорь Денисов

03.02.2016, 15:12

Доброго времени суток!
У меня возник такой вопрос — если помимо bootstrap.js и jquery.js подключить ещё jquery-ui.js, то никаких проблем не возникнет? UI с bootstrap-ом конфликтовать не будет?
Заранее спасибо за ответ!

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

03.02.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>

Игорь Денисов

04.02.2016, 12:57

Спасибо за ответ! Буду знать и в будущем применять.

Игорь Денисов

04.02.2016, 13:10

И, кстати, это единственные два компонента или еще есть совпадающие?

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

05.02.2016, 14:31

Нет, только этих два.
К тому же можно выбрать при скачивании кастомную сборку, исключив из Bootstrap или jQuery UI эти компоненты.

Игорь Денисов

06.02.2016, 11:44

Да, спасибо!
Уже посмотрел, так же как и на jQuery UI можно кастомную версию собрать…
Спасибо Вам за отзывчивость. Очень полезный сайт.

Аноним

11.01.2016, 13:05

Здравствуйте! Спасибо вам за труд. С помощью вашего сайта я научилась верстать :)
У меня 2 вопроса:
1. Как ускорить скорость загрузки сайта? Можно ли в файле bootstrap.min.css оставить только те стили, которые я использую, а остальные удалить?
2. Обязательно ли подключить шрифты, если я их не использую?

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

11.01.2016, 15:18

Да, это очень важный этап, но он необходим только для сайта в продакшене.
Наиболее просто это сделать на странице getbootstrap.com/customize/. Данная страница специально предназначена для создания сборки, в которую можно включить только необходимые стили и скрипты.
Для этого необходимо отметить галочками только используемые модули.
Создание сборки Bootstrap, в которую будут входить только необходимые модули

Создание сборки Bootstrap, в которую будут входить только необходимые модули

Например, если Вам не нужны шрифты, то отключаем Glyphicons. Т.е. выбирайте только то, что используете.

После этого переходим в конец страницы и нажимаем на кнопку «Compile and Download». Получаем сборку Bootstrap 3 и подключаем её (или заменяем существующие файлы). После этого Ваш сайт будет загружаться быстрее…

Аноним

12.01.2016, 09:19

Огромное спасибо. Потому что оптимизация картинок, подключение кэша и т.п. так и не дали ожидаемый результат. Осталось оптимизировать код, но как, не знала. Bootstrap для меня пока темный лес. Спасибо :)

Аноним

30.11.2015, 16:23

Здравствуйте!
Начал знакомиться с Bootstrap 3.3.5. Пока на базе подключения.
Возникли вопросы:

Почему js подключаете в body, а не в header?
Расскажите подробно, как подключить свой css файл (и переопределять стили bootstrap.css). Чтобы при выходе новой версии — обновить без проблем.
Распишите подробно, пожалуйста, о файле bootstrap-theme.css (для чего он нужен, как его подключить и как его использовать).
Как Вы подключаете шрифты?

Я шрифт подключаю так:

@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>

На сколько верно это?

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

01.12.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.

Аноним

02.12.2015, 09:16

Здравствуйте, Александр.

В конец body это классно (в cms работает), а вот в html нет. Не пойму, почему не работает и как это проверить.
Можно подробнее, а то у меня произошёл конфликт файлов css и пропали шрифты.
Где об этом можно почитать подробно?
Опишите, как их использовать? Например, как в своем css изменить цвет и т.п.

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

02.12.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>

Аноним

09.09.2015, 11:26

Добрый день. Можно ли каким-то образом применить стили bootstrap.min.css только к определённым элементам.
Это связано с тем, что разработчики WordPress в своём файле «style.css» при именовании классов очень часто применяют те же названия, которые использует Bootstrap.

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

09.09.2015, 14:02

Добрый день.
В файле bootstrap.css содержатся общие стили, которые применяются по умолчанию к большинству элементам HTML и стили, которые вы задаёте элементам с помощью классов Bootstrap.
Для того чтобы узнать какие стили накладываются на элемент: открываем браузер (например: Google Chrome) -> нажимаем клавишу F12 -> открываем вкладку Elements -> выбираем нужный элемент в дереве или с помощью значка «Лупа» -> изучаем содержимое правой панели.
Просмотр стилей, которые накладываются на элемент

Просмотр стилей, которые накладываются на элемент

Аноним

09.09.2015, 17:52

Может можно оборачивать все в class или id (например, bootstrap).

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

10.09.2015, 14:46

Нет, так просто это не получится. Лучше их переименовать и привести всё в порядок.

Аноним

21.05.2015, 12:22

круто буду ждать :)

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

15.06.2015, 16:12

Про способы установки платформы и её сборку с помощью Grunt можно почитать в этой статье.

Аноним

19.05.2015, 20:25

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

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

20.05.2015, 16:09

Привет, Дамир!
Спасибо. Про nmp.js, grunt и bower расскажу в отдельной статье.