Исследование Bootstrap отмечает три

1. Контейнер макета

Класс контейнера является самым основным элементом макета в Bootstrap и требуется при использовании системы сеток по умолчанию. В Bootstrap определены два контейнера: .container и .container- fluid .

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

Контейнер container-fluid остается на весь экран, всегда со 100% шириной.

Код ссылки:

<тело>

</div>

</div>

</тело>

2. Реагируйте на точки останова

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

Выбирайте разные пиксели в зависимости от устройства.

3. z-индекс

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

Не рекомендуется настраивать значение свойства z-index , если вы измените одно из них, вам может потребоваться изменить их все.

4. Сеточная система

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

Каждая строка сетки должна быть помещена в контейнер с классом .container (фиксированная ширина) или .container-fluid (полноэкранная ширина), чтобы можно было автоматически установить некоторые поля и отступы.

Строки используются в сеточных системах для создания горизонтальных групп столбцов, контент размещается в столбцах, и только столбцы могут быть непосредственными узлами строк. Предопределенные классы, такие как .row и .col-sm-4 , можно использовать для быстрого создания столбцов макета сетки, создания промежутков между содержимым столбцов путем заполнения, этого промежутка через отрицательные поля в классе строк , установка первой строки и последнего смещения на единицу столбец.

Условные обозначения системы сетки на различных экранах и устройствах
	Устройства со сверхмалым экраном ( <576 пикселей )	устройство с маленьким экраном (≥ 576 пикселей )	Устройство со средним экраном (≥ 768 пикселей )	Устройство с большим экраном (≥ 992 пикселей )	Устройства с большим экраном (≥ 1200 пикселей )
максимальная ширина контейнера	Нет (авто)	540 пикселей	720 пикселей	960 пикселей	1140 пикселей
префикс класса _	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
Число столбцов	12
Ширина слота	30 пикселей (по 15 пикселей с обеих сторон каждого столбца )
вложенный	разрешать
сортировка столбцов	разрешать

Столбцы сетки создаются путем охвата указанных 12 столбцов. Bootstrap использует em или rem для большинства размеров, точек останова сетки и ширины контейнера в px , потому что ширина области просмотра измеряется в пикселях и не меняется с размером шрифта.

5. Автоматический макет

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

А. Столбцы одинаковой ширины

Пример кода:

<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> Моноширинные столбцы </h3>
	<div класс = " строка ">
	<div class =" col border py-3 bg-light "> Половина </div>
	<div class =" col border py-3 bg-light "> Половина </div>
	</div>
	<div класс = " строка ">
	<div class =" col border py-3 bg-light "> одна треть </div>
	<div class =" col border py-3 bg-light "> одна треть </div>
	<div class =" col border py-3 bg-light "> одна треть </div>
	</div>
	<div класс = " строка ">
	<div class =" col border py-3 bg-light "> квартал </div>
	<div class =" col border py-3 bg-light "> квартал </div>
	<div class =" col border py-3 bg-light "> квартал </div>
	<div class =" col border py-3 bg-light "> квартал </div>
	</div>
	<div класс = " строка ">
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	<div class =" col border py-3 bg-light "> одна двенадцатая </div>
	</div>
	</тело>

	</html>

б. Установите ширину столбца

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

Пример кода:

	<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> Установить ширину столбца </h3>
	<div класс = " строка ">
	<div class =" col border py-3 bg-light "> слева </div>
	<div class =" col-7 border py-3 bg-light "> средний </div>
	<div class =" col border py-3 bg-light "> справа </div>
	</div>
	<div класс = " строка ">
	<div class =" col-3 border py-3 bg-light "> слева </div>
	<div class =" col border py-3 bg-light "> средний </div>
	<div class =" col border py-3 bg-light "> справа </div>
	</div>
	</тело>
	</html>

C. Контент переменной ширины

Этого можно добиться с помощью метода точки останова col-{breakpoint}-auto для изменения размера столбца в соответствии с естественной шириной его содержимого.

Пример кода:

<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> Содержимое переменной ширины </h3>
	<div class = " выравнивание по ширине-контента-md-центр ">
	<div class =" col col-lg-2 border py-3 bg-light "> слева </div>
	<div class =" col-md-auto border py-3 bg-light "> (при размере экрана ≥768 пикселей ширина столбца может автоматически регулироваться в соответствии с содержимым) </div>
	<div class =" col col-lg-2 border py-3 bg-light "> справа </div>
	</div>
	<div класс = " строка ">
	<div class =" col border py-3 bg-light "> слева </div>
	<div class =" col-md-auto border py-3 bg-light "> (при размере экрана ≥768 пикселей ширина столбца может автоматически регулироваться в соответствии с содержимым) </div>
	<div class =" col col-lg-2 border py-3 bg-light "> справа </div>
	</div>
	</тело>
	</html>

г. Одинаковая ширина и несколько столбцов

