Bootstrap

摘要：本文学习了如何使用Bootstrap框架，了解了栅格系统的原理。

环境

Windows 10 企业版 LTSC 21H2
Bootstrap 3.4.1

1 简介

Bootstrap是一个开源的前端UI框架，用于快速开发响应式网站和Web应用。

Bootstrap基于HTML、CSS和JS，提供了丰富的样式、组件和插件，帮助开发者快速构建美观且功能强大的界面。

Bootstrap具有以下特点：

响应式布局：能够自适应不同设备的屏幕尺寸，如手机、平板和桌面电脑等，确保网页在各种设备上都能呈现出良好的视觉效果和用户体验。
丰富的组件：包含了大量的预定义组件，如导航栏、按钮、表单、模态框、轮播图等，开发者可以直接使用这些组件，快速搭建网页界面，提高开发效率。
社区支持强大：拥有庞大且活跃的社区，开发者可以在社区中找到丰富的资源、插件和教程，也可以分享自己的经验和成果，遇到问题时能够得到及时的帮助和解决方案。
跨浏览器兼容：支持主流浏览器，确保网页在不同浏览器上都能正常显示和运行，减少了开发者处理浏览器兼容性问题的工作量。

官方网址：

本文使用的是3.4.1版本：

支持IE8+浏览器。
依赖JQuery，需要先引入JQuery。
使用的CSS预编译器是Less。

2 引入

2.1 通过CDN链接引入

在HTML文件的head元素中引入：

html

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<!-- 引入JQuery文件 -->
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 引入JS文件 -->
<script src="https://unpkg.com/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

2.2 通过本地文件引入

下载地址：在GitHub上下载3.4.1版本

文件中包含dist的是编译后的文件，不包含源码，体积小，用于部署到生产环境。

解压后目录说明：

css文件夹：放置样式文件。
js文件夹：放置脚本文件，其中的npm.js文件只在编译时使用。
fonts文件夹：放置图标字体库。

3 原理

3.1 容器

3.1.1 流体容器

使用class属性为container-fluid的元素，使用默认宽度，占据整行。

样式：

css

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

流体容器类似于width: 100%;样式，占据全部视口，使用场景较少。

3.1.2 固定容器

使用class属性为container的元素，使用媒体查询控制宽度，不会占据整行。

样式：

css

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

一般使用固定容器，支持响应式布局，很少使用流体容器。

3.2 栅格系统

3.2.1 简介

栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，可以将内容放入这些创建好的布局中。

栅格系统的基本组成部分：

Container：用于包裹整个栅格系统的容器，可以分为流体容器和固定容器。
Row：栅格行，用于包含列元素，并确保列在水平排列时正确对齐。
Col：栅格列，负责实际内容的显示，每一行最多可以包含12列，不足会保持空白，超出会自动换行。

3.2.2 断点

断点类似固定容器里的阈值：

断点缩写	屏幕类型	宽度范围
xs	超小屏幕	小于768px
sm	小屏幕	小于992px
md	中屏幕	小于1200px
lg	大屏幕	小于1400px
xl	超大屏幕	大于等于1400px

3.2.3 响应式列

使用class属性为row的元素表示行，使用class属性为col-断点-跨度的元素表示列。

示例：

html

<div class="container">
  <!-- 在小屏幕及以上的屏幕分为8份和4份，其他屏幕分为12份和12份 -->
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <!-- 在中屏幕及以上的屏幕分为8份和4份，其他屏幕分为12份和12份 -->
  <div class="row">
    <div class="col-md-8">col-md-8</div>
    <div class="col-md-4">col-md-4</div>
  </div>
</div>

3.2.4 列偏移

设置class属性为col-断点-offset-跨度控制将元素从左侧向右补充的跨度。

示例：

html

<div class="container">
  <!-- 不使用偏移 -->
  <div class="row">
    <div class="col-md-8">col-md-8</div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <!-- 使用偏移 -->
  <div class="row">
    <div class="col-md-6">col-md-6</div>
    <div class="col-md-4 col-md-offset-2">col-md-4</div>
  </div>
</div>

3.2.5 列排序

设置class属性为col-断点-方式-跨度控制元素的顺序：

方式	说明
push	控制将元素从左侧向右推的跨度
pull	控制将元素从左侧向右拉的跨度

示例：

html

<div class="container">
  <!-- 不使用排序 -->
  <div class="row">
    <div class="col-md-8">col-md-8</div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <!-- 使用排序 -->
  <div class="row">
    <div class="col-md-8 col-md-push-4">col-md-8</div>
    <div class="col-md-4 col-md-pull-8">col-md-4</div>
  </div>
</div>

3.2.6 列嵌套

支持在外层的列嵌套内层的列，内层同样分为12列。

示例：

html

<div class="container">
  <!-- 不使用嵌套 -->
  <div class="row">
    <div class="col-md-8">col-md-8</div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <!-- 外层嵌套 -->
  <div class="row">
    <div class="col-md-8">
      <!-- 内层嵌套 -->
      <div class="row">
        <div class="col-md-8">col-md-8</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>
    <div class="col-md-4">col-md-4</div>
  </div>
</div>

4 样式

4.1 表格

