笔记大全

什么是bootstrap栅格系统的单位

更新时间：2023-07-13

前言：

Bootstrap栅格系统是构建响应式布局的关键组件，是Bootstrap框架的基础。在这里，我们将详细解释Bootstrap栅格系统的单位，包括如何快速进行响应式布局的设计、如何设置布局样式以及如何应用自定义CSS。这将向您展示如何在Bootstrap栅格系统中灵活应用这些概念和技术。在此之前，请确保您已经具备HTML和CSS的基础知识。

栅格系统的基本单位：

Bootstrap栅格系统是将页面分为12列的响应式网格。 Bootstrap使用百分比来计算宽度，这意味着您无需担心屏幕分辨率问题。而在列的宽度方面，则使用以下基本单位：xs、sm、md、lg、xl。

其中，xs代表extra small即极小屏幕，sm代表small即小屏幕，md代表medium即中等屏幕，lg代表large即大屏幕，xl代表extra large即极大屏幕。

下面是一个关于栅格系统的示例代码：

在此示例中，每个列都被分配了它所属的屏幕大小范围，当然，你可以自定义设置。例如，“col-md-6 col-lg-3”表示将该列在md时占它父容器的6份之1，在lg中占4份之1。

栅格系统的嵌套：

Bootstrap栅格系统允许您嵌套列来创建更复杂的布局。通过嵌套，您可以把一列分成若干小列，其中每个小列的宽度和原列所占比例相同。

以下是一个嵌套栅格系统的示例代码：

在该示例中，第一个列被分配了md-6（即占该父容器的6份之一），而该列又被分成了两个小列，分别为md-6的比例。第二个列被直接分配给md-6的比例。

栅格系统的自定义设置：

Bootstrap栅格系统的设置也是可以自定义的，您可以根据自己的需要进行设置。如果想要更改栅格系统的列的宽度和间距，请修改Sass变量文件，然后重新编译CSS。以下示例展示如何自定义栅格系统：

  $container-max-widths: (
      sm: 540px,
      md: 720px,
      lg: 960px,
      xl: 1140px
  ) !default;

  $grid-columns:        24 !default;
  $gutter-width:        30px !default;
  $grid-gutter-widths: (
      xs: $gutter-width,
      sm: $gutter-width,
      md: $gutter-width,
      lg: $gutter-width,
      xl: $gutter-width
  ) !default;

在这个示例中，您可以看到自定义栅格系统的变量，包括MAX_CONTAINER_WIDTH、GRID_COLUMNS、GUTTER_WIDTH、GRID_GUTTER_WIDTHS。通过这些自定义，可以实现灵活的栅格布局。

总结：

Bootstrap栅格系统是响应式设计的核心组件，是实现跨平台布局的关键。它将页面分为12列，并使用百分比的方式计算列的宽度，同时将屏幕分为xs、sm、md、lg、xl5个尺寸范围。您可以根据您的需要对Bootstrap栅格系统进行自定义设置，使用嵌套栅格和自定义设置，可以轻松地创建具有多种复杂性布局的网站。

c语言编程笔录