Bootstrap 4 как подключить: Загрузка. Начало работы · Bootstrap. Версия v4.0.0

Содержание

Введение. Начало работы · Bootstrap

Cмотреть на GitHub

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и шаблонами страниц.

Быстрый старт

Хотите использовать Бутстрап в своем проекте? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом. Нужна система управления пакетами или исходники Bootstrap? Перейдите на страницу загрузки.

CSS

Скопируйте и вставьте часть кода <link> в свой <head> перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

JS

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Мы используем тонкую сборку jQuery, но также поддерживается полная версия.

Поместите дин из следующих тегов <script> в конце страниц, прямо перед закрывающим тегом </body>, чтобы включить их. Сначала должен быть jQuery, затем Popper.js, а затем наши плагины JavaScript.

В связке

Включите все необходимое в один скрипт с нашим пакетом. Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper, но не jQuery. Дополнительную информацию о том, что входит в Bootstrap, можно найти в нашем разделе Содержание.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.
net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
Отдельно

Если вы решите использовать отдельное решение для сценариев, сначала должен быть Popper.js, а затем наши плагины JavaScript.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
Компоненты

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper. js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

Показать компоненты, требующие JavaScript
  • Уведомления отмены
  • Кнопки изменения состояний и чекбоксов/»радио»
  • Карусель для поведения «слайд», элементы контроля и индикаторы
  • Коллапс для изменения видимости содержимого
  • Выпадающие элементы для отображения и расположения (также требует Popper.js)
  • Модальные окна для отображения, расположения и создания поведения прокрутки
  • Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
  • Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
  • Отслеживание прокрутки и обновления навигации

Начальный шаблон страницы

Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> <script src="https://code.
jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script> --> </body> </html>

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

Важные глобальные атрибуты

Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

HTML5 doctype

Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.

<!doctype html>
<html lang="en">
  ...
</html>

«Отзывчивый» мета-тэг

Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Вы можете посмотреть пример этого в действии на странице starter template.

Размер ширины и высоты элемента

Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.

В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:

.selector-for-some-widget {
  box-sizing: content-box;
}

С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный

box-sizing для класса .selector-for-some-widget.

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

  • The Official Bootstrap Blog.
  • the official Slack room.
  • Чат с камрадами по Bootstrap. Канал ##bootstrap
    на сервере irc.freenode.net.
  • Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).
  • При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

CSP и встроенные SVG

Некоторые компоненты Bootstrap включают встроенные SVG в наш CSS для единообразного и простого стиля компонентов в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP

, мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через background-image), поэтому Вы можете более тщательно изучить свои варианты.

Основываясь на обсуждениях сообщества, некоторые варианты решения этой проблемы в Вашей собственной кодовой базе включают замену URL-адресов локально размещенными ресурсами, удаление изображений и использование встроенных изображений (невозможно во всех компонентах) и изменение вашего CSP. Наша рекомендация — внимательно изучить свои собственные политики безопасности и при необходимости выбрать лучший путь для дальнейшего развития.

Подключение Bootstrap 4 на сайт


Для того, чтобы быстро подключить bootstrap 4 на сайт, достаточно использовать CDN

Ниже приведен пример подключения 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="https://stackpath. bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <!-- Подключаем Bootstrap JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>

 

Просмотров: 2615

Please enable JavaScript to view the comments powered by Disqus.

Установка и знакомство с Bootstrap 4

Автор Алексей На чтение 3 мин Просмотров 1.2к. Опубликовано Обновлено

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

Создание базового HTML каркаса

Открываем barackets (ну или любой другой редактор кода), создаем пустую страничку, со следующим содержимым

<!DOCTYPE html>
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body>
 
</body> 
</html>

сохраняем (файл — сохранить как), в index.html

Подключение bootstrap

Вариант 1 — локально: идем на сайт getbootstrap.com и скачиваем актуальную версию.

Далее распаковываем архив туда где сохранили базовый каркас

и подключаем основные файлы.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body> 

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Здесь — тег который отвечает за адаптивность, ну и подключен основной css и js файлы, но не хватает jquery (jquery.com) — без данной библиотеки, много работать не будет, так что скачиваете 3ю версию и так же подключаете.

Вариант 2 — Используем SDN — рекомендую

Все то же самое, но уже не чего не нужно скачивать

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath. bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
<script src="js/script.js"></script>
</body>
</html>

Здесь я все необходимое подключил, через SDN (сеть доставки контента) + создал и подключил пустой css и js файлы — в которых будем прописывать свои стили и код.

Bootstrap 4. Начало работы. Шаблон

Фреймворк Bootstrap получил очень широкое распространение благодаря массе факторов, главным из которых являлось использование классов для быстрого построения адаптивной сетки, основанной на 12 столбцах. Также Bootstrap предоставляет в своем составе набор плагинов jQuery, позволяющий простым добавлением кода вставить такие интерактивные элементы, как карусель (или слайдер), вплывающие подсказки, модальные окна и др.

Огромное количество сайтов было сделано на основе версии 3, последней из которых является Bootstrap 3.3.7 (перейти на официальный сайт). Более года разрабатывался Bootstrap 4, который был доступен для скачивания в alpha-версии. На данный момент  можно использовать версию 4.1.1 Bootstrap-4. Лучше всего скачивать его с официального сайта, хотя вы можете это сделать и на русскоязычном сайте, если с английским пока беда.

Загрузка и подключение файлов Bootstrap 4

Bootstrap 4 доступен для скачивания в скомпилированном виде, т.е. файлы, которые вы получите после распаковки архива будут в формате css и js, причем они будут размещены в соответствующих папках css и js.

Можно также скачать исходные файлы, которые подойдут для разработчиков, знакомых с SASS (SCSS). Этот вариант лучше подходит для тех, кто будет менять значение переменных для создания собственных параметров сетки, цветов, отступов или шрифтов. Если вы пока не разбираетесь в принципах SASS, имеет смысл подключать стандартную версию Bootstrap 4 и переопределять некоторые правила в собственном стилевом файле. Также можно будет подключать различные темы Bootstrap.

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

