1.进度条
1.添加一个带有 .progress 类的 <div>。
2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
3.添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。
例如 style="width:70%" 表示进度条在 70% 的位置。
进度条高度
进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改它
<div class="container">
进度条标签
可以在进度条内添加文本，如进度的百分比
不同颜色的进度条
默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条
颜色：bg-success bg-info bg-warning bg-danger
可以使用 .progress-bar-striped 类来设置条纹进度条
条纹的进度条：可以使用 .progress-bar-striped 类来设置条纹进度条
使用 .progress-bar-animated 类可以为进度条添加动画
动画进度条：使用 .progress-bar-animated 类可以为进度条添加动画
混合色彩进度条
相加=100%“style="width:70%”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--移动设备优先
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。-->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 颜色：bg-success bg-info bg-warning bg-danger-->
<div class="container">
<br> <br>
<div class="progress" style="width: 500px;">
<div class="progress-bar" style="width: 70%;">
</div>
</div>
<br> <br>
<div class="progress" style="height: 20px;">
<div class="progress-bar bg-info" style="width:25%">
</div>
</div>
<br> <br>
<div class="progress" >
<div class="progress-bar bg-warning" style="width: 58%;">58%</div>
</div>
<br> <br>
<div class="progress " >
<div class="progress-bar bg-warning progress-bar-striped" style="width: 72%;">72%</div>
</div>
<br> <br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 70%;">70%
</div>
</div>
<br> <br>
<div class="progress">
<div class="progress-bar bg-success" style="width: 35%;">请等待</div>
<div class="progress-bar bg-warning progress-bar-striped " style="width: 35%;">精彩马上回来</div>
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 29%;">99%</div>
</div>
</div>
</body>
</html>
2.Bootstrap4 分页
网页开发过程，如果碰到内容过多，一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
1.在 ul 元素上添加 .pagination 类。
2.在 li 元素上添加 .page-item 类。
3.在 a 元素上添加 .page-link 类。
li上设置.active 类来高亮显示
li上设置.disabled 类可以设置分页链接不可点击
.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目
当前页可以使用 .active 类来高亮显示
disabled 类可以设置分页链接不可点击
pagination-lg 类设置大字体的分页条目，pagination-sm 类设置小字体的分页条目
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--移动设备优先
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。-->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<ul class="pagination">
<li class="page-item active"><a class="page-link"herf="#">首页(高亮)</a></li>
<li class="page-item"><a class="page-link"herf="#">上一页</a></li>
<li class="page-item"><a class="page-link"herf="#">1</a></li>
<li class="page-item"><a class="page-link"herf="#">2</a></li>
<li class="page-item"><a class="page-link"herf="#">下一页</a></li>
<li class="page-item disabled"><a class="page-link"herf="#">末页(不可点击)</a></li>
</ul>
<ul class="pagination pagination-lg">
<li class="page-item active"><a class="page-link"herf="#">首页(高亮)</a></li>
<li class="page-item"><a class="page-link"herf="#">上一页</a></li>
<li class="page-item"><a class="page-link"herf="#">1</a></li>
<li class="page-item"><a class="page-link"herf="#">2</a></li>
<li class="page-item"><a class="page-link"herf="#">下一页</a></li>
<li class="page-item disabled"><a class="page-link"herf="#">末页(不可点击)</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item active"><a class="page-link"herf="#">首页(高亮)</a></li>
<li class="page-item"><a class="page-link"herf="#">上一页</a></li>
<li class="page-item"><a class="page-link"herf="#">1</a></li>
<li class="page-item"><a class="page-link"herf="#">2</a></li>
<li class="page-item"><a class="page-link"herf="#">下一页</a></li>
<li class="page-item disabled"><a class="page-link"herf="#">末页(不可点击)</a></li>
</ul>
</div>
</body>
</html>
3.Bootstrap4 列表组
要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类
<div class="container">
<ul class="list-group" >
<li class="list-group-item">First</li>
<li class="list-group-item">Second</li>
<li class="list-group-item">Thrid</li>
</ul>
</div>
通过添加 .active 类来设置激活状态的列表项
<ul class="list-group" >
<li class="list-group-item active">First</li>
<li class="list-group-item">Second</li>
<li class="list-group-item">Third</li>
</ul> 
.disabled 类用于设置禁用的列表项
<ul class="list-group" >
<li class="list-group-item">First</li>
<li class="list-group-item">Second</li>
<li class="list-group-item disabled">Third</li>
</ul> 
要创建一个链接的列表项，可以将 <ul> 替换为 <div> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类
<div class="list-group" >
<a href="#" class="list-group-item list-group-item-action">First</a>
<a href="#" class="list-group-item list-group-item-action">Second</a>
<a href="#" class="list-group-item list-group-item-action">Third</a>
</div> 
！！！列表项目的颜色可以通过以下列来设置：
.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light
<ul class="list-group" >
<li class="list-group-item list-group-item-success">First</li>
<li class="list-group-item list-group-item-secondary">Second</li>
<li class="list-group-item list-group-item-info">Third</li>
<li class="list-group-item list-group-item-light">Fourth</li>
</ul>
<br><br>
<div class="list-group" >
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">First</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Second</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Third</a>
</div>
4.Bootstrap4 卡片
我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片。
头部和底部
.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式
<div class="container">
<h1>卡片的头部和底部</h1>
<div class="card">
<div class="card-header">头部</div>
<div class="card-body">内容</div>
<div class="card-footer">底部</div>
</div>
</div> 
多种颜色卡片
Bootstrap 4 提供了多种卡片的背景颜色类：
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
<h1>各种颜色的卡片</h1>
<div class="card">
<div class="card-header">头部</div>
<div class="card-body">
<div class="card-body bg-primary text-white">
蓝底白字
</div>
<br>
<div class="card-body bg-success text-black">
绿底黑字
</div>
<br>
<div class="card-body bg-info text-white">
各种颜色的卡片
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">
哇
</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>
<div class="card-footer">底部</div>
</div> 
标题、文本和链接
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。
<div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<h6 class="card-text">正文部分，就是这样</h6>
<a href="#" class="card-link">超链接</a>
<a href="#" class="card-link">点点我</a>
</div>
</div> 
图片卡片
我们可以给 <img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片）
<h4>图片卡片</h4>
<p>图片在头部 card-img-top</p>
<p>图片在底部 card-img-bottom</p>
<div class="card" style="width: 400px;">
<img class="card-img-top" src="css/faq03.jpg" alt="card image" style="width: 100%;">
<div class="card-body">
<h4 class="card-title"> 就这？</h4>
<p class="card-text">就是这么简单？</p>
<a href="#" class="btn btn-primary">看吧看吧</a>
</div>
</div>
<br>
<h4>图片在底部</h4>
<div class="card" style="width: 200px;">
<div class="card-body">
<h4 class="card-title">图片在底部</h4>
<p class="card-text">正文部分</p>
<a href="#" class="btn"></a>
<img class="card-img-bottom" src="css/faq03.jpg" alt="图片丢失" style="width: 50%; height: 30%;">
</div>
</div> 
如果图片要设置为背景，可以使用 .card-img-overlay 类
<h4>图片设置为背景</h4>
<div class="card img-fluid" style="width: 400px;"> <!--图片当背景要+"img-fluid"-->
<img class="card-img-top" src="css/tu3.jpg" style="width: 100%;">
<div class="card-img-overlay">
<h4 class="card-title">图片当背景</h4>
<p class="card-text">图片当背景要+ "img-fluid" </p>
<a href="#" class="btn btn-primary">确认</a>
</div>
</div> 
5.Bootstrap4 下拉菜单
Bootstrap4 下拉菜单依赖于 popper.min.js。
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。
下拉菜单中的分割线
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线
下拉菜单中的标题
.dropdown-header 类用于在下拉菜单中添加标题
下拉菜单中的可用项与禁用项
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)
如果要禁用下拉菜单的选项，可以使用.disabled 类
下拉菜单的定位
如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类
下拉菜单弹出方向设置
下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。
如果你希望下拉菜单向右弹出，可以在 div 元素上添加 "dropright" 类
如果你希望下拉菜单向左弹出，可以在 div 元素上添加 "dropleft" 类
如果你希望上拉菜单向上弹出，可以在 div 元素上添加 "dropup" 类
按钮中设置下拉菜单
6.Bootstrap4 折叠
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性
默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示
手风琴实例
注意: 使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。
6.Bootstrap4 导航
如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类
.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。
.flex-column 类用于创建垂直导航
选项卡
使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。
.nav-pills 类可以将导航项设置成胶囊形状。
.nav-justified 类可以设置导航项齐行等宽显示。
胶囊下拉菜单
选项卡下拉菜单
动态选项卡
如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。
如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类
胶囊状动态选项卡
胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill"
7.Bootstrap4 导航栏
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类
垂直导航栏
通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏:
不同颜色导航栏
可以使用以下类来创建不同颜色导航栏：
！！.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。
激活和禁用状态: 可以在 <a> 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。
品牌/Logo
.navbar-brand 类用于高亮显示品牌/Logo
如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。
导航栏使用下拉菜单
导航栏的表单与按钮
导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮
导航栏文本
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。
固定导航栏
导航栏可以固定在头部或者底部。
我们使用 .fixed-top 类来实现导航栏的固定
.fixed-bottom 类用于设置导航栏固定在底部
8.Bootstrap4 面包屑导航（Breadcrumb）
面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。
Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 :before 和 content 来添加
1435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
