滚动监听(Scrollspy)
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。
1. 如何创建滚动监听
向您想要监听的元素（通常是 body）添加 data-spy=“scroll” 。
然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。
注意可滚动项元素上的 id （< div id=“section1” >） 必须匹配导航栏上的链接选项 （< a href="#section1" >)。
可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。
设置相对定位: 使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
position: relative;
}
.box{
height: 720px;
padding-top:70px;
padding-bottom:70px;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">商品介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">成功案例</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
关于我们
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">店铺位置</a>
<a class="dropdown-item" href="#section42">合作品牌</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success box">
<h1>首页</h1>
</div>
<div id="section2" class="container-fluid bg-warning box">
<h1>商品介绍</h1>
</div>
<div id="section3" class="container-fluid bg-secondary box">
<h1>成功案例</h1>
</div>
<div id="section41" class="container-fluid bg-danger box">
<h1>店铺位置</h1>
</div>
<div id="section42" class="container-fluid bg-info box">
<h1>合作品牌</h1>
</div>
</body>
</html>
运行结果：
2. 垂直滚动监听
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
body{
position: relative;
}
ul.nav-pills{
position: fixed;
top: 200px;
}
div.col-10 div{
height: 720px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container-fluid">
<div class="row">
<nav class="col-2" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a href="#home" class="nav-link">首页</a></li>
<li class="nav-item"><a href="#product" class="nav-link">商品展示</a></li>
<li class="nav-item"><a href="#case" class="nav-link">成功案例</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
关于我们
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">店铺位置</a>
<a class="dropdown-item" href="#section42">合作品牌</a>
</div>
</li>
</ul>
</nav>
<div class="col-10">
<div id="home" class="bg-info">
<h1>首页</h1>
</div>
<div id="product" class="bg-danger">
<h1>商品展示</h1>
</div>
<div id="case" class="bg-warning">
<h1>成功案例</h1>
</div>
<div id="section41" class="container-fluid bg-success box">
<h1>店铺位置</h1>
</div>
<div id="section42" class="container-fluid bg-primary box">
<h1>合作品牌</h1>
</div>
</div>
</div>
</div>
</body>
</html>
运行结果：
小工具
Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。
1. 边框
Bootstrap4 提供了一些类来设置边框颜色，使用 border 类可以添加或移除边框。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container">
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<!-- 边框颜色 -->
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
</body>
</html>
运行结果：
2. 边框圆角设置
使用rounded 类可以添加圆角边框
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
</div>
</body>
</html>
运行结果：
3. 浮动
.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="clearfix">
<span class="float-left">左浮动</span>
<span class="float-right">右浮动</span>
</div>
</div>
</body>
</html>
运行结果：
4. 响应式浮动
设置浮动 (.float- sm, md, lg 或 xl -left / right )的方向依赖于屏幕的大小
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
<div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
<div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
<div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
<div class="float-none">没有浮动</div>
</div>
</body>
</html>
运行结果：
5. 居中对齐
使用 .mx-auto 类来设置居中对齐。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="mx-auto bg-warning" style="width:150px">居中</div>
</div>
</body>
</html>
运行结果：
6. 宽度、高度
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div class="container">
<!-- 宽度 -->
<div class="w-25 bg-primary">宽度 25%</div>
<div class="w-50 bg-primary">宽度 50%</div>
<div class="w-75 bg-primary">宽度 75%</div>
<div class="w-100 bg-primary">宽度 100%</div>
<div class="mw-100 bg-primary">最大宽度 100%</div>
<br>
<!-- 高度 -->
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">高度 25%</div>
<div class="h-50 d-inline-block p-2 bg-warning">高度 50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">高度 75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">高度 100%</div>
<div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度 100%</div>
</div>
</div>
</body>
</html>
运行结果：