<!— подключение css-файла —> <link rel=»stylesheet» href=»https://html-plus. in.ua/wp-content/litespeed/localres/stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css» integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»> <!— подключение нужной версии jQuery —> <script src=»https://html-plus.in.ua/wp-content/litespeed/localres/code.jquery.com/jquery-3.3.1.slim.min.js» integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo» crossorigin=»anonymous»> </script> <!— подключение popper.js, необходимого для корректной работы некоторых плагинов Bootstrap 4 —> <script src=»https://html-plus.in.ua/wp-content/litespeed/localres/cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js» integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=»anonymous»> </script> <!— подключение js-файла —> <script src=»https://html-plus.in.ua/wp-content/litespeed/localres/stackpath.bootstrapcdn. com/bootstrap/4.1.1/js/bootstrap.min.js» integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T» crossorigin=»anonymous»> </script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!— подключение css-файла —>

<link rel=»stylesheet» href=»https://html-plus.in.ua/wp-content/litespeed/localres/stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css»

integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»>

 

 

<!— подключение нужной версии jQuery —>

<script src=»https://html-plus.in.ua/wp-content/litespeed/localres/code.jquery.com/jquery-3.3.1.slim.min.js»

integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo» crossorigin=»anonymous»>

</script>

 

<!— подключение popper. js, необходимого для корректной работы некоторых плагинов Bootstrap 4 —>

<script src=»https://html-plus.in.ua/wp-content/litespeed/localres/cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js»

integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=»anonymous»>

</script>

  

<!— подключение js-файла —>

<script src=»https://html-plus.in.ua/wp-content/litespeed/localres/stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js»

integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T» crossorigin=»anonymous»>

</script>

Плюсом данного способа подключения файлов Bootstrap является то, что вы пользуйтесь кэшированной версией Bootstrap-4 для «облегчения» страницы и ускорения загрузки, т.к. такой способ использует ряд сайтов, которые уже, возможно, загружал пользователь на свой компьютер.

Для тех, кто использует npm или  другие системы управления пакетами (например, Composer), существует ряд вариантов загрузок через пакетные менеджеры, представленные на официальном сайте или его русскоязычной версии.

Содержимое архива с Bootstrap 4

Внутри папки css вы найдете ряд файлов, внутреннее содержимое которых состоит из разных составляющих. Точнее — в папках css и js будут представлены следующие файлы:

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

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

Если вам нужна только сетка Bootstrap 4, имеет смысл подключать только файл bootstrap-grid.min.css.

Карты исходного кода CSS (bootstrap.*.map) доступны для использования лишь с определенными инструментами разработчика в браузере. Для их использования необходимо знание работы препроцессоров.

Файлы в папке js имеют также разное содержимое. Для использования файла bootstrap.min.js необходимо подключить jQuery и Popper, а файлы bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js уже включают Popper, но не jQuery.

В таблице ниже представлен список включенных в различные css-файлы компонентов:

CSS файлыРазметкаСодержаниеКомпонентыУтилиты

bootstrap.css

bootstrap. min.css

ВключеныВключеныВключеныВключены

bootstrap-grid.css

bootstrap-grid.min.css

Только Система сетокНе включеныНе включеныТолько flex утилиты

bootstrap-reboot.css

bootstrap-reboot.min.css

Не включеныТолько RebootНе включеныНе включены

Следующая таблица содержит список включенных js-компонентов:

JS-файлыPopperjQuery

bootstrap.bundle.js

bootstrap.bundle.min.js

ВключеныНе включены

bootstrap.js

bootstrap.min.js

Не включеныНе включены

Поддержка Bootstrap 4

4-ая версия Bootstrap построена, в основном, на использовании технологии Flexbox, которая на данный момент поддерживается большинством современных браузеров, в том числе и Internet Explorer версий 10-11 / Microsoft Edge. Для поддержки младших версий IE необходимо использовать Botstrap 3. Существует ряд нюансов, связанный с нормальным отображением ряда элементов в мобильных браузерах на платформах iOS и Android, которые необходимо рассмотреть в документации BS4.

Шаблон страницы Bootstrap 4

При верстке страницы на основе Bootstrap 4 следует указывать Doctype стандарта HTML5 и meta-тег veiwport, чтобы страницы адаптировались к разрешениям экрана на различных устройствах. Также в нижней части страницы необходимо подключить jQuery и Popper, и уже после них bootstrap.js. Сделать это можно 2-мя основными способами: указав относительный путь к файлам, скачанным на ваш компьютер или используя файлы Bootstrap CDN.

Шаблон на основе Bootstrap CDN

<!doctype html> <html lang=»en»> <head> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»> <!— Bootstrap CSS —> <link href=»https://html-plus. in.ua/wp-content/litespeed/localres/stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css» integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!— Подключение JavaScript —> <!— Сначала jQuery, затем Popper.js, затем Bootstrap JS —> <script src=»https://html-plus.in.ua/wp-content/litespeed/localres/code.jquery.com/jquery-3.3.1.slim.min.js» integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo» crossorigin=»anonymous»> </script> <script src=»https://html-plus.in.ua/wp-content/litespeed/localres/cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js» integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=»anonymous»> </script <script src=»https://html-plus. in.ua/wp-content/litespeed/localres/stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js» integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T» crossorigin=»anonymous»> </script> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!doctype html>

<html lang=»en»>

  <head>

    <meta charset=»utf-8″>

    <meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»>

 

    <!— Bootstrap CSS —>

    <link href=»https://html-plus.in.ua/wp-content/litespeed/localres/stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css»

