1.提示框和弹出框
相关说明：提示框和弹出框效果类似。
提示框：通过向元素添加 data-toggle="tooltip" 来创建提示框，<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>，title引号中的内容为提示框显示的内容。提示框需要使用到 jQuery ， 在指定的元素上调用 tooltip() 方法。效果为当鼠标聚焦到某一指定位置，自动出现一个气泡框显示提示内容。
弹出框：通过向元素添加 data-toggle="popover" 来创建弹出框，<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>，title引号中为标题，data-content引号中为内容。弹出框需要使用到 jQuery ， 在指定的元素上调用 popover() 方法。效果为当鼠标点击某一指定位置，自动弹出一文本框显示内容。
主要代码：
<div class="container">
<h3>弹出框实例</h3>
<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我多次点我</a>
</div>
<br>
<script>$(document).ready(function(){$('[data-toggle="popover"]').popover();})</script>
<div class="container">
<h3>提示框实例</h3><br>
<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>
</div>
<script>$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});</script>2.滚动监听
相关说明：为想要监听的元素（通常是 body）添加<data-spy="scroll">属性,然后添加data-target属性，它的值为导航栏上id或class的值，这样做是为了联系可滚动区域。
滚动区域中<div id="section1">与导航栏上的链接选项<a href="#section1">相匹配。可选项data-offset 属性用于计算滚动区域内与导航栏相匹配的元素距离顶部的像素（默认为10px）。
主要代码：
<style>body {
position: relative;
}</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">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! </p>
</div>3.小工具
Bootstrap4里面还包含了许多css小样式，例如：边框、边框颜色、圆角设置、浮动、响应式浮动、居中对齐、宽度、高度等。
更多详细设置查看链接：http://www.runoob.com/bootstrap4/bootstrap4-utilities.html