第六章之辅组类与响应式工具

第六章之辅助类与响应式工具

一、辅助类

辅助类可以简单的理解为一组实用的CSS类，它们可以帮助快速实现常见的布局和样式需求，同时可以使代码更具可读性。Bootstrap提供了一系列的辅助类，这些辅助类可以在HTML标签中任意使用，可以简化页面的HTML结构，也可以提高CSS代码的复用性。

辅助类一般以 . 类名形式出现，例如 .d-none 表示隐藏元素、.ml-auto 表示左外边距自动调整为最大，等等。

下面是几个常用的辅助类：

1. d- 类

.d-{value}类表示元素的 display 属性，有以下几个值：

• d-none：隐藏元素，类似于 display: none;
• d-inline：以行内块元素显示；
• d-inline-block：以行内块元素的形式显示；
• d-block：以块级元素的形式显示；
• d-flex： 弹性布局容器；
• d-grid：网络布局容器；
• d-table：表格布局容器；
• d-table-cell：表格单元格布局容器。

使用示例：

<div class="d-flex">
  <div>#### Title</div>
  <div class="ml-auto">右侧自动布局</div>
</div>

2. mx-auto

mx-auto 表示元素的左右 margin 居中，实现水平居中。使用示例：

<div class="mx-auto" style="width:200px;background-color:lightgray;">这个元素居中了</div>

3. text- 类

text-{value}类表示元素的文本对齐方式，有以下几个值：

• text-left：文本居左对齐；
• text-center： 文本居中对齐；
• text-right：文本居右对齐；
• text-justify：两端对齐；
• text-nowrap： 文本不换行。

使用示例：

<p class="text-center">这段文字居中了</p>

4. bg- 类

bg-{value}类表示元素的背景颜色，有以下几个值：

• bg-danger：红色；
• bg-success：绿色；
• bg-warning：黄色；
• bg-info：浅蓝色；
• bg-primary：蓝色；
• bg-secondary：灰色；
• bg-dark：深色；
• bg-light：浅色。

使用示例：

<div class="bg-danger" style="height:50px;"></div>

二、响应式工具

Bootstrap提供一系列的响应式工具类，可以根据不同的屏幕尺寸（如：手机、平板、电脑）自动调整样式。这些工具类可以为开发者提供更好的适配性和移动端体验。

1. 显示类

Bootstrap提供了一些工具类来控制元素显示与隐藏：

• d-none： 隐藏元素，在所有设备上都隐藏；
• d-{value}-none： 隐藏元素，在指定屏幕上隐藏，如 d-md-none 表示在中大屏上隐藏；
• d-{value}-block： 显示元素，在指定屏幕上显示，如 d-md-block 表示在中大屏上显示；
• d-{value}-inline： 行内显示元素，在指定屏幕上行内显示，如 d-lg-inline 表示在大屏上显示为行内元素。

使用示例：

<div class="d-none d-md-block">在中大屏上显示</div>

2. 布局类

Bootstrap提供了一些工具类来进行布局，包括单位、间距和对齐：

• container 和 container-fluid： 两种布局方式，container是有固定宽度的，container-fluid是100%布局；
• row: 一行；
• col： 一列；
• col-{value}: 在各种设备上，定宽，value为1到12的整数；
• col-{value}-offset-{value}: 在各种设备上，定宽，偏移值，value为1到12的整数；
• col-{value}-push-{value}： 挤开列，value为1到12的整数；
• col-{value}-pull-{value}： 将列挤回；value为1到12的整数。

使用示例：

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">响应式布局</div>
  </div>
</div>

以上就是本章内容的完整攻略了，希望能对大家有所帮助。