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

Leave a Comment / Разное / By /

Содержание

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

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

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

CSS

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

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

JS

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

Пакетное подключение

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Раздельное подключение

Если вы решите использовать отдельные скрипты, сначала должен быть подключен Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn. jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Модули

Если вы используете <script type="module">, смотрите раздел Использование Bootstrap в качестве модуля.

Компоненты

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

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

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

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

<!doctype html>
<html lang="ru">
  <head>
    <!-- Обязательные метатеги -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Привет мир!</title>
  </head>
  <body>
    <h2>Привет мир!</h2>

    <!-- Дополнительный JavaScript; выберите один из двух! -->

    <!-- Вариант 1: Bootstrap в связке с Popper -->
    <script src="https://cdn.
  jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Вариант 2: Bootstrap JS отдельно от Popper
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

Тип текущего документа

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

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

Мета-теги для адаптивной вёрстки

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

Размер ширины и высоты элемента (Box-sizing)

Для большей простоты масштабирования в 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 с помощью этих ресурсов:

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

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

Способы подключения бутсрап к сайту. CDN, вручную как модуль.

Что такое Bootstrap 5

Бутстрап — это бесплатный фреймворк с набором готовых CSS стилей, HTML и JS примеров кода, для быстрой и красивой верстки адаптивных дизайнов под мобильные устройства и десктоп устройства.

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

Как подключить (Quick start)

Для того чтобы использовать bootstrap на сайте, он должен быть правильно внедрен в html-код сайта. Для этого файл CSS bootstrap 5 должен быть помещен в <head></head> части вашего проекта.

Javascript файл можно подключить как между тегами head так и внутри body. Мы рассмотрим примеры подключения дальше.

Где взять файлы для подключения

Можно использовать любой из следующих трех вариантов.:

  1. Загрузите исходные файлы со страницы загрузок.
  2. Используйте менеджер пакетов для получения полного пакета.
  3. Используйте бесплатную CDN от jsDelivr. На их серверах содержаться уже готовые файлы, пригодные для использования на сайте.

CDN-ссылки

Используйте данный ссылки для получения скомпилированных и минимизированных файлов.

Версия: 5.2.1

Css файл:  https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css

JS файл: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

JS файл без Poper: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js

Подключение CSS файла стилей

Самый быстрый способ подключения — это использовать CDN. Он позволяет стартовать быстро, без использования шагов сборки файлов.

Прежде чем начать, создайте файл index.html в корне вашего проекта с примерно таким содержимым.

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 демонстрационная страница</title>
</head>
<body>
<h2>Привет мир!</h2>
</body>
</html>

Это будет базовый макет html страницы демо-сайта. Запустите этот файл в браузере.

Обратим ваше внимание, что в шаблоне присутствует тег <meta name="viewport"> необходимый  для правильного реагирования на мобильных устройствах.

Чтобы подключить css стили к вашему сайту, необходимо подключить файл таблицы стилей через тег <link> в <head> части вашей html страницы. В примере мы будем использовать подключение файлов с CDN.

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 демонстрационная страница</title>
    <!-- Подключение CSS файла bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <!-- Далее может идти подключение любого другого CSS файла сайта -->
    <link href="style.
 
 css" rel="stylesheet">
</head>
<body>
    <h2>Привет мир!</h2>
</body>
</html>

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

Запустите еще раз файл index.html

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

Подключение JS скриптов

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

Пакетное подключение (Bundle)

Необходимые плагины и зависимости Bootstrap JavaScript могут быть подключены с помощью одного из двух пакетов: bootstrap. bundle.js и bootstrap.bundle.min.js, которые содержат всплывающие подсказки и Поппер для отображения модальных окон. О том, что входит в Bootstrap, смотрите в разделе «Содержание».

