属于Bootstrap栅格中设置的布局容器类的有什么

Bootstrap中栅格系统是通过行（`.row`）和列（`.col-*`）来进行布局的，其中列又分为多种宽度比例，通过不同的宽度比例来实现不同的布局效果。栅格布局的设置主要包括以下几个类：

1. `.container`：固定宽度的布局容器，宽度根据屏幕大小而变化，使用响应式布局。

2. `.container-fluid`：流式布局容器，宽度自适应屏幕大小，使用响应式布局。

3. `.row`：栅格行容器，用于包含栅格列。

4. `.col-*`：栅格列容器，用于定义栅格布局中的列，其中`*`代表列所占的宽度比例，例如`.col-6`表示该列占据行的6/12，即1/2的宽度。

5. `.offset-*`：栅格列偏移容器，用于定义列的偏移量，其中`*`代表该列的偏移量比例，例如`.offset-2`表示该列向右偏移行的2/12，即1/6的宽度。

6. `.order-*`：栅格列排序容器，用于定义列的显示顺序，其中`*`代表该列的显示顺序，例如`.order-1`表示该列在其他列之前显示。

通过使用这些栅格布局的类，可以快速地搭建起网页的基本布局，从而节省开发时间和成本。同时，Bootstrap还提供了多种响应式断点和栅格列偏移、列排序等高级功能，使得栅格布局更加灵活和实用。

相关问题

bootstrap栅格

Bootstrap栅格是Bootstrap框架中的一种布局系统，用于创建响应式的网页设计。栅格系统将页面的水平空间划分为12个等宽的列，可以根据不同设备的屏幕大小自动调整列的宽度。通过使用Bootstrap的栅格系统，可以轻松地创建具有不同布局和排版的网页。

栅格系统的基本使用方法是将内容包裹在带有.row类的div容器中，并使用.col-*-*类来定义列的宽度。其中，第一个*代表屏幕大小（xs、sm、md、lg、xl），第二个*代表列数（1~12），例如.col-sm-6表示在小屏幕上占据一半的宽度。

栅格系统还提供了一些辅助类，用于控制列的偏移、嵌套和隐藏。通过这些辅助类，可以实现更复杂的网页布局和排版效果。

总结起来，Bootstrap栅格是一种用于创建响应式网页设计的布局系统，通过将页面划分为12个等宽的列，可以快速且灵活地实现不同设备上的布局效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [BootStrap(栅格系统)](https://blog.csdn.net/magic_818/article/details/127678465)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

bootstrap栅格系统

Bootstrap栅格系统是一种响应式的网格布局系统，它将页面水平划分为12列，并且可以根据不同的屏幕尺寸自动调整列的宽度。通过使用Bootstrap栅格系统，可以轻松地创建出适应不同屏幕尺寸的网页布局。

以下是一个简单的例子，展示如何使用Bootstrap栅格系统创建一个基本的网页布局：

<div class="container">
  <div class="row">
    <div class="col-sm-4">左侧栏</div>
    <div class="col-sm-8">主要内容</div>
  </div>
</div>

在这个例子中，我们使用了Bootstrap提供的.container类来创建一个容器，然后在容器内部创建了一个.row类来表示一行。在这一行中，我们使用了.col-sm-4和.col-sm-8类来分别表示左侧栏和主要内容所占的列数。在这里，我们使用了“sm”前缀来表示这些列只在小屏幕设备上生效，如果需要在其他屏幕尺寸上生效，可以使用其他前缀，例如“md”、“lg”等。

除了上述例子中的类名之外，Bootstrap还提供了许多其他的类名，可以用来控制栅格系统的行为，例如.offset-*、.order-*、.align-*等。通过灵活地使用这些类名，可以创建出各种不同的网页布局。