Введение в Bootstrap 5

Что такое Bootstrap?

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

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

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

Bootstrap 5 пример

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Моя первая страница Bootstrap</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Столбец 1: Весна</h3>
      <p>В ясный день я нашел цветы на берегу Сяшуй, и все вокруг стало новым.</p>
      <p>Легко узнать лицо весеннего ветра, все вокруг всегда весна.</p>
    </div>
    <div class="col-sm-4">
      <h3>Столбец 2: Стих о начале лета</h3>
      <p>Красные и фиолетовые цветы уже превратились в пыль, лето наступило в звуках кукушки.</p>
      <p>Смесь шелковицы и конопли идет по дороге, и только тогда я понял, что я живу в мирное время.</p>
    </div>
    <div class="col-sm-4">
      <h3>Столбец 3: Путь на гору</h3>
      <p>Вдоль каменистой тропы на высоком холме, где родилась белая облачность, есть дома.</p>
      <p>Стоя на стоянке, любуясь вечерней красотой леса,霜叶红于二月花。</p>
    </div>
  </div>
</div>

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

Версии Bootstrap

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

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

Основное различие между Bootstrap 5 и Bootstrap 3 & 4 заключается в том, что Bootstrap 5 перешел на Vanilla 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 (сети контент-доставки).

CodeW3C.com предоставляет CDN-поддержку для CSS и JavaScript Bootstrap:

MaxCDN:

<!-- Новейший скомпилированный и сжатый CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- Новейший скомпилированный JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.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 doctype.

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

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

2. Bootstrap 5 ưu tiên cho thiết bị di động

Цель дизайна Bootstrap 5 - это адаптивность для мобильных устройств. Стили, ưu tiên cho thiết bị di động, là một phần của khung công tác cơ bản.

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

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

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

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

3. Контейнер

Bootstrap 5 еще需要一个包含元素来包装站点内容。

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

  1. .container Класс предоставляет адаптивный контейнер с фиксированной шириной
  2. .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://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Моя первая страница Bootstrap</h1>
  <p>Эта часть находится в классе .container.</p>
  <p>Класс .container предоставляет контейнер с фиксированной шириной, адаптирующийся к ширине экрана.</p>
</div>
</body>
</html>

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

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

Ниже приведен пример кода базовой страницы 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://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Моя первая страница Bootstrap</h1>
  <p>Эта часть находится в классе .container-fluid.</p>
  <p>Класс .container-fluid предоставляет контейнер полной ширины, охватывающий всю ширину окна.</p>
</div>
</body>
</html>

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