46. bootstrap
1. bootstrap介绍
Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。
它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。
中文网：https://bootcss.com/
bootstrap需要导入两个文件：上方文件夹里的css文件和JavaScript文件
由于bootstrap v3依赖jQuery，因此还要导入jQuery文件
bootstrap的核心是通过class直接使用类
2. 全局css样式
Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。
2.1 布局容器
https://v3.bootcss.com/css/#overview-container
.container 类用于固定宽度并支持响应式布局的容器。（左右两边留空白）
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。（左右两边不留空白）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
<style>
.c1 {
height: 100px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="c1 container"></div> <!--左右两侧留有空白-->
<div class="c1 container-fluid"></div> <!--左右两侧不留空白-->
</body>
</html>
2.2 栅格系统
[1] 概念
https://v3.bootcss.com/css/#grid
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中。
下面就介绍一下 Bootstrap 栅格系统的工作原理：
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
所有列必须遵循「容器 → 行 → 列」的嵌套层级，缺一不可。
| 组件 | 类名 | 作用 |
| 容器 | .container/.container-fluid |
栅格的最外，控制宽度和左右边距（是否留空白） |
| 行 | .row | 列的父容器，清除列的浮动，抵消容器的内边距，列必须放在行里面 |
| 列 | .col-断点-列数 |
|
核心语法：
<div class="container">
<div class="row">
<div class="col-md-m" style="...">...</div>
<div class="col-md-n" style="...">...</div>
.
.
.
</div>
</div>
[2] 容器固定宽度container
左右两边留有空白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
<style>
.c2 {
background-color: cornflowerblue;
border: 3px solid black;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" style="background-color: aqua; border: 1px solid black">3等份</div>
<div class="col-md-4" style="background-color: deepskyblue; border: 2px solid black">4等份</div>
<div class="col-md-5" style="background-color: blueviolet; border: 3px solid black">5等份</div>
<div class="col-md-6 c2">6等份</div>
<div class="col-md-6 c2">6等份</div>
</div>
</div>
</body>
</html>
[3] 全屏容器container-fluid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<div class="container-fluid" style="margin-top: 20px"> # 加边距
<div class="row">
<div class="col-md-2" style="background-color: aqua; height: 100px">2等份</div>
<div class="col-md-4" style="background-color: blueviolet; height: 100px">4等份</div>
<div class="col-md-6" style="background-color: deepskyblue; height: 100px">6等份</div>
</div>
</div>
</body>
</html>
[4] 栅格参数：实现响应式布局
[5] .col-xs-超小屏幕（手机）的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: blueviolet; height: 200px">6等份</div>
<div class="col-md-6" style="background-color: deepskyblue; height: 200px">6等份</div>
</div>
</div>
</body>
</html>
以上代码在电脑中是左右布局，但是在手机中为上下布局
加上.col-xs-之后，在手机中和电脑中均为左右布局
col-xs-n n表示几列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-10" style="background-color: blueviolet; height: 200px">电脑中6等份，手机中10等份</div>
<div class="col-md-6 col-xs-2" style="background-color: deepskyblue; height: 200px">电脑中6等份，手机中2等份</div>
</div>
</div>
</body>
</html>
[6] 列偏移offset
使用 .col-md-offset-* 类可以将列向右侧偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-2" style="background-color: blueviolet; height: 200px">6等份，向右偏移2</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3" style="background-color: deepskyblue; height: 200px">6等份，向右偏移3</div>
</div>
</div>
</body>
</html>
[7] 嵌套列
外层不建议写样式类，否则边框可能重叠
嵌套的div里层要写row，否则样式可能混乱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
<style>
.c1 {
background-color: aqua;
border: 2px solid black;
height: 200px;
}
.c2 {
background-color: deepskyblue;
border: 2px solid black;
height: 200px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6"> <!--建议这里不要写c2样式类，子div中写c2即可，否则与子div的边框会形成重叠-->
<div class="row"> <!--在一个div中嵌套子div时，一定要写row，否则会造成样式混乱-->
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-1 c2"></div>
<div class="col-md-6 c2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
2.3 表格样式
[1] 概念
https://v3.bootcss.com/css/#tables
通过<table> 标签创建的表格是没有样式的
为<table> 标签添加 .table 类可以为其设置样式
<table class="table">
...
</table>
基础样式：
条纹状表格 table-striped
带边框的表格 table-bordered
鼠标悬停 table-hover
状态类 active、success、info、warning、danger
[2] 条纹状表格
table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式
<table class="table table-striped">
...
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<table class="table table-striped"> <!--定义表格，设置条纹-->
<thead> <!--定义表头-->
<tr> <!--定义一行数据-->
<th>序号</th> <!--定义表头字段，自动加粗-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody> <!--定义表体-->
<tr> <!--定义一行数据-->
<td>1</td> <!--定义表体单元格-->
<td>ronaldo</td>
<td>male</td>
<td>39</td>
</tr>
<tr>
<td>2</td>
<td>kylian</td>
<td>male</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>neymar</td>
<td>male</td>
<td>92</td>
</tr>
<tr>
<td>4</td>
<td>messi</td>
<td>male</td>
<td>37</td>
</tr>
<tr>
<td>5</td>
<td>giao</td>
<td>male</td>
<td>32</td>
</tr>
</tbody>
</table>
</body>
</html>
[3] 带边框的表格
table-bordered 类为表格和其中的每个单元格增加边框
<table class="table table-bordered">
...
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<table class="table table-bordered"> <!--定义表格，设置边框-->
<thead> <!--定义表头-->
<tr> <!--定义一行数据-->
<th>序号</th> <!--定义表头字段，自动加粗-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody> <!--定义表体-->
<tr> <!--定义一行数据-->
<td>1</td> <!--定义表体单元格-->
<td>ronaldo</td>
<td>male</td>
<td>39</td>
</tr>
<tr>
<td>2</td>
<td>kylian</td>
<td>male</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>neymar</td>
<td>male</td>
<td>92</td>
</tr>
<tr>
<td>4</td>
<td>messi</td>
<td>male</td>
<td>37</td>
</tr>
<tr>
<td>5</td>
<td>giao</td>
<td>male</td>
<td>32</td>
</tr>
</tbody>
</table>
</body>
</html>
[4] 鼠标悬停
table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
<table class="table table-hover">
...
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<table class="table table-hover"> <!--定义表格，设置悬停-->
<thead> <!--定义表头-->
<tr> <!--定义一行数据-->
<th>序号</th> <!--定义表头字段，自动加粗-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody> <!--定义表体-->
<tr> <!--定义一行数据-->
<td>1</td> <!--定义表体单元格-->
<td>ronaldo</td>
<td>male</td>
<td>39</td>
</tr>
<tr>
<td>2</td>
<td>kylian</td>
<td>male</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>neymar</td>
<td>male</td>
<td>92</td>
</tr>
<tr>
<td>4</td>
<td>messi</td>
<td>male</td>
<td>37</td>
</tr>
<tr>
<td>5</td>
<td>giao</td>
<td>male</td>
<td>32</td>
</tr>
</tbody>
</table>
</body>
</html>
[5] 状态类
既可以作用在每一行，也可以作用在单元格
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<table class="table"> <!--定义表格-->
<thead> <!--定义表头-->
<tr class="active"> <!--定义一行数据--> <!--active状态作用于行-->
<th>序号</th> <!--定义表头字段，自动加粗-->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody> <!--定义表体-->
<tr class="success"> <!--success状态作用于行-->
<td>1</td> <!--定义表体单元格-->
<td>ronaldo</td>
<td>male</td>
<td>39</td>
</tr>
<tr class="info"> <!--info状态作用于行-->
<td>2</td>
<td>kylian</td>
<td>male</td>
<td>26</td>
</tr>
<tr class="warning"> <!--warning状态作用于行-->
<td>3</td>
<td>neymar</td>
<td>male</td>
<td>92</td>
</tr>
<tr class="danger"> <!--danger状态作用于行-->
<td>4</td>
<td>messi</td>
<td>male</td>
<td>37</td>
</tr>
<tr>
<!--状态分别作用于单元格-->
<td class="active">5</td>
<td class="success">giao</td>
<td class="info">male</td>
<td class="warning">32</td>
</tr>
</tbody>
</table>
</body>
</html>
2.4 表单样式
https://v3.bootcss.com/css/#forms
[1] 概念
1. 适用元素
form-control仅适用于单行输入类、文本域、单选项下拉框，核心适用标签 / 类型：
<input> text/password/email/number/tel/search等单行类型（radio/checkbox不可用）
<textarea> 文本域
<select> 单选项下拉框（Bootstrap 5 推荐用form-select替代，下文说明）
2. 基础写法
直接给表单控件添加class="form-control"即可，默认宽度 100%，适配父容器
基础效果：统一的内边距（0.375rem 0.75rem）、浅灰色边框、4px 圆角、焦点时蓝色边框 + 阴影、禁用时浅灰色背景等。
当表单控件添加 "form-control" 类时，这个控件会获得以下一些样式特性：
宽度：默认情况下，自动为表单控件设置宽度为 100%。
内边距：控件内部会有一定的内边距，使得用户输入的内容不会紧贴控件的边缘。
边框：会有一个统一的边框样式，通常是轻薄的，并且颜色会根据Bootstrap的主题有所变化。
圆角：控件的边角会变得圆润，增加整体的友好感。
字体和颜色：字体大小、颜色以及背景色都会根据Bootstrap的样式指南进行统一设置。
焦点状态：当用户点击或聚焦到该控件时，会有特定的视觉反馈，如边框颜色的变化。
[2] 代码与样式
(1)不添加 "form-control" 类
(2)添加 "form-control" 类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"> <!--左右两边留空，占6列，放在中间-->
<h1 class="text-center">用户注册</h1>
<form action="">
<p>用户名：<input type="text" class="form-control"></p>
<p>密码：<input type="text" class="form-control"></p>
<input type="submit">
</form>
</div>
</div>
</div>
</body>
</html>
2.5 按钮样式
[1] 概念
https://v3.bootcss.com/css/#buttons
为 <a>、<button> 或 <input type="button"> 元素添加按钮类（button class），即可使用 Bootstrap 提供的样式。
<button type="button" class="btn">基础按钮</button>
<a href="#" class="btn" role="button">链接按钮</a>
<input type="button" class="btn" value="输入按钮">
[2] 预定义样式
class="btn btn-default" 默认样式
class="btn btn-primary" 首选项
class="btn btn-success" 成功
class="btn btn-info" 一般信息
class="btn btn-warning" 警告
class="btn btn-danger" 危险
class="btn btn-link" 链接
[3] 大小
.btn-lg、.btn-sm、.btn-xs代表不同大小的按钮
[4] 块级按钮
给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
[5] 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3"> <!--左右两边留空，占6列，放在中间-->
<p>颜色组：</p>
<a href="" class="btn btn-default">默认样式</a>
<a href="" class="btn btn-primary">首选项</a>
<a href="" class="btn btn-success">成功</a>
<a href="" class="btn btn-info">一般信息</a>
<a href="" class="btn btn-warning">警告</a>
<a href="" class="btn btn-danger">危险</a>
<a href="" class="btn btn-link">链接</a>
<p>大小组：</p>
<button type="button" class="btn btn-lg">大按钮</button>
<button type="button" class="btn btn-sm">小按钮</button>
<button type="button" class="btn btn-xs">超小按钮</button>
<button type="button" class="btn btn-primary">（默认尺寸）</button>
<button type="button" class="btn btn-default">（默认尺寸）</button>
<p>按钮变为块级元素：</p>
<button type="button" class="btn btn-block">看似按钮，实则块级元素</button>
</div>
</div>
</div>
</body>
</html>
3. 图片形状
通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
4. 组件
4.1 图标
https://v3.bootcss.com/components/
不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>帅年轻有为<span class="glyphicon glyphicon-asterisk"></span></h1>
<h1>Canada<span class="glyphicon glyphicon-euro"></span></h1>
</div>
</div>
</div>
</body>
</html>
更多图标：https://fontawesome.com.cn
浙公网安备 33010602011771号