使用 bootstrap CSS 创建响应式网格

时间：2023-05-09 20:00:01 | 来源：网站运营

时间：2023-05-09 20:00:01 来源：网站运营

使用 bootstrap CSS 创建响应式网格：

响应式设计需要响应式网格和响应式断点。 Bootstrap 将这两者作为其库的一部分提供。 Bootstrap 是一种流行的 CSS 框架，它提供了一个预先准备好的 CSS 和 JavaScript 组件库，例如表单、按钮和导航，可用于构建响应式和移动就绪的网站。 它旨在帮助开发人员快速轻松地创建响应式、移动优先的网站，广泛应用于前端 Web 开发。 Bootstrap 是开源的，可以免费使用。

BOOTSTRAP网格系统

引导网格系统帮助我们通过一系列容纳我们内容的行和列来创建网页布局。 对于网格，bootstrap 使用了 12 列的网格系统，可以是 fluid 或 fixed，如果超过 12 个，元素将被堆叠。 引导网格系统总是有一个容器、行和列。 容器是网格的根元素。 它包含垫并对齐您的内容。 容器提供了一种居中和水平填充站点内容的方法。 将 .container 用于响应式像素宽度（其宽度根据当前响应式断点确定）或 .container-fluid 用于宽度：所有视口和设备尺寸的 100%。

由于 bootstrap 使用 12 列网格系统，如果为多行定义了两列，Bootstrap 很聪明，会将两列设置为跨越六列空间。

断点是由特定布局要求确定的屏幕尺寸阈值。 在给定的断点范围内，布局会调整以适应屏幕大小和方向。 我们在修复中使用类来修复 Bootstrap 网格系统中的响应断点。 以下是 bootstrap 中可用的响应式断点以及我们如何使用它们。

Extra small 适用于宽度小于 576 像素的屏幕。

小适用于大于或等于 576 像素宽的屏幕。 在 bootstrap CSS 规则中，这缩写为 SM。

中适用于大于或等于 768 像素宽的屏幕。 在 Bootstrap CSS 规则中，这缩写为 MD。

大适用于大于或等于 992 像素宽的屏幕。 在 Bootstrap CSS 规则中，缩写为 LG。

超大适用于大于或等于 1200 像素宽的屏幕。 在 bootstrap CSS 规则中，这缩写为 XL。

Extra特大是指屏幕宽度大于或等于1400像素。

在 bootstrap CSS 规则中，这缩写为 XXL。

以下是使用 Bootstrap 网格系统创建响应式布局的示例：


<div class="container"> <div class="row"> <div class="col-sm-4">Column 1</div> <div class="col-sm-4">Column 2</div> <div class="col-sm-4">Column 3</div> </div></div>在此示例中，容器类用于为网格创建容器。 row 类用于创建一行，col-sm-4 类用于创建三个等宽的列，这些列将在较小的屏幕（低于 576px）上垂直堆叠。

您还可以根据屏幕大小使用不同的网格类来创建不同的布局。 例如，使用 col-md-6 和 col-lg-3 类，您可以在中等屏幕（768px 及以上）上创建两个等宽列，在大屏幕（992px 及以上）上创建三个等宽列。

您还可以使用偏移类在列之间创建空白空间。


<div class="container"> <div class="row"> <div class="col-sm-4">Column 1</div> <div class="col-sm-4 offset-sm-4">Column 2</div> </div></div>这将创建一个 4 列布局，其中第 1 列采用 4 列，第 2 列采用 4 列，偏移量为 4 列。

您还可以使用推和拉类来更改不同屏幕的列顺序。


<div class="container"> <div class="row"> <div class="col-sm-4 col-md-6 push-md-6">Column 1</div> <div class="col-sm-4 col-md-6 pull-md-6">Column 2</div> </div></div>这将为小屏幕创建 4 列布局，为中等屏幕创建 6 列布局，其中第 1 列在中等屏幕上被推到第 2 列的右侧。

引导系统可以根据您的设计需要进行定制。

Bootstrap 网格系统的优点

Bootstrap 网格系统有几个优点，使其成为前端 Web 开发的热门选择：

响应式设计

Bootstrap 的网格系统旨在响应并适应不同的屏幕尺寸，从而轻松创建适合移动设备的网站。

一致性

网格系统提供了一个可以跨网站的不同页面和组件使用的一致布局，使得保持一致的设计变得容易。

灵活性

网格系统可以很容易地定制，以根据屏幕尺寸创建不同的布局，从而实现设计的灵活性。

使用方便

网格系统易于学习和使用，只需要最少的 CSS 和 JavaScript 知识。

大型社区

Bootstrap 是一个开源项目，拥有庞大的开发人员社区，因此有大量资源和教程可帮助您学习和使用网格系统。

跨浏览器兼容性

Bootstrap 网格系统旨在与大多数现代浏览器一起使用，并与最新版本的 chrome、firefox、safari 和 internet explorer 兼容。

加快发展

使用 Bootstrap 网格系统可以加快开发时间，因为它消除了为常用组件从头开始编写 CSS 和 JavaScript 代码的需要。

辅助功能

Bootstrap 遵循 Web 可访问性指南，确保所有用户都可以访问网格系统。

结论

Bootstrap 网格系统是一个强大的工具，可以帮助开发人员快速轻松地创建响应式、移动就绪的网站，并具有一致且灵活的布局。 它可以帮助加快开发时间并使维护网站设计变得容易。