淺談對Bootstrap的看法之三(提示框和彈出框、滾動監聽、小工具)

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


發佈了43 篇原創文章 · 獲贊 25 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章