integrity=»sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB» crossorigin=»anonymous»>

 

    <title>Hello, world!</title>

  </head>

  <body>

    <h2>Hello, world!</h2>

 

    <!— Подключение JavaScript —>

    <!— Сначала jQuery, затем Popper. js, затем Bootstrap JS —>

    <script src=»https://html-plus.in.ua/wp-content/litespeed/localres/code.jquery.com/jquery-3.3.1.slim.min.js»

    integrity=»sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo»

    crossorigin=»anonymous»> </script>

    <script src=»https://html-plus.in.ua/wp-content/litespeed/localres/cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js»

    integrity=»sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″

    crossorigin=»anonymous»> </script

    <script src=»https://html-plus.in.ua/wp-content/litespeed/localres/stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js»

    integrity=»sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T»

    crossorigin=»anonymous»> </script>

  </body>

</html>

Шаблон на основе файлов из папки скомпилированных файлов Bootstrap 4

<!doctype html> <html lang=»en»> <head> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»> <!— Bootstrap CSS —> <link rel=»stylesheet» href=»css/bootstrap. min.css»> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!— Подключение JavaScript —> <!— Сначала jQuery, затем Popper.js, затем Bootstrap JS —> <script src=»js/jquery-3.3.1.slim.min.js»></script> <script src=»js/popper.min.js» ></script> <script src=»js/bootstrap.min.js»></script> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!doctype html>

<html lang=»en»>

  <head>

    <meta charset=»utf-8″>

    <meta name=»viewport» content=»width=device-width, initial-scale=1, shrink-to-fit=no»>

 

    <!— Bootstrap CSS —>

    <link rel=»stylesheet» href=»css/bootstrap. min.css»>

 

    <title>Hello, world!</title>

  </head>

  <body>

    <h2>Hello, world!</h2>

 

    <!— Подключение JavaScript —>

    <!— Сначала jQuery, затем Popper.js, затем Bootstrap JS —>

    <script src=»js/jquery-3.3.1.slim.min.js»></script>

    <script src=»js/popper.min.js» ></script>

    <script src=»js/bootstrap.min.js»></script>

  </body>

</html>

Скачать оба варианта можно по ссылке.

Использование Reboot

Reboot — это комплекс css-стилей, не использующий классов, а основанный на стилизации элементов для единого их отображения в различных браузерах. Он основан на  normalize.css,  который уже давно используется для унификации стилей основных элементов. Reboot также переводит все единицы измерения в remвместо em, устанавливает значение свойства box-sizing как border-box для всех элементов, а также псевдоэлементов  :*::before и *::after.

Эти css-стили входят в bootstrap.css и минифицированный bootstrap.min.css, поэтому подключать его отдельно не нужно.

Полезные ссылки:

Просмотров: 3 205

Установка Bootstrap 4 на сервер (на сайт)

Разобравшись с тем, где и как взять исходники Bootstrap 4, (подробно показано и описано в статье → по этой ссылке), можно переходить к вопросу о том, как установить Bootstrap 4 на сайт. Для этого нужно иметь возможность закачивать файлы на сервер или хотя бы создавать новые файлы на нём (тогда можно не копировать файлы, а создавать файлы и вставлять в них содержимое с локального компьютера). Но всё-таки удобнее, если есть доступ к серверу хотя бы по ftp.

Куда устанавливать Bootstrap 4 для того, чтобы потом подключить его на сайте

Итак, у нас есть две папки с файлами css и js. Для того, чтобы Bootstrap можно было использовать на сайте, нужно чтобы файлы с css-стилями и js-скриптами были доступны. Для того, чтобы легко ориентироваться, где что лежит, лучше на сервере в папке сайта создать две директории css и js. В зависимости от того, используется ли шаблон или сайт создаётся на чистом HTML или на какой-то экзотической / самописной CMS, эти две папки нужно поместить либо в папку шаблона, либо туда, где будут лежать файлы с css-стилями и js-скриптами сайта. Эти папки можно скопировать из архива полученного так, как описано по ссылке во вступлении к этой статье, либо скопировать файлы из этих папок на сервер.

Как подключить Bootstrap 4 в HTML-документы сайта

После того, как папки с css-стилями и js-скриптами успешно помещены на сервер, остаётся только правильно прописать метатеги для подключения этих библиотек Bootstrap. В заголовках страниц в контейнере <head> нужно прописать следующие строки:

Для подключения css-стилей Bootstrap:

<link href="/путь_до_папки_от_корня_сайта/css/bootstrap. min.css" rel="stylesheet" type="text/css" />

Для подключения js-скриптов Bootstrap:

<script src="/путь_до_папки_от_корня_сайта/js/bootstrap.js type="text/javascript"></script>

Этого будет достаточно для того, чтобы библиотека Bootstrap начала работать на сайте.

Где должны быть прописаны HTML мета-теги подключения библиотеки Bootstrap

CSS Bootstrap нужно подключать так, чтобы:

  1. CSS-стили Bootstrap переопределили возможные стили, которые могут присутствовать на сайте.
    • это значит, что HTML мета-тег подключения библиотеки Bootstrap должен быть как можно ниже в контейнере <head> HTML-документа.
  2. Собственные CSS-стили, которыми переопределяются CSS-свойства Bootstrap, должны срабатывать.
    • это значит, что для того, чтобы была возможность переопределить CSS-свойства Bootstrap, стили шаблона (документа) должны находиться ниже HTML мета-тега подключения библиотеки Bootstrap.

Если простым языком, то HTML мета-тег подключения библиотеки Bootstrap должен быть предпоследним до закрывающего HTML-тега </head>, а последним должен быть мета-тег подключения css-свойств, которые перепрописывают свойства Bootstrap.

JS-библиотеку Bootstrap разработчики рекомендуют помещать в самый конец HTML документа перед закрывающим тегом </body>.

Подключение библиотеки Bootstrap из репозитория разработчика

Всё описанное выше лично для меня имеет значение, так как я предпочитаю иметь твёрдую копию документов у меня на сервере, а не надеяться на то, что файлы будут находиться там, куда их положили разработчики. Но с тем же успехом можно воспользоваться и репозиторем разработчиков, подключив библиотеку Bootstrap оттуда. (Тогда не нужно ничего скачивать и заливать к себе на сервер. Но, если репозиторий разработчика перестанет работать, то и всё, что используется на сайте из этого репозитория отвалится. )

