ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
Уроки по Bootstrap для начинающих. W3Schools на русском

En Ua

Bootstrap 5 Начало обучения

❮ Prev Next ❯

Что такое Bootstrap?

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

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

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

Bootstrap 5 Пример

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Моя первая Bootstrap страница</h1>
  <p>Измените размер этой адаптивной страницы, чтобы увидеть эффект!</p>
</div>

<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>
Попробуйте сами »

Версии Bootstrap

Bootstrap 5 (выпущен в 2021 г.) - это самая новая версия Bootstrap (выпущен в 2013 г.), с новыми компонентами, более быстрой таблицей стилей и большей адаптивностью.

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

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

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

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

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

  • Простота использования: любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap
  • Адаптивные функции: адаптивный CSS Bootstrap адаптируется к телефонам, планшетам и настольным компьютерам
  • Подход, ориентированный на мобильные устройства: в Bootstrap стили, ориентированные на мобильные устройства, являются частью базовой платформы
  • Совместимость браузера: Bootstrap 5 совместим со всеми современными браузерами (Chrome, Firefox, Edge, Safari и Opera). Примечание. Если вам нужна поддержка IE11 и более ранних версий, можно использовать BS4 или BS3

Где взять Bootstrap 5?

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

Вы можете:

  • Подключить Bootstrap 5 из CDN
  • Загрузите Bootstrap 5 из getbootstrap.com

Bootstrap 5 CDN

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

jsDelivr обеспечивает поддержку CDN для CSS и JavaScript Bootstrap:

MaxCDN:

<!-- Последний скомпилированный и минимизированный CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Последний скомпилированный JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

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

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

Скачивание Bootstrap 5

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

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

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

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

Всегда указывайте тип документа HTML5 в начале страницы вместе с атрибутом lang и правильным заголовком и набором символов (utf-8):

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Пример</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 ориентирован на мобильные устройства

Bootstrap 5 разработан, чтобы реагировать на мобильные устройства. Стили, ориентированные на мобильные устройства, являются частью базовой платформы.

Чтобы обеспечить правильный рендеринг и масштабирование касанием, добавьте следующий тег <meta> внутри <head> элемента:

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

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

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

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

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

Есть два класса контейнеров на выбор:

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

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

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

Пример контейнера

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Пример</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Моя первая Bootstrap страница</h1>
  <p>Эта часть находится внутри класса .container.</p>
  <p>Класс .container предоставляет адаптивный контейнер фиксированной ширины.</p>
</div>

</body>
</html>
Попробуйте сами »

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

Пример жидкого контейнера

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Пример</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Моя первая Bootstrap страница</h1>
  <p>Эта часть находится внутри класса .container-fluid.</p>
  <p>Класс .container-fluid предоставляет контейнер полной ширины, охватывающий всю ширину области просмотра.</p>
</div>

</body>
</html>
Попробуйте сами »
❮ Prev Next ❯