Bootstrap 4（上）
Bootstrap 4
Bootstrap4 是什么？
Bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的WEB项目。Bootstrap4目前是Bootstrap的最新版本，是一套用于HTML、CSS和JS开发的开源工具集。利用我们提供的Sass变量和大量mixin、响应式栅格系统、可扩展的预制组件、基于jQuery的强大的插件系统，能够快速为你的想法开发出原型或者构建整个app。- 在学习之前，您必须具备
HTML、CSS和JavaScript的基础知识。如果您还不了解这些概念，那么建议您先阅读我们的这些教程:HTML教程CSS教程JavaScript教程
Bootstrap4 安装使用
注意引入js的时候，jquery.js必须放在bootstrap.js前面https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.js或者https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js
网格系统
Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。- 我们也可以根据自己的需要，定义列数
网格类
-
Bootstrap 4网格系统有以下 5 个类:-
.col-针对所有设备DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" /><style>.row > div {border: 1px solid red;height: 100px;}style>head><body><div class="container"><div class="row"><div class="col-1">1div><div class="col-1">2div><div class="col-1">3div><div class="col-1">4div><div class="col-1">5div><div class="col-1">6div><div class="col-1">7div><div class="col-1">8div><div class="col-1">9div><div class="col-1">10div><div class="col-1">11div><div class="col-1">12div>div><div class="row"><div class="col-4">1div><div class="col-4">2div><div class="col-4">3div>div><div class="row"><div class="col-6">1div><div class="col-6">2div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
.col-sm-平板 - 屏幕宽度等于或大于 576pxDOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" /><style>.row > div {border: 1px solid red;height: 100px;}style>head><body><div class="container"><div class="row"><div class="col-sm-1">1div><div class="col-sm-1">2div><div class="col-sm-1">3div><div class="col-sm-1">4div><div class="col-sm-1">5div><div class="col-sm-1">6div><div class="col-sm-1">7div><div class="col-sm-1">8div><div class="col-sm-1">9div><div class="col-sm-1">10div><div class="col-sm-1">11div><div class="col-sm-1">12div>div><div class="row"><div class="col-sm-4">1div><div class="col-sm-4">2div><div class="col-sm-4">3div>div><div class="row"><div class="col-sm-6">1div><div class="col-sm-6">2div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
.col-md-桌面显示器 - 屏幕宽度等于或大于 768px -
.col-lg-大桌面显示器 - 屏幕宽度等于或大于 992px -
.col-xl-超大桌面显示器 - 屏幕宽度等于或大于 1200px
-
网格系统规则
- 网格每一行需要放在设置了
.container(固定宽度) 或.container-fluid(全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。 - 使用行来创建水平的列组。
- 内容需要放置在列中，并且只有列可以是行的直接子节点。
- 预定义的类如
.row和.col-sm-4可用于快速制作网格布局。 - 列通过填充创建列内容之间的间隙。 这个间隙是通过
.rows类上的负边距设置第一行和最后一列的偏移。 - 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个
.col-sm-4来设置。 Bootstrap 3和Bootstrap 4最大的区别在于Bootstrap 4现在使用flexbox（弹性盒子） 而不是浮动。Flexbox的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
网格的基本结构
-
第一个例子：创建一行(
)。然后， 添加需要的列(.col-*-*类中设置)。 第一个星号 (*) 表示响应的设备:sm,md,lg或xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为12。DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" /><style>.row > div {border: 1px solid red;height: 50px;}style>head><body><div class="container"><div class="row"><div class="col-sm-12">col-sm-12div>div><div class="row"><div class="col-md-4">col-md-4div><div class="col-md-4">col-md-4div><div class="col-md-4">col-md-4div>div><div class="row"><div class="col-lg-6">col-lg-6div><div class="col-lg-6">col-lg-6div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
第二个例子: 不在每个
col上添加数字，让bootstrap自动处理布局DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" /><style>.row > div {border: 1px solid red;height: 50px;}style>head><body><div class="container"><div class="row"><div class="col">coldiv><div class="col">coldiv><div class="col">coldiv>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
同一行的每个列宽度相等： 两个 “
col” ，每个就为50%的宽度。三个"col"每个就为33.33%的宽度，四个"col"每个就为25%的宽度，以此类推。同样，你可以使用.col-sm|md|lg|xl 来设置列的响应规则。
等宽列，自动布局
-
创建相等宽度的列，
Bootstrap自动布局<body><div class="container"><div class="row"><div class="col">coldiv><div class="col">coldiv><div class="col">coldiv>div>div>body>
等宽响应式列
-
在平板及更大屏幕上创建等宽度的响应式列。
-
在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:
<body><div class="container"><div class="row"><div class="col-sm-3">col-sm-3div><div class="col-sm-3">col-sm-3div><div class="col-sm-3">col-sm-3div><div class="col-sm-3">col-sm-3div>div>div>body>
不等宽响应式列
-
在平板及更大屏幕上创建不等宽度的响应式列。
-
在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:
<body><div class="container"><div class="row"><div class="col-sm-4">col-sm-4div><div class="col-sm-8">col-sm-8div>div>div>body>
平板和桌面端
-
在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。
<body><div class="container"><div class="row"><div class="col-sm-3 col-md-6"><p>click369.comp>div><div class="col-sm-9 col-md-6"><p>网星软件p>div>div>div>body>
平板、桌面、大桌面显示器、超大桌面显示器
-
在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。
<body><div class="container"><div class="row"><div class="col-sm-3 col-md-6 col-lg-4 col-xl-2"><p>click369.comp>div><div class="col-sm-9 col-md-6 col-lg-8 col-xl-10"><p>网星软件p>div>div>div>body>
偏移列
-
偏移列通过
offset-*-*类来设置。第一个星号(*)可以是sm、md、lg、xl，表示屏幕设备类型，第二个星号(*)可以是1到11的数字。 -
为了在大屏幕显示器上使用偏移，请使用
.offset-md-*类。这些类会把一个列的左外边距（margin）增加*列，其中 * 范围是从1到11。 -
例如：
.offset-md-4是把.col-md-4往右移了四列格。DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" /><style>.row {margin-top: 30px;}.row > div {border: 1px solid red;height: 50px;}style>head><body><div class="container"><div class="row"><div class="col-md-3">col-md-3div><div class="col-md-3 offset-md-3">col-md-3div><div class="col-md-3">col-md-3div>div><div class="row"><div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div><div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div>div><div class="row"><div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
文字排版
Bootstrap 4默认的font-size为16px,line-height为1.5。- 默认的
font-family为"Helvetica Neue", Helvetica, Arial, sans-serif。 - 此外，所有的
元素margin-top: 0、margin-bottom: 1rem (16px)
-
-
-
Bootstrap中定义了所有的 HTML 标题（h1到h6）的样式DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><div class="container"><h1>h1 Bootstrap 标题 (2.5rem = 40px)h1><h2>h2 Bootstrap 标题 (2rem = 32px)h2><h3>h3 Bootstrap 标题 (1.75rem = 28px)h3><h4>h4 Bootstrap 标题 (1.5rem = 24px)h4><h5>h5 Bootstrap 标题 (1.25rem = 20px)h5><h6>h6 Bootstrap 标题 (1rem = 16px)h6>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
display 标题类
-
Bootstrap还提供了四个Display类来控制标题的样式:.display-1,.display-2,.display-3,.display-4DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h1>Display 标题h1><p>Display 标题可以输出更大更粗的字体样式。p><h1 class="display-1">Display 1h1><h1 class="display-2">Display 2h1><h1 class="display-3">Display 3h1><h1 class="display-4">Display 4h1>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
在
Bootstrap 4中 HTML元素用于创建字号更小的颜色更浅的文本DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h1>更小文本标题h1><p>small 元素用于字号更小的颜色更浅的文本:p><h1>h1 标题 <small>副标题small>h1><h2>h2 标题 <small>副标题small>h2><h3>h3 标题 <small>副标题small>h3><h4>h4 标题 <small>副标题small>h4><h5>h5 标题 <small>副标题small>h5><h6>h6 标题 <small>副标题small>h6>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
Bootstrap 4定义 HTML元素的样式如下:DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h1>Multiple Code Linesh1><p>For multiple lines of code, use the pre element:p><pre>Text in a pre elementis displayed in a fixed-widthfont, and it preservesboth spaces andline breaks.pre>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
更多排版类（一）
-
Bootstrap4更多排版类的实例：.font-weight-bold加粗文本.font-weight-normal普通文本.font-weight-light更细的文本.font-italic斜体文本.lead让段落更突出.small指定更小文本 (为父元素的 85% ).text-left左对齐.text-center居中.text-right右对齐
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><p class="font-weight-bold">加粗文本p><p class="font-weight-normal">普通文本p><p class="font-weight-light">更细的文本p><p class="font-italic">斜体文字p><p class="lead">让段落更加突出p><p class="small">指定更小文本p><p class="text-left">左对齐p><p class="text-center">居中p><p class="text-right">右对齐p>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
更多排版类（二）
-
.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行 -
.text-nowrap段落中超出屏幕部分不换行 -
.text-lowercase设定文本小写 -
.text-uppercase设定文本大写 -
.text-capitalize设定单词首字母大写 -
.list-unstyled移除默认的列表样式，列表项中左对齐 ( -
.list-inline将所有列表项放置同一行,结合.list-inline-item一起使用 -
.pre-scrollable使元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条Document 设定文本对齐,段落中超出屏幕部分文字自动换行
段落中超出屏幕部分不换行
ABCDEFG
abcdefg
list
- 张三
- 李四
- 王五
- 张三
- 李四
- 王五
hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world
文本颜色
-
Bootstrap 4 提供了一些有代表意义的颜色类：
.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger,.text-secondary,.text-white,.text-darkand.text-light -
在链接中使用也可以使用
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h2>代表指定意义的文本颜色h2><p class="text-muted">柔和的文本。p><p class="text-primary">重要的文本。p><p class="text-success">执行成功的文本。p><p class="text-info">代表一些提示信息的文本。p><p class="text-warning">警告文本。p><p class="text-danger">危险操作文本。p><p class="text-secondary">副标题。p><p class="text-dark">深灰色文字。p><p class="text-light">浅灰色文本（白色背景上看不清楚）。p><p class="text-white">白色文本（白色背景上看不清楚）。p>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
背景颜色
-
提供背景颜色的类有:
.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark和.bg-light。 -
注意:背景颜色不会设置文本的颜色，在一些实例中你需要与
.text-*类一起使用。DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h2>背景颜色h2><p class="bg-primary text-white">重要的背景颜色。p><p class="bg-success text-white">执行成功背景颜色。p><p class="bg-info text-white">信息提示背景颜色。p><p class="bg-warning text-white">警告背景颜色p><p class="bg-danger text-white">危险背景颜色。p><p class="bg-secondary text-white">副标题背景颜色。p><p class="bg-dark text-white">深灰背景颜色。p><p class="bg-light text-dark">浅灰背景颜色。p>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
表格（一）
-
基础表格
.table类来设置基础表格的样式
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><table class="table"><tbody><tr><td>姓名td><td>语文td><td>数学td><td>英语td>tr><tr><td>张三td><td>88td><td>67td><td>95td>tr><tr><td>李四td><td>46td><td>83td><td>38td>tr>tbody>table>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
条纹表格
.table-striped类，内的行上添加条纹DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><table class="table table-striped"><tbody><tr><td>姓名td><td>语文td><td>数学td><td>英语td>tr><tr><td>张三td><td>88td><td>67td><td>95td>tr><tr><td>李四td><td>46td><td>83td><td>38td>tr><tr><td>王五td><td>43td><td>84td><td>58td>tr>tbody>table>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
带边框表格
.table-bordered类可以为表格添加边框
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><table class="table table-striped table-bordered"><tbody><tr><td>姓名td><td>语文td><td>数学td><td>英语td>tr><tr><td>张三td><td>88td><td>67td><td>95td>tr><tr><td>李四td><td>46td><td>83td><td>38td>tr><tr><td>王五td><td>43td><td>84td><td>58td>tr>tbody>table>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
鼠标悬停状态表格
.table-hover类可以为表格的每一行添加鼠标悬停效果（灰色背景）
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><table class="table table-striped table-bordered table-hover"><tbody><tr><td>姓名td><td>语文td><td>数学td><td>英语td>tr><tr><td>张三td><td>88td><td>67td><td>95td>tr><tr><td>李四td><td>46td><td>83td><td>38td>tr><tr><td>王五td><td>43td><td>84td><td>58td>tr>tbody>table>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
黑色背景表格
.table-dark类可以为表格添加黑色背景
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><table class="table table-striped table-bordered table-hover table-dark"><tbody><tr><td>姓名td><td>语文td><td>数学td><td>英语td>tr><tr><td>张三td><td>88td><td>67td><td>95td>tr><tr><td>李四td><td>46td><td>83td><td>38td>tr><tr><td>王五td><td>43td><td>84td><td>58td>tr>tbody>table>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
表格（二）
-
鼠标悬停效果 - 黑色背景表格
- 联合使用
.table-dark和.table-hover类可以设置黑色背景表格的鼠标悬停效果
- 联合使用
-
指定意义的颜色类
-
.table-primary蓝色: 指定这是一个重要的操作DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><table class="table table-primary"><tbody><tr><td>姓名td><td>语文td><td>数学td><td>英语td>tr><tr><td>张三td><td>88td><td>67td><td>95td>tr><tr><td>李四td><td>46td><td>83td><td>38td>tr><tr><td>王五td><td>43td><td>84td><td>58td>tr>tbody>table>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
.table-success绿色: 指定这是一个允许执行的操作DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><table class="table table-success"><tbody><tr><td>姓名td><td>语文td><td>数学td><td>英语td>tr><tr><td>张三td><td>88td><td>67td><td>95td>tr><tr><td>李四td><td>46td><td>83td><td>38td>tr><tr><td>王五td><td>43td><td>84td><td>58td>tr>tbody>table>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
.table-danger红色: 指定这是可以危险的操作 -
.table-info浅蓝色: 表示内容已变更 -
.table-warning橘色: 表示需要注意的操作 -
.table-active灰色: 用于鼠标悬停效果 -
.table-secondary灰色: 表示内容不怎么重要 -
.table-light浅灰色，可以是表格行的背景 -
.table-dark深灰色，可以是表格行的背景
-
表格（三）
-
表头颜色
-
在
Bootstrap v4.0.0-beta.2中.thead-dark类用于给添加黑色背景，.thead-light类用于给表头添加灰色背景DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><table class="table table-success"><thead class="thead-dark"><tr><th>nameth><th>chineseth><th>mathth><th>englishth>tr>thead><tbody><tr><td>姓名td><td>语文td><td>数学td><td>英语td>tr><tr><td>张三td><td>88td><td>67td><td>95td>tr><tr><td>李四td><td>46td><td>83td><td>38td>tr><tr><td>王五td><td>43td><td>84td><td>58td>tr>tbody>table>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
在Bootstrap v4.0.0-beta 这个版本中，.thead-inverse类用于给表头添加黑色背景，.thead-default类用于给表头添加灰色背景。较小的表格
.table-sm类用于通过减少内边距来设置较小的表格
响应式表格
.table-responsive类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）
通过以下类设定在指定屏幕宽度下显示滚动条
.table-responsive-sm < 576px.table-responsive-md < 768px.table-responsive-lg < 992px.table-responsive-xl < 1200px
图像形状
-
圆角图片
.rounded
-
椭圆图片
.rounded-circle
-
缩略图
.img-thumbnail
-
图片对齐方式
.float-right和.float-left
-
响应式图片
- 图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应
- 通过在
.img-fluid类来设置响应式图片 .img-fluid类设置了max-width: 100%;、height: auto;
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" /><style>.container > img {height: 200px;width: 200px;}style>head><body><div class="container"><img class="rounded" src="./01.webp" alt="" /><img class="rounded-circle" src="./01.webp" alt="" /><img class="img-thumbnail" src="./01.webp" alt="" />div><div class="container"><img class="float-right" src="./01.webp" alt="" /><img class="float-left" src="./01.webp" alt="" />div><div style="width: 200px; height: 200px"><img class="img-fluid" src="./01.webp" alt="" />div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Jumbotron
-
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。 -
提示:
Jumbotron里头可以放一些HTML标签，也可以是Bootstrap的元素。<div class="jumbotron"><h1>网星软件h1><p>学的不仅是技术，更是梦想！！！p>div>
-
在
元素 中添加.jumbotron类来创建jumbotron<div class="jumbotron jumbotron-fluid"><div class="container"><h1>网星软件h1><p>学的不仅是技术，更是梦想！！！p>div>div>
信息提示框（一）
-
可以在
div中添加.alert类，通过.alert-*添加背景色DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h2>提示框h2><p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:p><div class="alert alert-success"><strong>成功!strong> 指定操作成功提示信息。div><div class="alert alert-info"><strong>信息!strong> 请注意这个信息。div><div class="alert alert-warning"><strong>警告!strong> 设置警告信息。div><div class="alert alert-danger"><strong>错误!strong> 失败的操作div><div class="alert alert-primary"><strong>首选!strong> 这是一个重要的操作信息。div><div class="alert alert-secondary"><strong>次要的!strong> 显示一些不重要的信息。div><div class="alert alert-dark"><strong>深灰色!strong> 深灰色提示框。div><div class="alert alert-light"><strong>浅灰色!strong>浅灰色提示框。div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
信息提示框（二）
-
关闭提示框
- 可以在提示框中的 div 中添加
.alert-dismissible类，然后在关闭按钮的链接上添加class="close"和data-dismiss="alert"类来设置提示框的关闭操作。 - 提示:
×(×) 是 HTML 实体字符，来表示关闭操作，而不是字母 “x”。
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h2>提示框h2><p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:p><div class="alert alert-success alert-dismissible"><button type="button" class="close" data-dismiss="alert">×button><strong>成功!strong> 指定操作成功提示信息。div><div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert">×button><strong>信息!strong> 请注意这个信息。div><div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert">×button><strong>警告!strong> 设置警告信息。div><div class="alert alert-danger alert-dismissible"><button type="button" class="close" data-dismiss="alert">×button><strong>错误!strong> 失败的操作div><div class="alert alert-primary alert-dismissible"><button type="button" class="close" data-dismiss="alert">×button><strong>首选!strong> 这是一个重要的操作信息。div><div class="alert alert-secondary alert-dismissible"><button type="button" class="close" data-dismiss="alert">×button><strong>次要的!strong> 显示一些不重要的信息。div><div class="alert alert-dark alert-dismissible"><button type="button" class="close" data-dismiss="alert">×button><strong>深灰色!strong> 深灰色提示框。div><div class="alert alert-light alert-dismissible"><button type="button" class="close" data-dismiss="alert">×button><strong>浅灰色!strong>浅灰色提示框。div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
- 可以在提示框中的 div 中添加
-
提示框动画
.fade和.show类用于设置提示框在关闭时的淡出和淡入效果（关闭时有个过渡动画）：
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h2>提示框h2><p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:p><div class="alert alert-success alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×button><strong>成功!strong> 指定操作成功提示信息。div><div class="alert alert-info alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×button><strong>信息!strong> 请注意这个信息。div><div class="alert alert-warning alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×button><strong>警告!strong> 设置警告信息。div><div class="alert alert-danger alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×button><strong>错误!strong> 失败的操作div><div class="alert alert-primary alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×button><strong>首选!strong> 这是一个重要的操作信息。div><div class="alert alert-secondary alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×button><strong>次要的!strong> 显示一些不重要的信息。div><div class="alert alert-dark alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×button><strong>深灰色!strong> 深灰色提示框。div><div class="alert alert-light alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×button><strong>浅灰色!strong>浅灰色提示框。div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 按钮（一）
-
Bootstrap 4提供了不同样式的按钮。DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><button type="button" class="btn">基本按钮button><button type="button" class="btn btn-primary">主要按钮button><button type="button" class="btn btn-secondary">次要按钮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-dark">黑色button><button type="button" class="btn btn-light">浅色button><button type="button" class="btn btn-link">链接button>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><a href="#" class="btn btn-info" role="button">链接按钮a><button type="button" class="btn btn-info">按钮button><input type="button" class="btn btn-info" value="输入框按钮" /><input type="submit" class="btn btn-info" value="提交按钮" />body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 按钮（二）
-
按钮设置边框
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><button type="button" class="btn btn-outline-primary">主要按钮button><button type="button" class="btn btn-outline-secondary">次要按钮button><button type="button" class="btn btn-outline-success">成功button><button type="button" class="btn btn-outline-info">信息button><button type="button" class="btn btn-outline-warning">警告button><button type="button" class="btn btn-outline-danger">危险button><button type="button" class="btn btn-outline-dark">黑色button><button type="button" class="btn btn-outline-light text-dark">浅色button>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
不同大小的按钮
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><button type="button" class="btn btn-primary btn-lg">大号按钮button><button type="button" class="btn btn-primary">默认按钮button><button type="button" class="btn btn-primary btn-sm">小号按钮button>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 按钮（三）
-
块级按钮
- 通过添加
.btn-block类可以设置块级按钮
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><button type="button" class="btn btn-primary btn-block">按钮 1button>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
- 通过添加
-
激活和禁用的按钮
- 按钮可设置为激活或者禁止点击的状态
.active类可以设置按钮是可用的，disabled属性可以设置按钮是不可点击的。 注意元素不支持disabled属性，你可以通过添加.disabled类来禁止链接的点击。
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><button type="button" class="btn btn-primary active">点击后的按钮button><button type="button" class="btn btn-primary" disabled>禁止点击的按钮button><a href="#" class="btn btn-primary disabled">禁止点击的链接a>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 按钮组（一）
-
Bootstrap 4 中允许我们将按钮放在同一行上。
-
可以在
元素上添加.btn-group类来创建按钮组。DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="btn-group"><button type="button" class="btn btn-primary">Applebutton><button type="button" class="btn btn-primary">Samsungbutton><button type="button" class="btn btn-primary">Sonybutton>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
提示:我们可以使用
.btn-group-lg|sm类来设置按钮组的大小。DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="btn-group btn-group-lg"><button type="button" class="btn btn-primary">Applebutton><button type="button" class="btn btn-primary">Samsungbutton><button type="button" class="btn btn-primary">Sonybutton>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 按钮组（二）
-
可以使用
.btn-group-vertical类来创建垂直的按钮组DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="btn-group-vertical"><button type="button" class="btn btn-primary">Applebutton><button type="button" class="btn btn-primary">Samsungbutton><button type="button" class="btn btn-primary">Sonybutton>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
拆分按钮下拉菜单
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h2>拆分按钮下拉菜单h2><div class="btn-group"><button type="button" class="btn btn-primary">Sonybutton><buttontype="button"class="btn btn-primary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"><span class="caret">span>button><div class="dropdown-menu"><a class="dropdown-item" href="#">Tableta><a class="dropdown-item" href="#">Smartphonea>div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.bundle.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 按钮组（三）
-
内嵌按钮组及下拉菜单
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="btn-group"><button type="button" class="btn btn-primary">Applebutton><button type="button" class="btn btn-primary">Samsungbutton><div class="btn-group"><buttontype="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">Sonybutton><div class="dropdown-menu"><a class="dropdown-item" href="#">Tableta><a class="dropdown-item" href="#">Smartphonea>div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.bundle.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 按钮组（三）
-
垂直按钮组及下拉菜单
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="btn-group-vertical"><button type="button" class="btn btn-primary">Applebutton><button type="button" class="btn btn-primary">Samsungbutton><div class="btn-group"><buttontype="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">Sonybutton><div class="dropdown-menu"><a class="dropdown-item" href="#">Tableta><a class="dropdown-item" href="#">Smartphonea>div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.bundle.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 徽章（Badges）(一)
-
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将
.badge类加上带有指定意义的颜色类。(如.badge-secondary) 添加到元素上即可。 徽章可以根据父元素的大小的变化而变化DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h2>徽章h2><h1>测试标题 <span class="badge badge-secondary">Newspan>h1><h2>测试标题 <span class="badge badge-secondary">Newspan>h2><h3>测试标题 <span class="badge badge-secondary">Newspan>h3><h4>测试标题 <span class="badge badge-secondary">Newspan>h4><h5>测试标题 <span class="badge badge-secondary">Newspan>h5><h6>测试标题 <span class="badge badge-secondary">Newspan>h6>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 徽章（Badges）(二)
-
各种颜色类型的徽章
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><span class="badge badge-primary">主要span><span class="badge badge-secondary">次要span><span class="badge badge-success">成功span><span class="badge badge-danger">危险span><span class="badge badge-warning">警告span><span class="badge badge-info">信息span><span class="badge badge-light">浅色span><span class="badge badge-dark">深色span>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
药丸形状徽章
- 使用
.badge-pill类来设置药丸形状徽章:
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><span class="badge badge-primary badge-pill">主要span><span class="badge badge-secondary badge-pill">次要span><span class="badge badge-success badge-pill">成功span><span class="badge badge-danger badge-pill">危险span><span class="badge badge-warning badge-pill">警告span><span class="badge badge-info badge-pill">信息span><span class="badge badge-light badge-pill">浅色span><span class="badge badge-dark badge-pill">深色span>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
- 使用
-
徽章插入到元素内
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><button type="button" class="btn btn-primary">Messages <span class="badge badge-light">4span>button>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 进度条（一）
-
进度条可以显示用户任务的完成过程。
-
创建一个基本的进度条的步骤如下：
-
添加一个带有
.progress类的。 -
接着，在上面的
内，添加一个带有class .progress-bar的空的。 -
添加一个带有百分比表示的宽度的
style属性，例如style="width:70%"表示进度条在 70% 的位置。DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="progress"><div class="progress-bar" style="width: 70%">div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 进度条（二）
-
进度条高度
-
进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改它
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><h2>进度条高度h2><p>进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改它：p><div class="progress" style="height: 10px"><div class="progress-bar" style="width: 40%">div>div><br /><div class="progress" style="height: 20px"><div class="progress-bar" style="width: 50%">div>div><br /><div class="progress" style="height: 30px"><div class="progress-bar" style="width: 60%">div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 进度条（三）
-
进度条标签
-
可以在进度条内添加文本，如进度的百分比：
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><div class="progress"><div class="progress-bar" style="width: 70%">70%div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
不同颜色的进度条
-
默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条：
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><div class="progress"><div class="progress-bar" style="width: 30%">div>div><br /><div class="progress"><div class="progress-bar bg-success" style="width: 40%">div>div><br /><div class="progress"><div class="progress-bar bg-info" style="width: 50%">div>div><br /><div class="progress"><div class="progress-bar bg-warning" style="width: 60%">div>div><br /><div class="progress"><div class="progress-bar bg-danger" style="width: 70%">div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
Bootstrap4 进度条（四）
-
条纹的进度条
-
使用
.progress-bar-striped类来设置条纹进度条DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><div class="progress"><div class="progress-bar progress-bar-striped" style="width: 40%">div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
动画进度条
-
使用
.progress-bar-animated类可以为进度条添加动画DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><div class="progress"><divclass="progress-bar progress-bar-striped progress-bar-animated"style="width: 40%">div>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
-
混合色彩进度条
-
进度条可以设置多种颜色
DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documenttitle><link rel="stylesheet" href="../bootstrap.css" />head><body><div class="container"><div class="progress"><div class="progress-bar bg-success" style="width: 40%">Free Spacediv><div class="progress-bar bg-warning" style="width: 10%">Warningdiv><div class="progress-bar bg-danger" style="width: 20%">Dangerdiv>div>div>body><script src="../jquery.js">script><script src="../bootstrap.js">script> html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
-