4.1.1 基础样式

在table元素上添加table类名，效果是增加水平分隔线。

示例：

html

1 2	<table class="table"> </table>

4.1.2 条纹样式

在table元素上添加table-striped类名，效果是增加条纹样式。

示例：

html

1 2	<table class="table table-striped"> </table>

4.1.3 悬停样式

在table元素上添加table-hover类名，效果是增加悬停样式。

示例：

html

1 2	<table class="table table-hover"> </table>

4.2 表单

4.2.1 基础表单

在div元素上添加form-group类名，用于包含label元素和表单元素。

示例：

html

<form>
  <div class="form-group">
    <label for="username">账户：</label>
    <input type="text" class="form-control" id="username" name="username">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

在表单元素上添加form-control类名，设置默认width: 100%;样式。

示例：

html

1	<input type="text" class="form-control" id="username" name="username">

4.2.2 内联表单

在form元素上添加form-inline类名，将表单元素变为inline-block级别，设置width: auto;样式，并使其内容左对齐。

示例：

html

<form class="form-inline">
  <div class="form-group">
    <label for="username">账户：</label>
    <input type="text" class="form-control" id="username" name="username">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

添加外层div元素，包含多个添加form-group类名的内层div元素。

在外层div元素上添加form-inline类名，将内层div元素变为inline-block级别。

在外层div元素上添加row类名，在内层div元素使用栅格系统控制每行显示的表单数量。

示例：

html

<form>
  <div class="form-inline row">
    <div class="form-group col-sm-6">
      <label for="username">账户：</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="form-group col-sm-6">
      <label for="sex">性别：</label>
      <select class="form-control" id="sex" name="sex">
        <option value="">请选择</option>
        <option value="1">男</option>
        <option value="0">女</option>
      </select>
    </div>
  </div>
  <div class="form-inline row">
    <div class="form-group col-sm-6">
      <label for="address">住址：</label>
      <input type="text" class="form-control" id="address" name="address">
    </div>
    <button type="submit" class="btn btn-default">提交</button>
  </div>
</form>

4.2.3 水平表单

在form元素上添加form-horizontal类名，使用div元素包含表单元素，在label元素和div元素上使用栅格系统控制每行显示的表单数量。

示例：

html

<form class="form-horizontal">
  <div class="form-group col-sm-6">
    <label for="username" class="col-sm-2">账户：</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="username" name="username">
    </div>
  </div>
  <div class="form-group col-sm-6">
    <label for="sex" class="col-sm-2">性别：</label>
    <div class="col-sm-10">
      <select class="form-control" id="sex" name="sex">
        <option value="">请选择</option>
        <option value="1">男</option>
        <option value="0">女</option>
      </select>
    </div>
  </div>
  <div class="form-group col-sm-6">
    <label for="address" class="col-sm-2">住址：</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="address" name="address">
    </div>
  </div>
  <div class="form-group col-sm-6">
    <button type="submit" class="btn btn-default">提交</button>
  </div>
</form>

4.3 按钮

给某些元素添加btn类名，可以使用按钮样式：

html

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="表单按钮">
<input class="btn btn-default" type="submit" value="表单提交">

按钮支持的样式：

html

<button type="button" class="btn btn-default">默认样式</button>
<button type="button" class="btn btn-primary">首选样式</button>
<button type="button" class="btn btn-success">成功样式</button>
<button type="button" class="btn btn-info">提示样式</button>
<button type="button" class="btn btn-warning">警告样式</button>
<button type="button" class="btn btn-danger">危险样式</button>
<button type="button" class="btn btn-link">链接样式</button>

按钮尺寸：

html

<button type="button" class="btn btn-default">默认按钮</button>
<button type="button" class="btn btn-default btn-lg">大按钮</button>
<button type="button" class="btn btn-default btn-sm">小按钮</button>
<button type="button" class="btn btn-default btn-xs">超小按钮</button>

4.4 辅助类

4.4.1 显示或隐藏内容

在块级元素上可以使用show类名和hidden类名设置元素显示和隐藏：

html

<div class="show">
  <p>显示</p>
</div>
<div class="hidden">
  <p>隐藏</p>
</div>

4.4.2 浮动

使用pull-left类名和pull-right类名设置元素向左浮动和向右浮动：

html

<div class="pull-left">
  <p>向左浮动</p>
</div>
<div class="pull-right">
  <p>向右浮动</p>
</div>

使用clearfix类名设置父元素用于清除浮动：

html

1 2	<div class="clearfix"> </div>

4.5 响应工具

根据断点显示：

html

<div class="visible-xs">
  <p>超小屏幕显示</p>
</div>
<div class="visible-sm">
  <p>小屏幕显示</p>
</div>
<div class="visible-md">
  <p>中屏幕显示</p>
</div>
<div class="visible-lg">
  <p>大屏幕显示</p>
</div>

根据断点隐藏：

html

<div class="hidden-xs">
  <p>超小屏幕隐藏</p>
</div>
<div class="hidden-sm">
  <p>小屏幕隐藏</p>
</div>
<div class="hidden-md">
  <p>中屏幕隐藏</p>
</div>
<div class="hidden-lg">
  <p>大屏幕隐藏</p>
</div>