Это третий день моего участия в Gengwen Challenge.Подробности о мероприятии, пожалуйста, проверьте:Обновить вызов

«Bootstrap5 Zero Basic to Master» Я Лао Лю оригинал, стремлюсь обновлять раздел каждый день

1. Точки останова в Bootstrap5

1.1 Мобильный прежде всего

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

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

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

1.2 Точки останова начальной загрузки

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

тип точки останова	инфикс класса	разрешение
X-Small (очень маленький, обычно мобильный телефон)	None	<576px
Маленький (маленький, планшет или старый блокнот)	`sm`	≥576px
Средний (средний, узкоэкранный компьютер)	`md`	≥768px
Большой (большой, широкоэкранный компьютер)	`lg`	≥992px
Очень большой (очень большой, широкоэкранный компьютер)	`xl`	≥1200px
Очень большой (очень большой компьютер с высоким разрешением или рекламное устройство)	`xxl`	≥1400px

Как видно из приведенной выше таблицы, через 5 точек останова экран делится на 6 размеров и моделей, здесь читателям нужно только сначала разобраться, а далее будет представлено в третьем разделе системы сетки.

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

2.1 Контейнеры используются для хранения вещей

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

2.2 Классификация контейнеров Bootstrap

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

.container, контейнер по умолчанию, ширина которого равна максимальной ширине предыдущей точки останова перед каждой точкой останова ответа.
Контейнер .container-fluid всегда занимает 100% ширины браузера.
.container-{breakpoint}, контейнер точки останова, до достижения точки останова его ширина всегда составляет 100% от ширины браузера, а после достижения отключения его ширина всегда равна максимальной ширине точки останова. где значение точки останова соответствует точке останова, описанной ранее.

В таблице ниже показана ширина контейнера для разных разрешений.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

2.3 Анализ контейнера при изменении ширины браузера

2.3.1 Простой пример

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

Возьмем в качестве примера container-md: когда ширина экрана меньше 768 пикселей, ширина контейнера составляет 100 % ширины экрана. Если ширина экрана больше 768 пикселей и меньше 992 пикселей, ширина контейнера всегда составляет 720 пикселей. когда ширина экрана больше 992 пикселей и меньше 1200 пикселей, ширина контейнера всегда равна 960 пикселей и т. д. То же самое верно для других контейнеров точек останова и контейнера по умолчанию.

2.3.2 Некоторые особенности контейнеров Bootstrap (за исключением контейнеров потоковой передачи)

Ширина контейнера прыгает и не плавная, а ширина одинакова в промежутке между каждыми двумя контрольными точками
Контейнер не имеет границ до точки останова и ограничен после точки останова, на экране с разрешением 768 пикселей ширина контейнера составляет 720 пикселей.
Контейнер по умолчанию (container) и малый контейнер (container-sm) на данный момент эквивалентны, но не исключено, что на следующем шаге будут изменения.

2.4 Демонстрационный код изменения контейнера в зависимости от ширины браузера

Ниже приведен демо-код под разную ширину браузера, а также рендеринг GIF. Если вы не понимаете, вы можете скачать код и изучить его самостоятельно. Часть стиля для меня, чтобы установить цвет фона контейнера и установите интервал каждого контейнера, чтобы облегчить различение и просмотр.Написано, не имеет ничего общего с самим контейнером.

2.4.1 Демонстрационная анимация

2.4.2 Исходный код демо

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
 
    <title>不同宽度下容器宽度演示</title>
    <style>
      div{background-color: rgba(0, 0, 255, 0.178);padding: 10px;margin: 10px;}
    </style>
  </head>
  <body>
    <div class="container">    默认容器  </div>
    <div class="container-sm">container-sm 100% wide until small breakpoint</div>
    <div class="container-md">container-md 100% wide until medium breakpoint</div>
    <div class="container-lg">container-lg 100% wide until large breakpoint</div>
    <div class="container-xl">container-xl 100% wide until extra large breakpoint</div>
    <div class="container-xxl">container-xxl 100% wide until extra extra large breakpoint</div>
    <div class="container-fluid"> 流式容器 </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Сегодняшний курс здесь, пожалуйста, следуйте за мной и вовремя изучите оригинальный «Bootstrap5 Zero Basic to Mastery» моего Лао Лю, раздел 3 системы сетки макета веб-страницы Bootstrap.