前端学习-Bootstrap
一、 什么是Bootstrap
Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。
参考地址:
官网： https://getbootstrap.com/
中文网: https://www.bootcss.com/
菜鸟教程: https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
二、Bootstrap环境搭建
2.1 引入资源文件
- jQuery的资源文件：https://jquery.com/
- Bootstrap的资源文件
- 下载的资料包中有很多文件：https://v4.bootcss.com/docs/getting-started/contents/，这里说明了每种文件包含的内容有哪些，根据不同的情况，选择引入不同的文件
2.2 书写页面基础结构
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap的布局title>
<link rel="stylesheet" href="./lib/bootstrap-4.5.0-dist/css/bootstrap.min.css" />
head>
<body>
<script type="text/javascript" src="./lib/jquery-3.5.1/jquery-3.5.1.min.js">script>
<script type="text/javascript" src="./lib/bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js">script>
body>
html>
三、 Bootstrap的布局
参考链接：https://v4.bootcss.com/docs/layout/grid/
3.1 布局容器
在使用栅格系统时，容器是必需的
| 容器类样式名 | 特小 <576px | 小屏幕≥576px | 中等屏幕 ≥768px | 大屏幕≥992px | 特大 ≥1200px |
|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
说明
100%表示宽度充满整个页面，否则宽度为指定的宽度，左右两侧留有等距的间距
示例
<style type="text/css">
div[class^="container"] {
background-color: #bdfff3;
height: 100px;
margin-bottom: 20px;
}
style>
...
<div class="container">div>
<div class="container-sm">div>
<div class="container-md">div>
<div class="container-lg">div>
<div class="container-xl">div>
<div class="container-fluid">div>
3.2 栅格系统
- 每一行都会分为12列，本身是将容器分为12列。
row：表明当前的元素占满一行。col：表明当前元素占几列。- col-数字：数字表明当前元素在一行中占几列，如果没有数字，默认会平分一行的空间。
- col-后面的数字，在一行中相加最多12，超过的会换到下一行。
3.2.1 Equal-width：等宽
<style type="text/css">
div[class^="col"] {
background-color: #bdfff3;
height: 50px;
border: 1px solid #4ac29a;
color: #27785e;
}
style>
...
<div class="container">
<div class="row">
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
<div class="row">
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
div>
3.2.2 Setting one column width：指定列的宽度
...
<div class="container">
<div class="row">
<div class="col">内容div>
<div class="col-7">内容div>
<div class="col">内容div>
div>
<div class="row">
<div class="col">内容div>
<div class="col-4">内容div>
<div class="col-4">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
div>
3.2.3 Variable width conten：可变宽度
使用auto，可以是当前列，根据内容宽度来调整列的大小
...
<div class="container">
<div class="row">
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
<div class="row">
<div class="col">内容div>
<div class="col">内容div>
<div class="col-auto">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
div>
3.2.4 Responsive classes：响应式宽度
响应式的尺寸：sm , md , lg, xl
...
<div class="container">
<div class="row">
<div class="col">内容div>
<div class="col-sm-7">内容div>
<div class="col">内容div>
div>
<div class="row">
<div class="col">内容div>
<div class="col-md-4">内容div>
<div class="col-md-auto">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
div>
3.2.5 Mix and match：多个响应式宽度
一列上可以设置多个响应式宽度，以便适应在不同的媒体下，页面布局方式不同
<div class="container">
<div class="row">
<div class="col">内容div>
<div class="col-sm-7 col-md-auto">内容div>
<div class="col">内容div>
div>
<div class="row">
<div class="col">内容div>
<div class="col-md-4 col-lg-8">内容div>
<div class="col-md-auto">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
div>
3.2.6 Row columns：行列类
使用row-cols-*快速构建列数(最大为6)
注意：只能用等宽模式，不能使用指定列宽度
<div class="container">
<div class="row row-cols-3">
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
div>
3.2.7 No gutters：没有间距
使用no-gutters可以去掉每列中的内间距
<div class="container">
<div class="row no-gutters">
<div class="col">内容div>
<div class="col-sm-7 col-md-auto">内容div>
<div class="col">内容div>
div>
<div class="row">
<div class="col">内容div>
<div class="col-md-4 col-lg-8">内容div>
<div class="col-md-auto">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
div>
3.2.8 Offsetting columns：列偏移
- 使用
offset-{...}-*可以设置偏移的距离 - 因为存在多个响应式的形式，因此可能需要重置偏移量，输入
offset-{...}-0即可
<div class="container">
<div class="row no-gutters">
<div class="col">内容div>
<div class="offset-1 col-sm-3 col-md-auto">内容div>
<div class="col">内容div>
div>
<div class="row">
<div class="col">内容div>
<div class="offset-md-2 col-md-4 offset-lg-0 col-lg-8">内容div>
<div class="col-md-auto">内容div>
<div class="col">内容div>
<div class="col">内容div>
div>
div>
3.2.9 Margin utilities：距离美
使用mr-auto、ml-auto、mr-{...}-auto、ml-{...}-auto可以让两个相邻的列产生距离
<div class="container">
<div class="row row-cols-3">
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
<div class="col">内容div>
<div class="col ml-auto">内容div>
div>
div>
3.2.10 Nesting ：嵌套栅格
<div class="container">
<div class="row row-cols-3">
<div class="col">内容div>
<div class="col">
<div class="row">
<div class="col-3">嵌套内容div>
<div class="col-3">嵌套内容div>
div>
div>
<div class="col">内容div>
<div class="col">内容div>
<div class="col ml-auto">内容div>
div>
div>
四、 Bootstrap工具类
4.1 flex布局
参考链接: https://v4.bootcss.com/docs/utilities/flex/
其在原本flex布局的基础上，添加了响应式的模式，可以在不同的媒体上，展现不同的flex布局
案例模板：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>工具类-flex布局title>
<link rel="stylesheet" href="./lib/bootstrap-4.5.0-dist/css/bootstrap.min.css" />
<style type="text/css">
.box{
border: 1px solid red;
}
.box div{
width: 50px;
height: 50px;
background-color: #ffad39;
text-align: center;
border: 1px solid #a84200;
margin: 1px;
}
style>
head>
<body>
<div class="container">
<div class="box">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>
<div>6div>
<div>7div>
<div>8div>
<div>9div>
<div>10div>
<div>11div>
div>
div>
<script type="text/javascript" src="./lib/jquery-3.5.1/jquery-3.5.1.min.js">script>
<script type="text/javascript" src="./lib/bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js">script>
body>
html>
4.1.1 启用弹性行为
使用
d-flex将元素转为flex布局使用
d-inline-flex将元素转为inline-flex布局（行弹性布局元素：行级元素，但是具有弹性布局的特性，其内部的元素同样的会转为块级元素）使用
d-{...}-flex、d-{...}-inline-flex来设置响应的弹性布局
4.1.2 方向
使用
flex-row（默认值），设置主轴为水平方向，从左至右排布使用
flex-row-reverse，设置主轴为水平方向，从右至左排布使用
flex-column，设置主轴为垂直方向，从上至下排布使用
flex-column-reverse，设置主轴为垂直方向，从下至上排布同样可以使用
flex-{...}-row等等响应的形式
4.1.3 主轴排版方式
使用
justify-content-start（默认值），设置内容沿主轴起始点开始使用
justify-content-end，设置内容沿主轴结束点开始使用
justify-content-center，设置内容处于主轴中心点使用
justify-content-between，设置内容在主轴上两端对齐，元素等距使用
justify-content-around，设置内容在主轴上等距并且元素距离两边存在间隔同样可以使用
justify-content-{...}-start等等响应的形式
4.1.4 交叉轴排列方式
使用
align-items-stretch（默认值），设置内容充满交叉轴使用
align-items-start，设置内容沿交叉轴起始点开始使用
align-items-end，设置内容沿交叉轴结束点开始使用
align-items-center，设置内容处于交叉轴中心点同样可以使用
align-items-{...}-start等等响应的形式
4.1.5 子项调整
使用
align-self-stretch（默认值）,单独设置一个子项内容充满整个交叉轴使用
align-self-start，单独设置一个子项内容处于交叉轴起始点使用
align-self-end，单独设置一个子项内容处于交叉轴结束点使用
align-self-center，单独设置一个子项内容处于交叉轴中心点同样可以使用
align-selft-{...}-start等等响应的形式
...
.box div:nth-of-type(2){
height: 100px;
}
.box div:nth-of-type(4){
height: 120px;
}
.box div:nth-of-type(6){
height: 70px;
}
4.1.6 充满
使用
flex-fill，可以将元素强制占满剩余的主轴空间，如果同级中存在多个，那么各自按照比例划分剩余主轴空间同样可以使用
flex-{...}-fill等等响应的形式
4.1.7 成长与收缩
使用
flex-grow-1可以将元素强制占满剩余的主轴空间（效果与flex-fill一样），如果同级存在多个（包括flex-fill），那么各自按照比例划分剩余主轴空间使用
flex-grow-0去除强制占领使用
给flex-grow-1额外添加w-100可以让同级中没有flex-shrink-0的元素强制换行，以获取更大的空间，可以使用flex-shrink-1让出空间同样可以使用
flex-{...}-{grow|shrink}-{0|1}响应的形式
4.1.8 换行处理方式
使用
flex-nowrap（默认值），设置内容即便超出了主轴区域，也不换行使用
flex-wrap，设置内容在超出主轴后，自动换行使用
flex-wrap-reverse，设置内容在超出主轴后，自动换行，但是行的顺序颠倒同样可以使用
flex-{...}-wrap等等响应的形式
4.1.9 多行处理方式
使用
align-content-stretch（默认值），设置多条主轴时，整体充满交叉轴使用
align-content-start，设置多条主轴时，整体处于交叉轴起始点使用
align-content-end，设置多条主轴时，整体处于交叉轴结束点使用
align-content-center，设置多条主轴时，整体处于交叉轴中心点使用
align-content-between，设置多条主轴时，整体在交叉轴上两端对齐使用
align-content-around，设置多条主轴时，整体处于交叉轴等距并且元素距离两边存在间隔
4.2 颜色
参考链接: https://v4.bootcss.com/docs/utilities/colors/
text-名称：设置文本颜色primary：主色调位蓝色secondary：次要颜色，偏灰色success：成功为绿色danger：危险为红色warning：警告为偏黄色info：提示信息，偏淡蓝色- light：亮白色
dark：偏黑色body：偏黑色，比dark更黑muted：偏亮灰色- white：白色
black-50：黑色半透明- white-50：白色半透明
bg-名称：设置背景颜色- primary：主色调位蓝色
- secondary：次要颜色，偏灰色
- success：成功为绿色
- danger：危险为红色
- warning：警告为偏黄色
- info：提示信息，偏淡蓝色
- light：亮白色
- dark：偏黑色
- white：白色
- transparent：透明
示例
<p class="text-white bg-primary">.text-primaryp>
<p class="text-secondary">.text-secondaryp>
<p class="text-success">.text-successp>
<p class="text-danger">.text-dangerp>
<p class="text-warning">.text-warningp>
<p class="text-info">.text-infop>
<p class="text-light bg-dark">.text-lightp>
<p class="text-dark">.text-darkp>
<p class="text-body">.text-bodyp>
<p class="text-muted">.text-mutedp>
<p class="text-white bg-dark">.text-whitep>
<p class="text-black-50">.text-black-50p>
<p class="text-white-50 bg-dark">.text-white-50p>
4.3 间距
参考链接: https://v4.bootcss.com/docs/utilities/spacing/
- 属性：
m：对应marginp：对应padding
- 边：
t、b、l、r：分别对应 top、bottom、left、right。x：对应 left 和 right。y：对应 top 和 bottom。- 如果是空白，那么代表同时设置四个边
- 尺寸：（$spacer默认值为1rem）
- 0代表：margin或者padding距离为0
- 1代表： margin或者padding距离为$spacer * .25
- 2代表： margin或者padding距离为$spacer * .5
- 3代表： margin或者padding距离为$spacer
- 4代表： margin或者padding距离为$spacer * 1.5
- 5代表： margin或者padding距离为$spacer * 3
- auto代表：margin自动
示例
<div class="container">
<nav>
<a href="#" class="d-inline-block text-muted py-4 mx-4">首页a>
<a href="#" class="d-inline-block text-muted py-4 mx-4">歌单a>
<a href="#" class="d-inline-block text-muted py-4 mx-4">歌手a>
<a href="#" class="d-inline-block text-muted py-4 mx-4">VIPa>
<a href="#" class="d-inline-block text-muted py-4 mx-4">音乐盒a>
<a href="#" class="d-inline-block text-muted py-4 mx-4">客户端a>
nav>
div>
4.4 文本对齐
参考链接： https://v4.bootcss.com/docs/utilities/text/
text-centertext-lefttext-righttext-justify- 左中右对齐还有响应的样式，例如
text-xl-center
演示
<p class="bg-primary text-light text-center py-2">大家好，我就是我p>
五、 Bootstrap页面内容
5.1 表格内容
参考页: https://v4.bootcss.com/docs/content/tables/
5.1.1 表格主题
table：亮色主题
table-dark：暗色调主题（不常用）
table-其他颜色：其它与背景颜色一样的颜色（不常用）
5.1.2 表格头部样式
仅在表格主题为亮色色生效
thead-light：浅灰色表头
thead-dark：深灰色表头
5.1.3 表格风格样式
table-bordered：表格带有边框table-hover：鼠标在表格上移动时，经过的表格行会有交互效果。table-striped：斑马线效果，实际上是隔行变色。
5.1.4 响应式表格
table-responsive：在所有视口都执行响应性table-responsive-{...}：在指定的视口范围，执行响应性
5.1.4 示例
<table class="table table-striped table-bordered table-responsive-sm table-hover w-100">
<thead class="thead-dark">
<tr>
<th>学号th>
<th>姓名th>
<th>语文th>
<th>数学th>
<th>英语th>
<th>自然th>
<th>社会th>
<th>总分th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>诸葛亮td>
<td>101td>
<td>97td>
<td>50td>
<td>169td>
<td>75td>
<td>492td>
tr>
<tr>
<td>2td>
<td>曹操td>
<td>117td>
<td>103td>
<td>89td>
<td>166td>
<td>84td>
<td>559td>
tr>
<tr>
<td>3td>
<td>刘备td>
<td>118td>
<td>121td>
<td>90td>
<td>146td>
<td>89td>
<td>564td>
tr>
<tr>
<td>4td>
<td>不知火舞td>
<td>111td>
<td>108td>
<td>94td>
<td>180td>
<td>79td>
<td>572td>
tr>
<tr>
<td>5td>
<td>东皇太一td>
<td>108td>
<td>114td>
<td>81td>
<td>160td>
<td>93td>
<td>556td>
tr>
<tr>
<td>6td>
<td>李白td>
<td>116td>
<td>95td>
<td>92td>
<td>163td>
<td>87td>
<td>556td>
tr>
tbody>
table>
5.2 图片内容
参考链接: https://v4.bootcss.com/docs/content/images/
- img-fluid ， 图片撑满容器
- img-thumbnail , 简单修饰图片，有1px的外边框。可以在后续实现圆角等操作
示例
<img src="./img/bg-change.jpg" class="img-fluid img-thumbnail" alt />
六、 Bootstrap组件
6.1 导航条组件
参考链接: https://v4.bootcss.com/docs/components/navbar/
navbar：主样式navbar-expand-lg：在大尺寸的屏幕上展开横向菜单。navbar-brand：设置导航条第一个位置的品牌图标或者LOGO。navbar-collapse：用来包裹横向菜单，方便设置展开和隐藏。navbar-nav：用来设置导航条的横向菜单。
示例
<html>
<head>
<meta charset="utf-8">
<title>演示导航条的使用title>
<link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css" />
head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light" >
<a class="navbar-brand" href="javascript:;">首页a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navtoggler"
aria-controls="navtoggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">span>
button>
<div class="collapse navbar-collapse" id="navtoggler">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="">主要产品a>li>
<li class="nav-item"><a class="nav-link" href="">公司介绍a>li>
ul>
div>
nav>
<script src="../lib/jquery/jquery-3.4.1.js">script>
<script src="../lib/bootstrap/js/bootstrap.js">script>
body>
html>
6.2 面包屑导航组件
参考链接：https://v4.bootcss.com/docs/components/breadcrumb/
通常用于界面主内容区域的二级导航
breadcrumb：导航栏breadcrumb-item：导航项active：用于表示该项激活（表现出的效果是，文本为灰色）
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">所有商品a>li>
<li class="breadcrumb-item"><a href="#">笔记本电脑a>li>
<li class="breadcrumb-item active" aria-current="page">ASUS华硕li>
ol>
nav>
6.3 卡片组件
参考链接： https://v4.bootcss.com/docs/components/card/
card：主样式card-header：卡片的标题栏card-body：卡片的主体内容card-footer：卡片底部的提示信息card-title：卡片主标题card-subtitle：卡片副标题card-link：卡片连接
示例：https://vans.com.cn/
<div class="container">
<div class="card">
<img src="./img/shop.jpg" class="card-img-top" alt />
<div class="card-body">
<h3 class="card-title">VANS SKATEBOARDINGh3>
<h5 class="card-subtitle">呈现 ALRIGHT, OKh5>
div>
<div class="card-footer">
<a href="#" class="card-link stretched-link">由著名制片人 Greg Hunt 执导a>
div>
div>
<div class="card my-3">
<div class="card-header">VANS SKATEBOARDINGdiv>
<div class="card-body">
<img src="./img/shop.jpg" class="card-img-top" alt />
<h3 class="card-title">VANS SKATEBOARDINGh3>
<h5 class="card-subtitle">呈现 ALRIGHT, OKh5>
<a href="#" class="card-link">由著名制片人 Greg Hunt 执导a>
div>
div>
div>
6.4 表单组件
参考链接：https://v4.bootcss.com/docs/components/forms/
6.4.1 基本样式
form-group：每个label和input需要包含在一组中form-control：设置表单相关控件的样式；其中文本框需要使用form-control-file样式
<div class="container">
<form>
<div class="form-group">
<label for="email">邮箱地址label>
<input
type="text"
class="form-control"
placeholder="[email protected]"
id="email"
/>
<span class="form-text text-muted">我们绝不会与其他任何人共享您的电子邮件span>
div>
<div class="form-group">
<label for="love">您的喜好label>
<select class="form-control" id="love">
<option>唱option>
<option>跳option>
<option>RAPoption>
<option>篮球option>
select>
div>
<div class="form-group">
<label for="advice">您的建议label>
<textarea
class="form-control"
id="advice"
placeholder="输入您对我们的一些建议"
>textarea>
div>
form>
div>
6.4.2 复选框与单选框
form-check：复选框或单选框组合基本样式form-check-input：复选框或单选框排版样式form-check-label：指示文本排版样式form-check-inline：复选框或单选框组合由block调整为flex-inline
<div class="form-group">
<label>您的喜好label>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" name="love1" type="checkbox" value="1" />
<span>唱span>
label>
div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" name="love1" type="checkbox" value="2" />
<span>跳span>
label>
div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" name="love2" type="radio" value="3" />
<span>RAPspan>
label>
div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" name="love2" type="radio" value="4" />
<span>篮球span>
label>
div>
div>
6.4.3 表单网格
form-row：设定表单网格布局btn-颜色名称：设置实心按钮的颜色；btn-outline-颜色名称：设置空心（边线）按钮的颜色
<form>
<div class="form-row">
<div class="form-group col">
<label for="email">邮箱地址label>
<input
type="text"
class="form-control"
placeholder="[email protected]"
id="email"
/>
<span class="form-text text-muted">我们绝不会与其他任何人共享您的电子邮件span>
div>
<div class="form-group col">
<label for="pwd">密码label>
<input
type="password"
class="form-control"
placeholder="请输入密码"
id="pwd"
/>
div>
div>
form>
6.4.4 内联表单
form-inline：可以将表单内容排列在一条水平线上
<form class="form-inline">
<div class="form-group">
<label class="mr-2" for="email">邮箱地址label>
<input
type="text"
class="form-control"
placeholder="[email protected]"
id="email"
/>
div>
<div class="form-group mx-2">
<label class="mr-2" for="pwd">密码label>
<input
type="password"
class="form-control"
placeholder="请输入密码"
id="pwd"
/>
div>
form>
6.5 按钮组件
参考链接：https://v4.bootcss.com/docs/components/buttons/
btn：按钮的主样式btn-颜色名称：设置实心按钮的颜色；btn-outline-颜色名称：设置空心（边线）按钮的颜色btn-sm：设置按钮为小按钮；btn-lg设置按钮为大按钮btn-block：设置按钮变为块级元素，独占一行active：设置后，按钮变现为激活样式disabled：设置后，按钮表现为禁用样式
示例
<form class="form-inline">
<div class="form-group">
<label class="mr-2" for="email">邮箱地址label>
<input
type="text"
class="form-control"
placeholder="[email protected]"
id="email"
/>
div>
<div class="form-group mx-2">
<label class="mr-2" for="pwd">密码label>
<input
type="password"
class="form-control"
placeholder="请输入密码"
id="pwd"
/>
div>
<span class="btn btn-primary mr-2">登录span>
<span class="btn btn-outline-info">重置span>
form>
6.6 输入框组
参考链接: https://v4.bootcss.com/docs/components/input-group/
input-group：输入框组的主样式input-group-prepend：输入框前面的内容input-group-append：输入框后面的内容input-group-text：输入框组追加的文本样式
<div class="container">
<form>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">邮箱地址span>
div>
<input type="text" class="form-control" placeholder="[email protected]" />
<div class="input-group-append">
<span class="input-group-text">@example.comspan>
div>
div>
form>
div>
6.7 模态框组件
参考链接:https://v4.bootcss.com/docs/components/modal/
- modal 表示模态框内容开始
- modal-dialog 表示当前是一个对话框
- modal-content 整个模态框的包括内容
- modal-header 标题
- modal-body 显示内容
- modal-footer 按钮或者提示区域
- modal-title 模态框标题
6.7.1 静态模态框
- 静态模态框的意思是：内容已经定死，并且整个结构已经提前书写到了HTML中，等待显示
- 如果希望点击某个元素，打开某个模态框，需要给该元素添加
data-toggle="modal"同时还需要添加data-target="模态框的选择器"(这里可以不用是id，只要是选择器能够选中对应的模态框即可)
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="mr-2" for="email">邮箱地址label>
<input
type="text"
class="form-control"
placeholder="[email protected]"
id="email"
/>
div>
<div class="form-group mx-2">
<label class="mr-2" for="pwd">密码label>
<input
type="password"
class="form-control"
placeholder="请输入密码"
id="pwd"
/>
div>
<span class="btn btn-primary mr-2" data-toggle="modal" data-target=".static-modal">登录span>
<span class="btn btn-outline-info">重置span>
form>
<div class="modal fade static-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">登录操作提示h5>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×span>
button>
div>
<div class="modal-body">
<p class="text-success">账号密码输入正确，登录成功！p>
div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭button>
<button type="button" class="btn btn-primary">确定button>
div>
div>
div>
div>
div>
6.7.2 静态背景
- 模态框默认点击阴影是可以关闭的，我们可以给模态框添加
data-backdrop="static"，使其禁用
...
<div class="modal fade static-modal" data-backdrop="static" tabindex="-1" role="dialog">
...
div>
6.7.3 长内容模态框
- 当模态框内容过长时，其滚动时为单独的滚动，而不会造成页面滚动
- 我们可以给模态框添加
modal-dialog-scrollable启动滚动模式，这样滚动条就不再是页面，而是模态框中了
...
<div class="modal fade static-modal" data-backdrop="static" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">登录操作提示h5>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×span>
button>
div>
<div class="modal-body">
<p>协议，网络协议的简称，网络协议是通信计算机双方必须共同遵从的一组约定。如怎么样建立连接、怎么样互相识别等。只有遵守这个约定，计算机之间才能相互通信交流。它的三要素是：语法、语义、时序。p>
<p>为了使数据在网络上从源到达目的，网络通信的参与方必须遵循相同的规则，这套规则称为协议（protocol），它最终体现为在网络上传输的数据包的格式。p>
<p>协议往往分成几个层次进行定义，分层定义是为了使某一层协议的改变不影响其他层次的协议。p>
<p>1969年12月，美国国防部高级计划研究署的分组交换网ARPANET投入运行，从此计算机网络发展进入新纪元。ARPANET当时仅有4个结点，分别在美国国防部、原子能委员会、麻省理工学院和加利福利亚。这4台计算机之间进行数据通信仅有传送数据的通路是不够的，还必须遵守一些事先约定好的规则，由这些规则明确所交换数据的格式及有关同步问题。人与人之间交谈需要使用同一种语言，如果语言不同则需要翻译，否则两人之间无法沟通。计算机之间的通信过程和人与人之间的交谈过程非常相似，前者由计算机控制，后者由参加交谈的人控制。p>
<p>计算机通信网是由许多具有信息交换和处理能力的节点互连而成的。要使整个网络有条不紊地工作, 就要求每个节点必须遵守一些事先约定好的有关数据格式及时序等的规则。 这些为实现网络数据交换而建立的规则、约定或标准就称为网络协议。协议是通信双方为了实现通信而设计的约定或通话规则。p>
<p>协议总是指某一层的协议。准确地说，它是在同等层之间的实体通信时，有关通信规则和约定的集合就是该层协议，例如物理层协议、传输层协议、应用层协议。p>
<p>网络协议，也可简称协议，通常由三要素组成：p>
<p>(1)语法：即数据与控制信息的结构或格式；p>
<p>(2)语义：即需要发出何种控制信息，完成何种动作以及做出何种响应；p>
<p>(3)时序（同步），即事件实现顺序的详细说明。p>
div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭button>
<button type="button" class="btn btn-primary">确定button>
div>
div>
div>
div>
6.7.4 模态框垂直居中
- 我们可以使用
modal-dialog-centered设置模态框居中显示
<div class="modal fade static-modal" data-backdrop="static" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
...
div>
div>