十四、Bootstrap4 进度条
进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下：
1.添加一个带有 .progress 类的 <div>。
2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
3.添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 进度条</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>基本进度条</h4>
<p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况</p>
<p>可以使用 .progress-bar-striped 类来设置条纹进度条</p>
<p>使用 .progress-bar-animated 类可以为进度条添加动画</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 70%;">70%</div>
</div>
<h4>进度条高度</h4>
<p>进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：</p>
<div class="progress" style="height: 30px;">
<div class="progress-bar" style="width: 70%;">70%</div>
</div><br>
<div class="progress" style="height: 30px;">
<div class="progress-bar bg-dark" style="width: 20%;">20%</div>
<div class="progress-bar bg-danger" style="width: 20%;">20%</div>
<div class="progress-bar bg-info" style="width: 30%;">30%</div>
</div>
</body>
</html>
十五、Bootstrap4 分页
网页开发过程，如果碰到内容过多，一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类
例如;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 分页</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>分页</h4>
<p>要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类</p>
<p>可以使用 .active 类来高亮显示</p>
<p>disabled 类可以设置分页链接不可点击</p>
<ul class="pagination">
<li class="page-item disabled"><a href="#" class="page-link">首页</a></li>
<li class="page-item active"><a href="#" class="page-link">第一页</a></li>
<li class="page-item"><a href="#" class="page-link">第二页</a></li>
<li class="page-item"><a href="#" class="page-link">末页</a></li>
</ul>
<p>.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目</p>
<ul class="pagination pagination-lg">
<li class="page-item"><a href="#" class="page-link">首页</a></li>
<li class="page-item"><a href="#" class="page-link">第一页</a></li>
<li class="page-item"><a href="#" class="page-link">第二页</a></li>
<li class="page-item"><a href="#" class="page-link">末页</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a href="#" class="page-link">首页</a></li>
<li class="page-item"><a href="#" class="page-link">第一页</a></li>
<li class="page-item"><a href="#" class="page-link">第二页</a></li>
<li class="page-item"><a href="#" class="page-link">末页</a></li>
</ul>
</body>
</html>
十六、 Bootstrap4 列表组
要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:
<div class="container">
要创建一个链接的列表项，也可以将 <ul> 替换为 <div> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类
通过添加 .active 类来设置激活状态的列表项
.disabled 类用于设置禁用的列表项
列表项目的颜色可以通过以下列来设置：
.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 列表项</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>bootstrap4 列表组</h4>
<p>要创建列表组，可以在 ul元素上添加 .list-group 类, 在li元素上添加 .list-group-item 类</p>
<p>通过添加 .active 类来设置激活状态的列表项</p>
<p>.disabled 类用于设置禁用的列表项</p>
<ul class="list-group" style="width: 300px;">
<li class="list-group-item active">1</li>
<li class="list-group-item">2</li>
<li class="list-group-item disabled">3</li>
</ul>
<p>要创建一个链接的列表项，可以将 ul替换为div，a替换li。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类</p>
<p>列表项目的颜色可以通过以下列来设置： <br>
.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</p>
<div class="list-group" style="width: 300px;">
<a class="list-group-item list-group-item-action list-group-item-danger" href="#">1</a>
<a class="list-group-item list-group-item-action list-group-item-secondary" href="#">2</a>
<a class="list-group-item list-group-item-action list-group-item-info" href="#">3</a>
</div>
</body>
</html>
十七、Bootstrap4 卡片
可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片
头部和底部
.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式
多种颜色卡片
Bootstrap 4 提供了多种卡片的背景颜色类：
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 卡片</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>bootstrap4 卡片</h4>
<h5>可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片</h5>
<div class="card">
<div class="card-body">简单的卡片</div>
</div>
<h5>头部和底部<br>
.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式</h5>
<h5>
多种颜色卡片Bootstrap 4 提供了多种卡片的背景颜色类：<br>
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light
</h5>
<div class="card">
<div class="card-header">头部</div>
<div class="card-body bg-danger">内容</div>
<div class="card-footer">底部</div>
</div>
<h5>标题、文本和链接:<br>
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。
</h5>
<div class="card">
<div class="card-body">
<div class="card-header">
<p class="card-title">卡片的标题</p>
</div>
<div class="card-body">
<p class="card-text">正文内容</p>
</div>
<div class="card-footer">
<a href="#" class="card-link">cardlink</a>
</div>
</div>
</div>
<h5>如果图片要设置为背景，可以使用 .card-img-overlay 类</h5>
<div class="card" style="width: 200px;">
<img class="card-img-top" src="shangpin.jpg">
<div class="card-header card-img-overlay">将图片设置为背景图片
</div>
<div class="card-body">内容</div>
<div class="card-footer">底部</div>
</div>
</div>
<h5>图片卡片<br>
我们可以给 img 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片）
</h5>
<p>图片在头部 (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="shangpin.jpg" alt="Card image" style="width:100px">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<br>
<p>图片在底部(card-img-bottom):</p>
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
<img class="card-img-bottom" src="shangpin.jpg" alt="Card image" style="width:100px">
</div>
<br>
<!--做一个商品的卡片-->
<div class="card" style="width: 250px;">
<div class="card-body">
<img class="card-img-top" src="shangpin.jpg" alt="" width="200px">
<p class="card-text">花卉 好看的植物千篇一律，唯有海棠花进你心·····</p>
<p class="text-warning font-weight-bold">￥:29.00</p>
<button class="btn btn-danger" type="button" style="width: 210px;">立即购买</button>
</div>
</div>
</body>
</html>
十八、Bootstrap4 下拉菜单
Bootstrap4 下拉菜单依赖于 popper.min.js。
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 下拉菜单</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>bootstrap4 下拉菜单</h4>
<p>.dropdown 类用来指定一个下拉菜单。</p>
<p>
.dropdown-menu 类来设置实际下拉菜单<br>
.dropdown-item 类来设置实际下拉菜单的每一项
</p>
<p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。<br>
如果要禁用下拉菜单的选项，可以使用.disabled 类。</p>
<p>我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。</p>
<p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线</p>
<p>.dropdown-header 类用于在下拉菜单中添加标题</p>
<div class="dropdown">
<button class="btn dropdown-toggle btn-info" type="button" data-toggle="dropdown">菜单</button>
<div class="dropdown-menu">
<div class="dropdown-header">首页</div>
<a class="dropdown-item" href="#">link1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">link2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">link3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item active" href="#">link4</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="#">link5</a>
</div>
</div>
<p>下拉菜单的定位.dropdown-menu-left表示有对齐，.dropdown-menu-right表示右对齐</p>
<p>下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。<br>
如果你希望下拉菜单向右弹出，可以在 div 元素上添加 "dropright" 类<br>
如果你希望下拉菜单向左弹出，可以在 div 元素上添加 "dropleft" 类<br>
如果你希望上拉菜单向上弹出，可以在 div 元素上添加 "dropup" 类
</p>
<div class="dropdown dropright">
<button class="btn dropdown-toggle btn-info" type="button" data-toggle="dropdown">菜单</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">link1</a>
<a class="dropdown-item" href="#">link2</a>
<a class="dropdown-item" href="#">link3</a>
<a class="dropdown-item active" href="#">link4</a>
<a class="dropdown-item disabled" href="#">link5</a>
</div>
</div>
</body>
</html>
十九、Bootstrap4 折叠
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 折叠</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>bootstrap4 折叠</h4>
<p>.collapse 类用于指定一个折叠元素 (实例中的 div); 点击按钮后会在隐藏与显示之间切换。点击按钮内容会再显示与隐藏之间切换。</p>
<p>
控制内容的隐藏与显示，需要a 或 button 元素上添加 data-toggle="collapse" 属性。
data-target="#id" 属性是对应折叠的内容 (div id="demo")。
注意: a元素上你可以使用 href 属性来代替 data-target 属性
</p>
<button class="btn " data-toggle="collapse" data-target="#dome" type="button">折叠</button>
<div id="dome" class="collapse">
<ul class="list-group" style="width: 300px;">
<li class="list-group-item">1</li>
<li class="list-group-item">2</li>
<li class="list-group-item">3</li>
</ul>
</div>
<div class="card" style="width: 300px;">
<div class="card-header">
<a href="#zhedie" class="card-link" data-toggle="collapse" data-target="#zhedie">首页折叠</a>
</div>
<div id="zhedie" class="collapse">
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">1</li>
<li class="list-group-item">2</li>
<li class="list-group-item">3</li>
</ul>
</div>
</div>
<div class="card-header">
<a href="#zhedie2" class="card-link" data-toggle="collapse" data-target="#zhedie2">首页折叠</a>
</div>
<div id="zhedie2" class="collapse">
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">1</li>
<li class="list-group-item">2</li>
<li class="list-group-item">3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
二十、 Bootstrap4 导航
创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>bootstrap4 导航</h4>
<h5>创建一个简单的水平导航栏，可以在ul元素上添加 .nav类，在每个li选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类</h5>
<h5>.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。</p>
<p>.nav-pills 类可以将导航项设置成胶囊形状</h5>
<h5>.nav-justified 类可以设置导航项齐行等宽显示</h5>
<ul class="nav nav-pills justify-content-center nav-justified">
<li class="nav-item dropdown " style="margin-left:10px;"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">新闻</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link active">系统设置</a></li>
<li class="nav-item" ><a href="#" class="nav-link">地图</a></li>
<li class="nav-item"><a href="#" class="nav-link">直播</a></li>
<li class="nav-item"><a href="#" class="nav-link">贴吧</a></li>
<li class="nav-item"><a href="#" class="nav-link disabled">学术</a></li>
</ul>
<h5>.flex-column 类用于创建垂直导航</h5>
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a href="#d1" class="nav-link" data-toggle="collapse" data-traget="#d1">新闻</a></li>
<div id="d1" class="collapse">
fsahfiahjfojasofjao
</div>
<li class="nav-items"><a href="#" class="nav-link">hao123</a></li>
<li class="nav-item"><a href="#" class="nav-link">地图</a></li>
<li class="nav-item"><a href="#" class="nav-link">直播</a></li>
</ul>
<h5>使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。</h5>
<h5>.active 类来标记被选中</h5>
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#" class="nav-link">新闻</a></li>
<li class="nav-item"><a href="#" class="nav-link active">hao123</a></li>
<li class="nav-item"><a href="#" class="nav-link">地图</a></li>
</ul>
<p>选项卡下拉菜单</p>
<ul class="nav nav-tabs">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">首页</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">1</a>
<a href="#" class="dropdown-item">2</a>
</div>
</li>
<li class="nav-item"><a class="nav-link active" href="#">管理者</a></li>
<li class="nav-item"><a class="nav-link" href="#">用户</a></li>
</ul>
<h5>动态选项卡：</h5>
<h5>div class="tab-content"设置选项卡内容的模板</h5>
<h5>div id="one" class="container tab-pane active"--每一个选型内容</h5>
<h5>li元素总a 中设置data-toggle="tab",href="#每一个选型内容id值"</h5>
<h5>data-toggle 属性设置为 data-toggle="pill"</h5>
<!--创建选项卡-->
<ul class="nav nav-tabs">
<li class="nav-item dropdown">
<a class="nav-link active" data-toggle="tab" href="#d1">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#d2">管理者</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#d3">用户</a>
</li>
</ul>
<!--在内容所对应的选项卡的nav-item中的nav-link上进行绑定内容左营的id设置独立属性data-toggle=“ #id”
使用a标签时data-target可以等于href标签的值，此时让要点击的a标签的href的值等于要被显示的id就可以
-->
<div class="tab-content">
<!--第一个选项的内容,给选项卡内容设置class="container tab-pane"-->
<div id="d1" class="container tab-pane active">
<h2>第一个选项卡的内容</h2>
</div>
<div id="d2" class="container tab-pane">
<h2>第二个选项卡的内容</h2>
</div>
<div id="d3" class="container tab-pane">
<h2>第三个选项卡的内容</h2>
</div>
</div>
</body>
</html>
二十一、Bootstrap4 导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 导航栏</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container-fluid">
<h4>bootstrap4 导航栏</h4>
<h6>可以使用以下类来创建不同颜色导航栏：<br>
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。<br>
提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。</h6>
<h6>
.active设置被选中的导航选项<br>
.disabled设置禁止使用<br>
.navbar-brand 类用于高亮显示品牌/Logo:
</h6>
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-brand" >Logo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<h6>导航栏的表单与按钮</h6>
<h6>导航栏的表单 form 元素使用 class="form-inline" 类来排版输入框与按钮</h6>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success" type="button">Search</button>
</form>
</nav>
<h6>
导航栏文本<br>
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。
</h6>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
</body>
</html>
二十二、Bootstrap4 面包屑导航（Breadcrumb）
面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 面包屑导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container-fluid">
<h4>bootstrap4 面包屑导航</h4>
<h5>Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 :before 和 content 来添加</h5>
<h5></h5>
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item">Home</li>
</ol>
</body>
</html>
扫一扫
1932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
