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