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

阿新 • • 發佈：2019-01-11

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

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

1.提示框和彈出框

2.滾動監聽

3.小工具

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

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁

bootstrap(選項卡、提示框和彈出框)

淺談對Bootstrap的看法之一（文字顏色、表格、進度條、按鈕）

淺談對面向物件的理解（2）

bootstrap 4-標籤頁製作和彈出框（模態框）製作

Python+Selenium筆記（九）：操作警告和彈出框

Springboot2（29）整合zookeeper的增刪改查、節點監聽、分散式讀寫鎖、分散式計數器

Android-X5WebView封裝（Cookie管理、進度監聽、適配8.1系統等策略）

bootstrap提示和彈出框

事件處理程式（事件繫結、事件監聽、事件偵聽器）

最新基於高德地圖的android進階開發（5）地圖的基本操作、事件監聽、使用者UI、圖層選擇等

淺談對Js面向物件的理解（1）

web前端開發技術之淺談對HTML5 智能表單的理解

web前端技術基礎課程講解之淺談對soket的理解

心理學角度淺談對“人”與“人工智慧”的看法

ASP.NET之旅--淺談Asp.net的執行機制（二）

淺談對Lua的看法

淺談JAVA設計模式之——備忘錄模式（Memento）

淺談JAVA設計模式之——組合模式（Composite）

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

1.提示框和彈出框

2.滾動監聽

3.小工具

相關推薦