Измените содержимое файла index.html на:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 демонстрационная страница</title>
    <!-- Подключение CSS файла bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
    <h2>Привет мир!</h2>
    <!-- Button trigger modal -->
    <button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Нажми на меня
    </button>
    <!-- Modal -->
    <div tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div>
            <div>
                <div>
                    <h5>Загловок</h5>
                    <button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div>
                    Все работает! Модальное окно открылось!
                </div>
                <div>
                    <button type="button" data-bs-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Подключение JS файла bootstrap 5 -->
    <script src="https://cdn.
 
 jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>

Мы добавили в пример подключение bootstrap.bundle.min.js файла из CDN и добавили код компонента «Модальное окно» для демонстрации работы js bootstrap.

Если вы не планируете использовать Dropdown, Modal или всплывающие подсказки, вы можете сэкономить несколько килобайт, не включая Popper.

Для этого подключите файл JS: bootstrap.min.js вместо bootstrap.bundle.min.js.

Ручное подключение скриптов

Если вы решите подключать скрипты отдельно, не используя файл bundle.

Сначала подключите скрипт Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем плагины JavaScript bootstrap.min.js.

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 демонстрационная страница</title>
    <!-- Подключение CSS файла bootstrap 5 -->
    <link href="https://cdn. jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
    <h2>Привет мир!</h2>
    Тут какой то код ...
    <!-- Подключение JS файла Popper -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <!-- Подключение JS файла Bootstrap с плагинами -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script></body>
</html>

Если вы не хотите использовать CDN, то вы можете скачать файлы к себе в проект и подключить их напрямую со своего сайта. Создайте папку /bootstrap в корне проекта и поместите туда файлы bootstrap. min.css и bootstrap.bundle.min.js

Теперь подключение будет выглядеть так:

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 демонстрационная страница</title>
    <!-- Подключение CSS файла bootstrap 5 -->
    <link href="/bootstrap/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h2>Привет мир!</h2>
    Тут какой то код ...
    <!-- Подключение JS файла Bootstrap -->
    <script src="/bootstrap/bootstrap.bundle.min.js" ></script></body>
</html>
Компоненты бутстрап

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

  • Alerts  
  • Buttons
  • Carousel 
  • Collapse 
  • Dropdowns
  • Modals 
  • Navbar
  • Offcanvases 
  • Toasts 
  • Tooltips 
  • Scrollspy 

Важные глобальные переменные

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

Большинство из них посвящено кроссбраузерной нормализации стилей. Давайте посмотрим.

Тип документа HTML5 doctype

Для правильного отображения стилей и нормальной работы javaScript, bootstrap требует указания типа документа HTML5. Установите тип документа <!doctype html>.

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

Метатег адаптивности

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

Для этого в <head> часть вашего html документа необходимо вставить метатег: <meta name="viewport" content="width=device-width, initial-scale=1">

<!doctype html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
  </head>
  . ..
</html>

Свойство Box-sizing

Для упрощения настройки размеров в CSS используется глобальное box-sizing значение с content-box на border-box.

Это гарантирует, что padding не влияет на ширину конечного вычисляемого элемента, но может вызвать проблемы с некоторыми программами сторонних производителей, такими как Google Maps и система пользовательского поиска Google.

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

.selector {
  box-sizing: content-box;
}

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

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

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

Читать далее Скачать бутстрап 5.

Содержимое · Bootstrap

  • Предварительно скомпилированный Bootstrap
  • файлы CSS
  • JS-файлы
  • Исходный код начальной загрузки

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

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

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

 бутстрап/
├── css/
│ ├── 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
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap. bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

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

CSS-файлы

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

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

bootstrap. css

bootstrap.min.css

В комплекте В комплекте В комплекте В комплекте

bootstrap-grid.css

бутстрап-сетка.min.css

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

бутстрап-перезагрузка.css

бутстрап-перезагрузка.min.css

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

JS-файлы

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

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

bootstrap.bundle.js

bootstrap.bundle.min.js

В комплекте Не включено

bootstrap.js

bootstrap.min.js

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

Исходный код начальной загрузки

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

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

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

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

❮ Предыдущая Далее ❯

Что такое Bootstrap?

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

