Bootstrap 辅助类

Bootstrap辅助类文档

Bootstrap是最受欢迎的前端框架之一，其提供了一系列简单易用的辅助类，帮助开发者轻松快速地构建响应式、可复用的页面。

本文主要介绍Bootstrap辅助类的用法和示例，以便开发者更好地理解和掌握。

布局类

容器类

容器类可以控制内容在页面上的宽度和居中位置。

  • .container：变宽的容器，仅在大屏设备上水平居中。
  • .container-fluid：占据整个页面宽度的容器。

示例代码：

<div class="container">
  <!-- 内容 -->
</div>

<div class="container-fluid">
  <!-- 内容 -->
</div>

行类

行类决定了网格系统的水平排列方式，每一行划分为12列。

  • .row：网格行。

示例代码：

<div class="container">
  <div class="row">
    <div class="col-sm-6">左侧内容</div>
    <div class="col-sm-6">右侧内容</div>
  </div>
</div>

列类

列类定义了网格系统主要的布局方式。

  • .col-*：列类，用于表示占用多少列，*代表数字1到12。一共有12个可选类名，分别对应一列到十二列宽度。

示例代码：

<div class="container">
  <div class="row">
    <div class="col-sm-6">左侧内容</div>
    <div class="col-sm-6">右侧内容</div>
  </div>
</div>

辅助类

Bootstrap提供了许多辅助类，用于快速样式调整和排版。

文本类

  • .text-left：左对齐。
  • .text-center：居中对齐。
  • .text-right：右对齐。
  • .text-justify：两端对齐。

示例代码：

<div class="text-left">左对齐文本</div>
<div class="text-center">居中文本</div>
<div class="text-right">右对齐文本</div>
<div class="text-justify">两端对齐文本</div>

颜色类

颜色类可以方便设置元素的颜色。

  • .text-primary：主要文本颜色。
  • .text-success：成功文本颜色。
  • .text-info：信息文本颜色。
  • .text-warning：警告文本颜色。
  • .text-danger：危险文本颜色。

示例代码：

<span class="text-primary">主要文本</span>
<span class="text-success">成功文本</span>
<span class="text-info">信息文本</span>
<span class="text-warning">警告文本</span>
<span class="text-danger">危险文本</span>

显示类

显示类可以控制元素什么情况下可见。

  • .d-none：隐藏元素。
  • .d-block：显示为块状元素。
  • .d-inline-block：显示为内联块状元素。
  • .d-sm-none：小屏幕下隐藏元素。
  • .d-md-none：中屏幕下隐藏元素。
  • .d-lg-none：大屏幕下隐藏元素。

示例代码：

<div class="d-none">隐藏元素</div>
<div class="d-block">显示为块状元素</div>
<span class="d-inline-block">显示为内联块状元素</span>
<div class="d-sm-none">小屏幕下隐藏元素</div>
<div class="d-md-none">中屏幕下隐藏元素</div>
<div class="d-lg-none">大屏幕下隐藏元素</div>

边距、内边距类

边距、内边距类可以方便地设置元素的间距。

  • .m-*：外边距，*代表数字0到5，0代表无外边距，1到5代表1到5倍1rem边距。
  • .mt-*：上外边距。
  • .mr-*：右外边距。
  • .mb-*：下外边距。
  • .ml-*：左外边距。
  • .p-*：内边距，*的取值和.m-*相同。

示例代码：

<div class="mt-3">上外边距为3倍1rem</div>
<div class="p-2">内边距为2倍1rem</div>

宽度类

宽度类可以方便地设置元素的宽度。

  • .w-25：宽度为25%。
  • .w-50：宽度为50%。
  • .w-75：宽度为75%。
  • .w-100：宽度为100%。

示例代码：

<div class="w-25">宽度为25%</div>
<div class="w-50">宽度为50%</div>

结论

本文主要介绍了Bootstrap辅助类的布局类和辅助类，开发者可以根据实际需要灵活应用，提高开发效率和代码可维护性。

Bootstrap 轮播（Carousel）插件 Bootstrap 输入框组