Для подключения css-стилей Bootstrap из репозитория разработчика:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Для подключения js-скриптов Bootstrap из репозитория разработчика:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Выводы

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

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

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Установка Bootstrap — Bootstrap: Основы верстки

Театр начинается с вешалки, а использование Bootstrap начинается с подключения к странице. Подключение происходит одним из нескольких доступных способов: от подключения готовых файлов CSS и JS до использования SASS препроцессора с возможностью подключения нужных компонентов.

Подключение с помощью CDN

Перед тем, как изучить подключение через CDN стоит разобраться с тем, что такое CDN.

CDN является сокращением от Content Delivery Network. Чаще всего система CDN представляет собой несколько серверов в разных странах мира. Они хранят в себе файлы, которые можно подключить к проекту. В зависимости от того, где находится пользователь, отдаётся файл с того сервера, который обеспечит минимальную задержку.

Для подключения Bootstrap с помощью CDN достаточно просто подключить необходимые файлы в HTML. Свежие ссылки для подключения находятся на странице документации Bootstrap. В настоящее время это выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Подключение Bootstrap</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath. bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh5AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
 <!-- Основная разметка страницы -->
</body>
</html>

Порядок подключения Javascript очень важен. Так как подключения происходят последовательно, а Bootstrap зависит от Jquery и Popper, то они должны подключаться раньше основного файла JS.

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

Локальное подключение CSS

Разработчики не всегда хотят доверять внешним серверам, которые они не могут контролировать. Никто не может дать гарантию того, что CDN не подведёт в самый нужный момент, когда на сайт пришли инвесторы с миллиардами. Чтобы избежать такой ситуации можно расположить все файлы Bootstrap у себя в рабочей директории и подключать их локально.

Скачать все необходимые файлы можно на официальной странице Bootstrap или через репозиторий GitHub. В случае с репозиторием нас интересует директория dist.

Внутри директории dist находится следующая структура CSS файлов:

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap.css
│   └── bootstrap.min.css

В директории css находится больше файлов, чем при подключении Bootstrap через CDN. При таком подходе возможно подключать только необходимые части CSS.

  • bootstrap-grid.css. В файле находятся все стили, отвечающие за создание сеток. Если от Bootstrap в проекте необходима только сетка, то данного файла достаточно. В этом случае нет необходимости подключать все остальные зависимости, в том числе и JavaScript.
  • bootstrap-reboot.css. Файл, вопреки своему названию не сбрасывает стандартные стили браузеров, как это делает reset.css, а устанавливает стандартные Bootstrap стили для всех элементов.
  • bootstrap-utilities.css. Файл содержит все атомарные классы и утилиты Bootstrap. Основные утилиты будут изучены в следующих уроках.
  • bootstrap.css. Компиляция всех стилей Bootstrap. Если необходимы все стили, то достаточно подключить именно этот файл. Так же файл содержит стили всех компонентов.

Создадим проект, в котором используется только сетка и утилиты бутстрапа:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Подключение Bootstrap</title>

  <link rel="stylesheet" href="bootstrap/css/bootstrap-grid. min.css">
  <link rel="stylesheet" href="bootstrap/css/bootstrap-utilities.min.css">
</head>
<body>
 <!-- Основная разметка страницы -->
</body>
</html>

При подключении стилей к проекту лучше использовать минимизированные версии файлов. Они имеют дополнение в названии в виде .min. Эти файлы сжаты, что уменьшает вес стилей.

Подключение с помощью npm пакета

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

Для установки Bootstrap через npm используется команда:

npm install bootstrap

После этого в директории node_modules появится директория bootstrap. Внутри неё, помимо скомпилированных CSS и JS присутствуют SASS файлы, которые пригодятся при создании своих компонентов или утилит.

При таком подходе разработка зачастую ведётся с использованием SASS препроцессора. Чтобы подключить Bootstrap к файлу используется стандартная директива @import.

@import "../node_modules/bootstrap/scss/bootstrap";

Если необходима функциональность многих компонентов, помимо Bootstrap так же необходимо установить JQuery и Popper.js. Это делается с помощью команд:

npm install jquery
npm install popper.js

Дополнительное задание

Bootstrap: что это такое и как его установить

Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.

Что нужно знать о Bootstrap перед началом работы

У меня отношение к Bootstrap нейтральное. Он отлично подходит для прототипирования. Если нужно быстро проверить какую-то гипотезу или показать пример заказчику, то сборка во фреймворке — оптимальный вариант. Если вы делаете индивидуальный дизайн, то проще верстать с нуля, а не пытаться перебрать все стили и скрипты в Bootstrap.

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

Какую версию Bootstrap выбрать?

Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает, что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11. 

В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.

В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.

  • В пятой версии не будет поддержки Internet Explorer. 
  • Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.

Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4. 5.1.

Читайте также

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

  • Подключить компилированные файлы c помощью BootstrapCDN.
  • Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
  • Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров. 
  • Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

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

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

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:


<!DOCTYPE html>

<html lang="ru">

<head>

     <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Эта ссылка загружает с CDN все необходимые файлы Bootstrap -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Перед закрывающим тегом <body> подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты  -->     

    <script src="https://ajax. googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>

</body>

</html>

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js. 

В папке css — файлы стилей. 

  • bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
  • bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
  • bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.

В папке js — файлы для работы JavaScript.

  • bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
  • bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS. 

Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:


<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap. css" >

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Сначала подключаем библиотеку JQuery, затем — Bootstrap JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

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

</body>

</html>

Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.

Начинаем верстать с помощью Bootstrap

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

Для удобства рекомендую скачать примеры. Они помогают понять возможности фреймворка. Примеры можно использовать для верстки прототипов, особенно в ситуации, когда макет нужно было сдать еще вчера.

Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно. 

Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента. 

Изначально карусель выглядит вот так.

Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править. 