Что такое адаптивный веб-дизайн?

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

Пример начальной загрузки


  

Моя первая страница Bootstrap


 

Измените размер этой адаптивной страницы, чтобы увидеть эффект!



 

   

     

Столбец 1


     

Lorem ipsum dolor..


   

   

     

Столбец 2


     

Lorem ipsum dolor..


   

   

     

Столбец 3


     

Lorem ipsum dolor..


   

 

Попробуйте сами »

История Bootstrap

Bootstrap был разработан Марком Отто и Джейкобом Торнтоном в Twitter и выпущен как продукт с открытым исходным кодом в августе 2011 года на GitHub.

В июне 2014 года Bootstrap был проектом №1 на GitHub!

Зачем использовать Bootstrap?

Преимущества Bootstrap:

  • Простота использования: Любой человек, имеющий базовые знания HTML и CSS, может начать использовать Bootstrap
  • Адаптивные функции: Адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и настольным компьютерам
  • Подход, ориентированный на мобильные устройства: В Bootstrap 3 стили, ориентированные на мобильные устройства, являются частью основной платформы
  • Совместимость с браузерами: Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Edge, Safari и Opera)

Версии Bootstrap

Это руководство следует за Bootstrap 3 , выпущенным в 2013 году. Однако мы также охватываем более новые версии; Bootstrap 4 (выпущен в 2018 г.) и Bootstrap 5 (выпущен в 2021 г.).

Bootstrap 5 — новейшая версия Bootstrap; с новыми компонентами, более быстрыми таблицами стилей, большей отзывчивостью и т. д. Он поддерживает последние стабильные версии всех основных браузеров и платформы. Однако Internet Explorer 11 и более ранние версии не поддерживаются.

Основное различие между Bootstrap 5 и Bootstrap 3 и 4 заключается в том, что Bootstrap 5 переключился на JavaScript вместо jQuery.

Примечание. Bootstrap 3 и Bootstrap 4 по-прежнему поддерживаются командой для исправления критических ошибок и изменений в документации, и совершенно безопасно продолжать их использовать. Однако новые функции НЕ будут добавлены в их.

Где взять Bootstrap?

Есть два способа начать использовать Bootstrap на собственном веб-сайте.

Вы можете:

  • Скачать Bootstrap с getbootstrap.com
  • Включить Bootstrap из CDN

Загрузка Bootstrap

Если вы хотите загрузить и разместить Bootstrap самостоятельно, перейдите по ссылке getbootstrap. com, и следуйте инструкциям там.

Bootstrap CDN

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

MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:

MaxCDN:




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

jQuery
Bootstrap использует jQuery для плагинов JavaScript (таких как модальные окна, всплывающие подсказки и т. д.). Однако, если вы просто используете CSS часть Bootstrap, вам не нужен jQuery.

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

1. Добавьте тип документа HTML5

Bootstrap использует элементы HTML и свойства CSS, которые требуют тип документа HTML5.

Всегда включать тип документа HTML5 в начале страница вместе с атрибутом lang и правильным набором символов:



 
   
 

2. Bootstrap 3 является мобильным -first

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

Чтобы обеспечить правильную визуализацию и сенсорное масштабирование, добавьте следующий тег внутрь элемент:

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которые будут различаться в зависимости от устройства).

Часть initial-scale=1 устанавливает начальный уровень масштабирования при первой загрузке страницы. браузером.

3. Контейнеры

Bootstrap также требует наличия содержащего элемента для переноса содержимого сайта.

На выбор предлагается два класса контейнеров:

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

. container

.container-fluid

Две основные страницы Bootstrap

В следующем примере показан код базовой страницы Bootstrap (с отзывчивым контейнером фиксированной ширины):

Пример




 Пример начальной загрузки
 
 
 




  < h2>Моя первая страница Bootstrap
 

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



Попробуйте сами »

Следующий пример показывает код базовой страницы Bootstrap (с контейнером полной ширины):

Пример




 Пример начальной загрузки
 
 
 

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

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