Создайте столбцы одинаковой ширины, охватывающие несколько строк, вставив класс общего стиля w-100 , который разбивает столбец на новые строки.

Пример кода:

<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> Многострочное отображение столбцов одинаковой ширины </h3><div class =" row ">

	<div class =" col border py-3 bg-light "> квартал </div>
	<div class =" col border py-3 bg-light "> квартал </div>
	<div class =" w-100 "></div>
	<div class =" col border py-3 bg-light "> квартал </div>
	<div class =" col border py-3 bg-light "> квартал </div>
	</div>
	</тело>
	</html>

6. Класс отклика

Система сеток Bootstrap включает в себя 5 значений ширины и определений для создания сложных адаптивных макетов, которые можно определить по мере необходимости: extra small.col , small.col-sm-*, medium.col-md-* , large.col — lg —* , очень большой .col-xl-* пять стилей экрана.

А. Покройте все устройства

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

Пример кода:

<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> охватывает все устройства </h3>
	<div класс = " строка ">
	<div class =" col border py-3 bg-light "> col</div>
	<div class =" col border py-3 bg-light "> col</div>
	<div class =" col border py-3 bg-light "> col</div>
	<div class =" col border py-3 bg-light "> col</div>
	</div>
	<div класс = " строка ">
	<div class =" col-8 border py-3 bg-light "> col-8</div>
	<div class =" col-4 border py-3 bg-light "> col-4</div>
	</div>
	</тело>
	</html>

б. Горизонтальное расположение

Используя единственный метод класса .col-sm-* , можно создать базовую систему сетки, которая сохраняется, если не указаны другие значения ширины точки останова медиазапроса, и становится превосходной по мере сужения экрана . автоматически станет одной строкой на столбец и будет располагаться горизонтально.

Пример кода:

<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> Горизонтальное расположение </h3>
	<!-- Начать горизонтальное выравнивание на устройствах типа sm ( ≥576px ) -->
	<div класс = " строка ">
	<div class =" col-sm-8 border py-3 bg-light "> col-sm-8</div>
	<div class =" col-sm-4 border py-3 bg-light "> col-sm-4</div>
	</div>
	<!-- Начать горизонтальное выравнивание на устройствах типа md ( ≥768px ) -->
	<div класс = " строка ">
	<div class =" col-md-8 border py-3 bg-light "> col-md-8</div>
	<div class =" col-md-4 border py-3 bg-light "> col-md-4</div>
	</div>
	</тело>
	</html>

C. Комбинируйте и сочетайте

При необходимости каждый столбец может иметь другое определение устройства.

Пример кода:

<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> Комбинируйте и сочетайте </h3>
	<!-- Отображается как столбец полной ширины и столбец половинной ширины на устройствах меньшего типа, чем md , и отображается как один столбец на устройствах больше или равных типу md , что составляет 8 и 4 копии соответственно -->
	<div класс = " строка ">
	<div class =" col-12 col-md-8 border py-3 bg-light "> .col-12 .col-md-8</div>
	<div class =" col-6 col-md-4 border py-3 bg-light "> .col-6 .col-md-4</div>
	</div>
	<!-- На любом типе устройства ширина столбца составляет 50%-->
	<div класс = " строка ">
	<div class =" col-6 border py-3 bg-light "> .col-6</div>
	<div class =" col-6 border py-3 bg-light "> .col-6</div>
	</div>
	</тело>
	</html>

в. Удалить поля

Сетка и столбцы Bootstrap по умолчанию имеют поля, как правило, левое и правое поле -15 пикселей или обработку отступов , вы можете использовать класс .no-gutters для устранения, что повлияет на строку .row , параллельный зазор столбца и все подстолбцы .

Пример кода:

	<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> Удалить поля </h3>
	<div класс = " строка ">
	<div class =" col-12 col-sm-6 col-md-8 py-3 border bg-light "> .col-12 .col-sm-6 .col-md-8</div>
	<div class =" col-6 col-md-4 py-3 border bg-light "> .col-6 .col-md-4</div>
	</div>
	</тело>
	</html>

г. Набивка колонки

Если вы поместите более 12 столбцов в строку, каждый набор дополнительных столбцов будет перенесен как единое целое в новую строку.

Пример кода:

	<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name =" viewport " content =" width=device-width,initial-scale=1, slim-to-fit=no ">
	<link rel =" таблица стилей " href =" bootstrap-4.2.1-dist/css/bootstrap.css ">
	<скрипт исходный = jquery-3.3.1.slim.js " ></скрипт>
	<script src =" https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js "></script>
	<script src =" bootstrap-4.2.1-dist/js/bootstrap.min.js "></script>
	</голова>
	< класс тела = " контейнер ">
	<h3 class =" mb-4 "> Обтекание столбцов </h3>
	<div класс = " строка ">
	<div class =" col-9 py-3 border bg-light "> .col-9</div>
	<div class =" col-4 py-3 border bg-light "> .col-4<br> Поскольку 9 + 4 = 13 >12 , div шириной в 4 столбца переносится на новую строку как непрерывная единица. </div>
	<div class =" col-6 py-3 border bg-light "> .col-6<br> Последующие столбцы продолжаются на новых строках. </div>
	</div>
	</тело>
	</html>

7. Изменение порядка

А. Порядок сортировки

Используя селекторы класса .order-* , вы можете визуально сортировать пространство, предоставляя 12 уровней порядка от .order-1 до .order-12 и поддерживая основные браузеры и устройства.

Элементы без класса .order по умолчанию находятся на переднем плане.

пример кода

	<!ДОКТИП HTML>
	<html>
	<голова>
	<мета - кодировка = " UTF-8 ">
	<название> Название</название>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">排列顺序</h3>
	<div class="row">
	<div class="col order-12 py-3 border bg-light">
	order-12
	</div>
	<div class="col order-1 py-3 border bg-light">
	order-1
	</div>
	<div class="col order-6 py-3 border bg-light">
	order-6
	</div>
	<div class="col py-3 border bg-light">
	col
	</div>
	</div>
	</body>
	</html>

可以使用.order-first更改一个顺序到首位置，使用.order-last到末尾

b.列偏移

使用响应式的.offset-*类偏移
使用边距通用样式处理
偏移类

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，实现列偏移，比如：.offset-md-4是向右偏移四列

代码样例：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">偏移类示例</h3>
	<div class="row">
	<div class="col-md-6 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
	</div>
	<div class="row">
	<div class="col-md-4 offset-md-1 py-3 border bg-light">.col-md-4 .offset-md-1</div>
	<div class="col-md-4 offset-md-2 py-3 border bg-light">.col-md-4 .offset-md-2</div>
	</div>
	<div class="row">
	<div class="col-md-4 py-3 border bg-light">.col-md-4</div>
	<div class="col-md-4 offset-md-4 py-3 border bg-light">.col-md-4 .offset-md-4</div>
	</div>
	</body>
	</html>

b) 使用margin类

网格系统中可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现水平隔离的效果。

代码样例：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">使用margin类实现列偏移</h3>
	<div class="row">
	<div class="col-md-4 py-3 border bg-light">.col-md-4</div>
	<div class="col-md-4 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
	</div>
	<div class="row">
	<div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
	<div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
	</div>
	<div class="row">
	<div class="col-auto mr-auto py-3 border bg-light">.col-auto .mr-auto</div>
	<div class="col-auto py-3 border bg-light">.col-auto</div>
	</div>
	</body>
	</html>

c.列嵌套

如果想在网格系统中将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素中。被嵌套的行所包含的列数量小于12个。

代码样例：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">嵌套</h3>
	<div class="row">
	<div class="col-12 col-lg-6">
	<!--嵌套行-->
	<div class="row border no-gutters">
	<div class="col-12 col-sm-3"><img src="images/b.jpg" alt=""></div>
	<div class="col-12 col-sm-9 pl-3">
	李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在“清水出芙蓉，天然去雕饰”的自然美之中。
	</div>
	</div>
	</div>
	<div class="col-12 col-lg-6">
	<!--嵌套行-->
	<div class="row border no-gutters">
	<div class="col-12 col-sm-3"><img src="images/c.jpg" alt=""></div>
	<div class="col-12 col-sm-9 pl-3">
	在杜甫中年因其诗风沉郁顿挫，忧国忧民，杜甫的诗被称为“诗史”。他的诗词以古体、律诗见长，风格多样，以“沉郁顿挫”四字准确概括出他自己的作品风格，而以沉郁为主。
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>

8. 布局工具类

Bootstrap包含十几个用于显示、隐藏、对齐和间隔的使用工具，可以加快移动设备与响应式界面的开发。

a.Display块属性定义

使用 Bootstrap.的实用程序来响应式的切换，display属性的值，将其以网格系统内容或组件混合使用，以便在特定的事物中显示或隐藏。

b.Flexbox选项

Bootstrap是基于Flexbox流式布局，大多数组件都支持Flex流式布局，但不是所有的元素的display都是默认就启用display:flex属性的(会增加不必要的层叠，影响到浏览器的需要。)。

c.外边距和内边距

使用外边距和内边距使用程序来控制元素和组件的间距大小。Bootstrap包含一个用于间隔使用程序的5级刻度(基于1rem值默认$spacer变量),为所有视图选择值(例如，.mr-3 用于右边框: 1rem),或为目标特定视图选择响应变量(例如，.mr-md-3用于有边框：1rem,从md断点开始)。

d.切换显示和隐藏

如果不使用display对元素进行隐藏(或无法使用的)，可以使用visibility这个Bootstrap可视性工具来对网页上的元素进行隐藏，使用它后网页元素对于正常用户是不可见的，但元素的宽高占位依然有效。