Находим в коде карусель. Вот она:


<div data-ride="carousel">

Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами. 

Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.

Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.

Вся работа заняла пару минут. При этом компоненты имеют адаптивный дизайн. Вам не нужно настраивать даже медиа-запросы — они уже прописаны в исходных файлах Bootstrap. Такой подход позволяет значительно сэкономить время на верстку.

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

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

Введение · Bootstrap

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с BootstrapCDN и начальной страницей шаблона.

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из MaxCDN. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в свой перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

    

JS

Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются jQuery, Popper.js и наши собственные плагины JavaScript. Поместите следующие

0 ", явно требующий перекрестного сценария для нашего сценария 900,

0" перекрестный скрипт " JS и Popper.

js? Щелкните ссылку "Показать компоненты" ниже. Если вы вообще не уверены в общей структуре страницы, продолжайте читать, чтобы увидеть пример шаблона страницы.

Показать компоненты, требующие JavaScript
  • Предупреждения об отклонении
  • Кнопки для переключения состояний и функции флажка / радио
  • Карусель для любого поведения слайдов, элементов управления и индикаторов
  • Свернуть для переключения видимости содержимого
  • Выпадающие списки для отображения и позиционирования (также требуется Popper.js)
  • Модальные окна для отображения, позиционирования и прокрутки
  • Navbar для расширения нашего плагина Collapse для реализации адаптивного поведения
  • Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper.js)
  • Scrollspy для поведения прокрутки и обновлений навигации

Стартовый шаблон

Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования.Сложите все вместе, и ваши страницы должны выглядеть так:

  

  
    
    
    

    
     Привет, мир! 

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

Важные глобалы

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

HTML5 doctype

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

  

  ...
  

Адаптивный метатег

Bootstrap разработан mobile first , стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS.Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра к вашему .

    

Вы можете увидеть пример этого в действии в начальном шаблоне.

Размер коробки

Для более простого изменения размера в CSS мы переключаем глобальное значение box-sizing с content-box на border-box .Это гарантирует, что заполнение не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine.

В редких случаях, когда вам нужно отменить его, используйте что-то вроде следующего:

  .selector-for-some-widget {
  размер коробки: коробка содержимого;
}  

В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент через :: before и :: after , унаследуют указанный размер блока для этого .селектор для какого-то виджета .

Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks.

Перезагрузка

Для улучшения кроссбраузерного рендеринга мы используем Reboot, чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс общих элементов HTML.

Будьте в курсе разработки Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

  • Подпишитесь на @getbootstrap в Twitter.
  • Прочтите официальный блог Bootstrap и подпишитесь на него.
  • Присоединяйтесь к официальной комнате Slack.
  • Общайтесь с другими загрузчиками в IRC. На сервере irc.freenode.net в канале ## bootstrap .
  • Справку по реализации можно найти на сайте Stack Overflow (помечено как bootstrap-4 ).
  • Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Вы также можете подписаться на @getbootstrap в Twitter, чтобы следить за последними сплетнями и потрясающими музыкальными клипами.

Содержание · Bootstrap

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

Предварительно скомпилированный загрузочный файл

После загрузки разархивируйте сжатую папку, и вы увидите что-то вроде этого:

  бутстрап /
├── css /
│ ├── бутстрап. css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js /
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.min.js
    ├── bootstrap.js
    └── bootstrap.min.js  

Это самая простая форма Bootstrap: предварительно скомпилированные файлы для быстрого использования практически в любом веб-проекте.Мы предоставляем скомпилированные CSS и JS ( bootstrap. * ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min. * ). Исходные карты CSS ( bootstrap. *. Map ) доступны для использования с некоторыми инструментами разработчика браузеров. Связанные файлы JS ( bootstrap.bundle.js и уменьшенные bootstrap.bundle.min.js ) включают Popper, но не jQuery.

файлов CSS

Bootstrap включает несколько опций для включения некоторых или всего нашего скомпилированного CSS.

Файлы CSS Макет Содержание Компоненты Коммунальные услуги

bootstrap.css

bootstrap.min.css

Включено Включено Включено Включено

бутстрап-сетка.CSS

bootstrap-grid.min.css

Только сетка Не включено Не включено Только гибкие утилиты

bootstrap-reboot.css

bootstrap-reboot. min.css

Не включено Только перезагрузка Не включено Не включено

Файлы JS

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

JS файлы Поппер jQuery

bootstrap.bundle.js

bootstrap.bundle.min.js

Включено Не включено

bootstrap.js

bootstrap.min.js

Не включено Не включено

Исходный код Bootstrap

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

  бутстрап /
├── dist /
│ ├── css /
│ └── js /
├── документы /
│ └── примеры /
├── js /
└── scss /  

scss / и js / являются исходным кодом для наших CSS и JavaScript. Папка dist / включает все, что указано в предварительно скомпилированном разделе загрузки выше. Папка docs / включает исходный код нашей документации и примеров / использования Bootstrap.Кроме того, любой другой включенный файл обеспечивает поддержку пакетов, лицензионной информации и разработки.

Введение · Bootstrap

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с BootstrapCDN и начальной страницей шаблона.

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из StackPath. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в свой перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

    

JS

Многие из наших компонентов требуют использования JavaScript для работы.В частности, для них требуются jQuery, Popper.js и наши собственные плагины JavaScript. Поместите следующие

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

Важные глобалы

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

HTML5 doctype

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

  

  ...
  

Адаптивный метатег

Bootstrap разработан mobile first , стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS.Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра к вашему .

    

Вы можете увидеть пример этого в действии в начальном шаблоне.

Размер коробки

Для более простого изменения размера в CSS мы переключаем глобальное значение box-sizing с content-box на border-box .Это гарантирует, что заполнение не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine.

В редких случаях, когда вам нужно отменить его, используйте что-то вроде следующего:

  .selector-for-some-widget {
  размер коробки: коробка содержимого;
}  

В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент через :: before и :: after , унаследуют указанный размер блока для этого .селектор для какого-то виджета .

