滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。
向您想要监听的元素（通常是 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>运行结果：
代码如下：
<!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 代码就能实现想要的效果。
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>运行结果：
使用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>运行结果：
.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>运行结果：
设置浮动 (.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>运行结果：
使用 .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>运行结果：
元素上使用 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>运行结果：
