Bootstrap 简明教程
Bootstrap - Breakpoint
本章将讨论 Bootstrap 断点。Bootstrap 断点可以帮助我们确定响应式布局如何在不同的设备和视口大小上显示。
Basic concepts
-
Bootstrap 中的断点用于创建响应式设计。您可以在特定的视口或设备大小调整它们。
-
CSS 媒体查询允许我们根据浏览器和操作系统参数定制样式。Boostrap 中的媒体查询主要使用 min-width 来控制断点。
-
Bootstrap 的目标是先移动，再设计响应。Bootstrap 使用最少的样式创建适合移动设备的布局，并为较大的设备添加图层。它改善了渲染时间并为用户提供了更好的观看体验。
Types of breakpoints
Bootstrap 提供了六个称为网格层的默认断点。如果我们使用 Boostrap 的源 Sass 文件，则可以对其进行自定义。
Breakpoint |
Class Infix |
Dimensions |
Extra small |
None |
<576px |
Small |
sm |
≥576px |
Medium |
md |
≥768px |
Large |
lg |
≥992px |
Extra large |
xl |
≥1200px |
Extra extra large |
xxl |
≥1400px |
这些断点涵盖了常见的设备尺寸和视口尺寸。这些引导断点可以使用 Sass 更改，如下所示：
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);Media queries
Bootstrap 旨在首先移动设备，因此使用 media queries 为其布局和界面创建明智的断点。最小视口宽度用于控制断点，这些断点会随着视口的变化而缩放元素。
Min-width
min-width 媒体特性状态指定特定设备的最小屏幕宽度。在断点中设置 min-width 表示 CSS 仅应用于宽度大于设备最小宽度的设备。
@include media-breakpoint-up(sm) { ... }上面的语法意味着将针对大于最小宽度的设备应用 CSS，即小型设备（横向手机，576px 及更高）。
让我们通过一个示例来看 min-width 媒体特性的使用。在这里，您将看到我们应用了一个在设备宽度小于 768px 时隐藏 div 的功能。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Breakpoint</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
<style>
.custom-class {
display: none;
}
@media (min-width: 768px) {
.custom-class {
display: block;
}
@media (min-width: 768px) {
.custom-class {
display: block;
}
}
</style>
</head>
<body>
<h5>This block is visible on all devices</h5>
<div class="container-fluid mt-2 ">
<div class="row">
<div class="col-md-6 bg-warning p-3">
md-6 warning
</div>
</div>
</div><br>
<h5>This block is not visible for sm breakpoint but visible for other breakpoints</h5>
<div class="container-fluid mt-2 custom-class">
<div class="row">
<div class="col-md-6 bg-warning p-3">
md-6 warning
</div>
</div>
</div>
</body>
</html>Max-width Breakpoint
max-width 媒体特性指出特定设备的最大屏幕宽度。在断点中设置 max-width 表示 CSS 仅应用于媒体查询中提到的宽度小于其宽度的设备。
@include media-breakpoint-down(xl) { ... }上面的语法意味着将针对大型设备（台式机，小于 1200px）应用 CSS。
让我们通过一个示例来看 max-width 媒体特性的使用：
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Breakpoint</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
<style>
.custom-class {
display: none;
}
@media (max-width: 767.98px) {
.custom-class {
display: block;
}
}
</style>
</head>
<body>
<h5>This block visible on all devices</h5>
<div class="container-fluid mt-2">
<div class="row">
<div class="col-xxl-3 bg-primary text-black p-3">
xxl-3 primary
</div>
</div>
</div>
<h5>This block not visible all devices larger than sm</h5>
<div class="container-fluid mt-2 custom-class">
<div class="row">
<div class="col-lg-6 bg-warning text-black p-3">
lg-6 warning
</div>
</div>
</div>
</body>
</html>