Узнайте больше о блочной модели и ее размерах на сайте CSS Tricks.

Перезагрузка

Для улучшения кроссбраузерного рендеринга мы используем Reboot, чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс общих элементов HTML.

Будьте в курсе разработки Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

  • Подпишитесь на @getbootstrap в Twitter.
  • Прочтите официальный блог Bootstrap и подпишитесь на него.
  • Присоединяйтесь к официальной комнате Slack.
  • Общайтесь с другими загрузчиками в IRC. На сервере irc.freenode.net в канале ## bootstrap .
  • Справку по реализации можно найти на сайте Stack Overflow (помечено как bootstrap-4 ).
  • Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Вы также можете подписаться на @getbootstrap в Twitter, чтобы следить за последними сплетнями и потрясающими музыкальными клипами.

JavaScript · Bootstrap

Оживите Bootstrap с помощью наших дополнительных подключаемых модулей JavaScript, построенных на jQuery. Узнайте о каждом плагине, наших данных и параметрах программного API и многом другом.

Индивидуальный или составной

Плагины

могут быть включены по отдельности (с использованием отдельного файла js / dist / *. Js Bootstrap) или все сразу с использованием начальной загрузки .js или уменьшенный bootstrap.min.js (не включая оба).

Если вы используете сборщик (Webpack, Rollup…), вы можете использовать файлы /js/dist/*.js , готовые для UMD.

Зависимости

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации. Также обратите внимание, что все подключаемые модули зависят от jQuery (это означает, что jQuery должен быть включен перед файлами подключаемых модулей).Обратитесь к нашему package.json , чтобы узнать, какие версии jQuery поддерживаются.

Наши раскрывающиеся списки, всплывающие окна и всплывающие подсказки также зависят от Popper.js.

Атрибуты данных

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

Однако в некоторых ситуациях может потребоваться отключить эту функцию. Чтобы отключить API атрибутов данных, отвяжите все события в документе с пространством имен data-api , например:

  $ (document) .off ('. Data-api')  

В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api, например:

  $ (документ) .off ('. Alert.data-api')  

Селекторы

В настоящее время для запроса элементов DOM мы используем собственные методы querySelector и querySelectorAll по соображениям производительности, поэтому вам необходимо использовать допустимые селекторы. Если вы используете специальные селекторы, например: collapse: Пример , обязательно избегайте их.

События

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

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

  $ ('# myModal'). On ('show.bs.modal', function (e) {
  if (! data) {
    return e.preventDefault () // останавливает показ модального окна
  }
})  

Программный API

Мы также считаем, что вы сможете использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы являются одиночными, объединяемыми в цепочку методами и возвращают коллекцию, на которую были выполнены действия.

  $ ('. Btn.danger'). Button ('toggle'). AddClass ('fat')  

Все методы должны принимать необязательный объект параметров, строку, нацеленную на конкретный метод, или ничего (что инициирует плагин с поведением по умолчанию):

  $ ('# myModal'). Modal () // инициализируется значениями по умолчанию
$ ('# myModal'). modal ({keyboard: false}) // инициализируется без клавиатуры
$ ('# myModal'). modal ('show') // немедленно инициализирует и вызывает show  

Каждый плагин также предоставляет свой необработанный конструктор в свойстве Constructor : $.fn.popover.Constructor . Если вы хотите получить конкретный экземпляр плагина, извлеките его непосредственно из элемента: $ ('[rel = "popover"]'). Data ('popover') .

Асинхронные функции и переходы

Все программные методы API являются асинхронными и возвращаются вызывающей стороне после начала перехода, но до его завершения .

Чтобы выполнить действие после завершения перехода, вы можете прослушать соответствующее событие.

  $ ('# myCollapse'). On ('shown.bs.collapse', function (e) {
  // Действие, выполняемое после раскрытия сворачиваемой области
})  

Кроме того, вызов метода переходного компонента будет проигнорирован .

  $ ('# myCarousel'). On ('slid.bs.carousel', function (e) {
  $ ('# myCarousel'). carousel ('2') // Переместится на слайд 2, как только переход к слайду 1 завершится
})

$ ('# myCarousel'). carousel ('1') // Начнется скольжение к слайду 1 и вернется к вызывающему
$ ('# myCarousel').карусель ('2') // !! Будет проигнорировано, так как переход к слайду 1 не завершен !!  

Настройки по умолчанию

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

  // изменяет значение по умолчанию для опции `keyboard` модального плагина на false
$ . fn.modal.Constructor.Default.keyboard = false  

Нет конфликта

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

  var bootstrapButton = $ .fn.button.noConflict () // вернуть $ .fn.button к ранее присвоенному значению
$ .fn.bootstrapBtn = bootstrapButton // дать $ (). bootstrapBtn функциональность Bootstrap  

Номера версий

Доступ к версии каждого из подключаемых модулей jQuery в Bootstrap можно получить через свойство VERSION конструктора подключаемого модуля.Например, для плагина всплывающей подсказки:

  $ .fn.tooltip.Constructor.VERSION // => "4.3.1"  

Никаких специальных резервных вариантов при отключенном JavaScript

Плагины

Bootstrap не очень изящно отключаются, когда отключен JavaScript. Если вы заботитесь о пользовательском опыте в этом случае, используйте

Сторонние библиотеки

Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI.Несмотря на .noConflict и события в пространстве имен, могут возникнуть проблемы совместимости, которые необходимо исправить самостоятельно.

Утилита

Все файлы JavaScript Bootstrap зависят от util.js , и он должен быть включен вместе с другими файлами JavaScript. Если вы используете скомпилированный (или минифицированный) bootstrap.js , нет необходимости включать его - он уже есть.

util.js включает служебные функции и базовый помощник для событий transitionEnd , а также эмулятор перехода CSS. ария - [\ w -] * $ / i var DefaultWhitelist = { // Глобальные атрибуты разрешены для любого указанного ниже элемента. '*': ['класс', 'каталог', 'идентификатор', 'язык', 'роль', ARIA_ATTRIBUTE_PATTERN], a: ['target', 'href', 'title', 'rel'], площадь: [], b: [], br: [], col: [], код: [], div: [], em: [], час: [], h2: [], h3: [], h4: [], h5: [], h5: [], h6: [], я: [], img: ['src', 'alt', 'title', 'width', 'height'], li: [], ол: [], п: [], pre: [], s: [], небольшой: [], охватывать: [], sub: [], Как дела: [], сильный: [], u: [], ul: [] }

Если вы хотите добавить новые значения к этому по умолчанию whiteList , вы можете сделать следующее:

  var myDefaultWhiteList = $.data-my-app - [\ w -] + /
myDefaultWhiteList ['*']. push (myCustomRegex)  

Если вы хотите обойти наше средство очистки, потому что вы предпочитаете использовать выделенную библиотеку, например DOMPurify, вы должны сделать следующее:

  $ ('# yourTooltip').  Tooltip ({
  sanitizeFn: function (content) {
    вернуть DOMPurify.sanitize (контент)
  }
})  

Bootstrap 4 контейнера


Контейнеры

Из предыдущей главы вы узнали, что Bootstrap требует элемент для обертывания содержимого сайта.

Контейнеры используются для заполнения содержимого внутри из них, и доступно два класса контейнеров:

  1. Класс .container предоставляет отзывчивый контейнер фиксированной ширины
  2. Класс .container-fluid предоставляет контейнер полной ширины , охватывающий всю ширину области просмотра

Фиксированный контейнер

Используйте класс .container для создания адаптивного контейнера фиксированной ширины.

Обратите внимание, что его ширина ( max-width ) будет меняться для разных размеров экрана:

Очень маленький
<576px
Маленький
≥576 пикселей
Средний
≥768 пикселей
Большой
≥992px
Очень большой
≥1200 пикселей
макс. Ширина 100% 540px 720 пикселей 960px 1140px

Откройте пример ниже и измените размер окна браузера, чтобы увидеть, что ширина контейнера изменится в разных точках останова:

Пример


Моя первая страница начальной загрузки


Это какой-то текст.


Попробуй сам "

Контейнер для жидкости

Используйте класс .container-fluid для создания контейнера полной ширины, который всегда будет охватывать всю ширину экрана ( ширина всегда 100% ):

Пример


Моя первая страница начальной загрузки


Это какой-то текст.


Попробуй сам "

Прокладка контейнера

По умолчанию контейнеры имеют отступы слева и справа по 15 пикселей, без верхнего и нижнего отступов. Поэтому мы часто используем утилиты интервалов , такие как дополнительные отступы и поля, чтобы они выглядели еще лучше. Например, .pt-3 означает «добавить верхний отступ размером 16 пикселей»:


Граница и цвет контейнера

Другие утилиты, такие как границы и цвета, также часто используются вместе с контейнерами:

Пример

У этого контейнера есть граница и некоторые дополнительные поля и поля.

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

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

Попробуй сам "

Адаптивные контейнеры

Вы также можете использовать классы .container-sm | md | lg | xl для создания адаптивных контейнеров.

max-width контейнера будет меняться для разных размеров экрана / видовых экранов:

Класс Очень маленький
<576px
Маленький
≥576 пикселей
Средний
≥768 пикселей
Большой
≥992px
Очень большой
≥1200 пикселей
. контейнер-см 100% 540px 720 пикселей 960px 1140px
.контейнер-мкр 100% 100% 720 пикселей 960px 1140px
. Контейнер-LG 100% 100% 100% 960px 1140px
.контейнер-XL 100% 100% 100% 100% 1140px

Пример

.container-sm

.container-md

.container-lg

.container-xl

Попробуй сам "

Знаете ли вы?

W3.CSS - отличная альтернатива Bootstrap 4.

W3.CSS меньше, быстрее и проще в использовании.

Если вы хотите изучить W3.CSS, перейдите на наш W3.CSS Руководство.



Как использовать Bootstrap 4

Из этого туториала Вы узнаете, как создать веб-страницу с помощью фреймворка Bootstrap.

Начало работы с Bootstrap

Из этого туториала Вы узнаете, как легко создать веб-страницу с помощью Bootstrap.Но прежде чем начать, убедитесь, что у вас есть редактор кода и некоторые практические знания HTML и CSS.

Если вы только начинаете заниматься веб-разработкой, начните учиться здесь »

Что ж, давайте приступим к созданию нашей первой веб-страницы на базе Bootstrap.

Создание вашей первой веб-страницы с помощью Bootstrap

Теперь мы собираемся создать базовый шаблон Bootstrap, включив файлы Bootstrap CSS и JS, а также другие зависимости JavaScript, такие как библиотека jQuery через CDN.

Мы рекомендуем добавить Bootstrap в ваш проект через CDN (сеть доставки контента), потому что CDN предлагает преимущество в производительности за счет сокращения времени загрузки, поскольку они размещают файлы на нескольких серверах по всему миру, так что когда пользователь запрашивает файл, он будет обслуживается с ближайшего к ним сервера. Мы также используем ссылки CDN в наших примерах:

Давайте рассмотрим следующие шаги. В конце этого руководства вы создадите простую веб-страницу на базе Bootstrap, которая отображает сообщение «Hello world» в вашем веб-браузере.

Шаг 1. Создание простого HTML-файла

Откройте ваш любимый редактор кода и создайте новый файл HTML. Начните с пустого окна, введите следующий код и сохраните его как «basic.html» на рабочем столе.

  


    
    
     Базовый HTML-файл 


    

Привет, мир!

Совет: Всегда включайте тег viewport внутри раздела вашего документа, чтобы включить масштабирование касанием и обеспечить правильную визуализацию на мобильных устройствах.

Шаг 2. Превращение этого HTML-файла в шаблон начальной загрузки

Чтобы сделать этот простой HTML-файл шаблоном Bootstrap, просто включите файлы Bootstrap CSS и JS, а также необходимый jQuery, используя их ссылки CDN.

Вы должны включить файлы JavaScript внизу страницы, прямо перед закрывающим тегом , чтобы повысить производительность ваших веб-страниц, как показано в следующем примере:

  


    
    
     Базовый шаблон начальной загрузки 
    
    


    

Привет, мир!

И все готово! После добавления файлов CSS и JS Bootstrap и необходимой библиотеки jQuery мы можем приступить к разработке любого сайта или приложения с помощью платформы Bootstrap.

Атрибуты Integrity и crossorigin были добавлены в ссылки CDN для реализации Subresource Integrity (SRI). Это функция безопасности, которая позволяет снизить риск атак, исходящих из скомпрометированных сетей CDN, за счет того, что файлы, получаемые вашим веб-сайтом (из сети CDN или где-либо еще), были доставлены без неожиданных или злонамеренных изменений. Он работает, позволяя вам предоставить криптографический хэш, которому должен соответствовать выбранный файл.

Совет: Если посетитель вашего веб-сайта уже загрузил файлы CSS и JS Bootstrap с того же CDN во время посещения других сайтов, они будут загружены из кеша браузера вместо повторной загрузки, что приведет к более быстрому времени загрузки. .

Шаг 3: Сохранение и просмотр файла

Теперь сохраните файл на рабочем столе как «bootstrap-template.html».

Чтобы открыть этот файл в веб-браузере, перейдите к нему, затем щелкните его правой кнопкой мыши и выберите свой любимый веб-браузер.Кроме того, вы можете открыть свой браузер и перетащить в него этот файл.

Примечание: Важно указать расширение .html , в противном случае некоторые текстовые редакторы, такие как Блокнот в Windows, автоматически сохранят его как .txt .


Загрузка файлов начальной загрузки

Кроме того, вы также можете загрузить файлы CSS и JS Bootstrap с их официального сайта и включить их в свой проект.Для загрузки доступны две версии: скомпилированные файлы Bootstrap и исходные файлы Bootstrap . Вы можете скачать файлы Bootstrap 4 отсюда.

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

Загрузите и разархивируйте скомпилированный Bootstrap. Теперь, если вы заглянете в папки, вы обнаружите, что они содержат скомпилированные файлы CSS и JS ( bootstrap. * ), а также скомпилированные и минимизированные CSS и JS ( bootstrap.min. * ). Используйте файлы bootstrap.min.css и bootstrap.bundle.min.js .

Использование уменьшенной версии файлов CSS и JS улучшит производительность вашего веб-сайта и сэкономит драгоценную пропускную способность из-за меньшего размера HTTP-запросов и загрузки.

Совет: Обратите внимание, что плагины Bootstrap для JavaScript требуют включения jQuery. Вы можете скачать последнюю версию формы jQuery здесь https://jquery.com/download/. Однако нет необходимости включать требуемый Popper.js (для работы всплывающей подсказки и всплывающего окна) отдельно, поскольку он уже включен в файл «bootstrap.bundle.min.js».

Bootstrap: использование в проекте

Bootstrap - это популярный CSS-фреймворк предварительно написанных таблиц стилей, предназначенный для ускорения создания веб-страниц.

Зачем это нужно?

Bootstrap предлагает решения типичных проблем, с которыми сталкиваются веб-разработчики внешнего интерфейса. С помощью Bootstrap веб-разработчики могут:

  • Быстро создавайте сложные макеты веб-сайтов.
  • Создавайте макеты по сетке из 12 столбцов.
  • Используйте предварительно написанный код JavaScript для динамических функций сайта.
  • Создавайте макеты для разных устройств (настольных, планшетных или мобильных).
  • Создавайте макеты, которые работают в различных веб-браузерах.

Начало работы с Bootstrap

Вот несколько разных способов использования Bootstrap:

Ссылка на CDN

CDN или сетей доставки контента - это файлы кода, размещенные в Интернете, которые вы можете включить в свой проект.Использование CDN - это самый быстрый способ настроить Bootstrap.

Найдите CDN для Bootstrap. MaxCDN размещает последнюю версию:

 
  

Просто включите приведенный выше код в заголовок HTML элемент, и вам будет хорошо!

Используйте локальную копию Bootstrap

Другой вариант - загрузить вашу собственную копию Bootstrap и интегрировать ее в структуру вашего проекта.

Шаг 1. Загрузите Bootstrap
.

Загрузите Bootstrap в виде Zip-файла здесь. Затем откройте файловый менеджер своего компьютера и найдите bootstrap-3.3.7-dist.zip в папке Downloads . Дважды щелкните файл, чтобы разархивировать его.

Шаг 2. Выберите проект

Наш пример проекта - это домашняя страница Codebrainery.io. Адаптируйте следующие инструкции для использования в своем собственном проекте или загрузите здесь программу Codebrain, чтобы следить за ними.

codebrainery содержит три файла, индекс .html , main.css :

 
  

код | - index.html | - main.css

Шаг 3. Переместите Bootstrap в папку вашего проекта

Используя командную строку или файловый менеджер, переместите недавно распакованную папку bootstrap-3.3.7-dist в папку вашего проекта. Это создаст следующую структуру папок:

 
  

код | - index.html | - main.css | - бутстрап-3.3.7-расст. | - css | - js | - fonts

Шаг 4. Ссылка на вашу копию Bootstrap

Используя свой любимый текстовый редактор, откройте index.html и найдите элемент head . Домашняя страница Codebrainery.io уже ссылается на Bootstrap CDN:

.
 
  

Заменить ссылку атрибут href , чтобы вы могли вместо этого загрузить локально установленный миниатюрный CSS-код Bootstrap:

 
  

Позже мы реализуем функции Bootstrap, которые зависят от Bootstrap JavaScript, а также jQuery, поэтому добавьте их сейчас в элемент head . Добавьте два скрипт тегов под ссылкой тег :

 
  

Категория: Разное

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *