2. 程式人生 > >bootstrap(選項卡、提示框和彈出框)

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

阿新 • • 發佈：2018-12-31

選項卡（Tabs）
選項卡Tabs是Web中一種非常常用的功能。使用者點選或懸浮對應的選單項，能切換出對應的內容

Bootstrap框架中的選項卡主要有兩部分內容組成：
選項卡元件（也就是選單元件），對應的是 Bootstrap的 nav-tabs）
底部可以切換的選項卡面板，在 Bootstrap 中通常 tab-pane 來表示.

<!-- 選項卡元件（選單項nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href
 
="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">規則</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
    <li><a href="#security" role="tab" data-toggle
 
="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>

<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active" id="bulletin">公告內容面板</div>
    <div class="tab-pane"
 
 id="rule">規則內容面板</div>
    <div class="tab-pane" id="forum">論壇內容面板</div>
    <div class="tab-pane" id="security">安全內容面板</div>
    <div class="tab-pane" id="welfare">公益內容面板</div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

選項卡–選項卡的結構
一個選項卡主要包括兩個部分，其一是選單項，其二是內容面板
關鍵一點，選項卡中連結的錨點要與對應的面板內容容器的ID相匹配。
對於面板內容tab-pane都是隱藏的，只有當前面板內容才是顯示的：

css原始碼：
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

選項卡–觸發切換效果
選項卡也定義data屬性來觸發切換效果。當然前提你也要先載入bootstrap.js或者是tab.js。宣告式觸發選項卡需要滿足以下幾點要求：
1、選項卡導航連結中要設定 data-toggle=”tab”
2、並且設定 data-target=”對應內容面板的選擇符(一般是ID)”;
如果是連結的話，還可以通過 href=”對應內容面板的選擇符(一般是ID)”
主要起的作用是使用者點選的時候能找到該選擇符所對應的面板內容 tab-pane。

3、面板內容統一放在 tab-content 容器中，而且每個內容面板 tab-pane 都需要設定一個獨立的選擇符（最好是ID）與選項卡中的 data-target 或 href 的值匹配。

選項卡–為選擇卡新增fade樣式
為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中新增類名 fade，讓其產生漸入的效果。
在新增 fade 樣式時，最初的預設顯示的內容面板一定要記得加上 in 類名，不然其內容使用者無法看到

<!-- 選項卡元件（選單項nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">規則</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
    <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告內容面板</div>
    <div class="tab-pane fade" id="rule">規則內容面板</div>
    <div class="tab-pane fade" id="forum">論壇內容面板</div>
    <div class="tab-pane fade" id="security">安全內容面板</div>
    <div class="tab-pane fade" id="welfare">公益內容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

選項卡–膠囊式選項卡（nav-pills）
在Bootstrap除了可以讓 nav-tabs 具有選項卡的切換功能之外，還可以對膠囊式 nav-pills 導航也具有選項卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關鍵一點是將 data-toggle=”tab”換成data-toggle=”pill”。

<!-- 選項卡元件（選單項nav-pills）-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="pill">規則</a></li>
    <li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li>
    <li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告內容面板</div>
    <div class="tab-pane fade" id="rule">規則內容面板</div>
    <div class="tab-pane fade" id="forum">論壇內容面板</div>
    <div class="tab-pane fade" id="security">安全內容面板</div>
    <div class="tab-pane fade" id="welfare">公益內容面板</div>
</div>

選項卡–JavaScript觸發方法
在每個連結的單擊事件中呼叫tab(“show”)方法，顯示對應的標籤面板內容。針對上面的示例，刪除HTML中自定義的 data-toggle=”tab” 或 data-toggle=”pill” 的屬性，然後通過下面的指令碼來呼叫：

$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})

例項 ：
<!-- 選項卡元件（選單項nav-tabs）-->
<ul id="myTab2" class="nav nav-tabs" role="tablist">
    <li><a href="#a" role="tab">娛樂</a></li>
    <li><a href="#b" role="tab">房產</a></li>
    <li><a href="#c" role="tab">國內</a></li>
    <li><a href="#d" role="tab">國外</a></li>    
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent2" class="tab-content">
    <div class="tab-pane fade in active" id="a">娛樂內容面板</div>
    <div class="tab-pane fade" id="b">房產內容面板</div>
    <div class="tab-pane fade" id="c">國內內容面板</div>
    <div class="tab-pane fade" id="d">國外內容面板</div>  
</div>

<script>    
    $(function(){
    $("#myTab2 a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})
</script>

提示框(Tooltip)
樣式檔案：
LESS版本：對應原始檔 tooltips.less

<style id="jsbin-css">
  body {
    padding: 100px;
  }
  .btn {
    margin: 20px 10px 20px;
  }
  </style>
</head>
<body>
  <h3>按鈕做的提示框</h3>
  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="left" 
          data-original-title="提示框居左" 
          title="">
  提示框居左      
  </button>  

  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="top" 
          data-original-title="提示框在頂部">
   提示框在頂部
  </button>

  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="bottom" 
          data-original-title="提示框在底部">
  提示框在底部             
  </button>

  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="right" 
          data-original-title="提示框居右">
  提示框居右      
  </button>

  <h3>連結製作的提示框</h3>
  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="left" 
     title="提示框居左">
     提示框居左
  </a>

  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="top" 
     title="提示框在頂部">
     提示框在頂部
  </a>

  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="bottom" 
     title="提示框在底部">
     提示框在底部
  </a>

  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="right" 
     title="提示框在居右">
     提示框居右
  </a>

  <a href="##" 
     class="btn btn-primary" 
     id="myTooltip">
     我是提示框
  </a>

  <a href="##" 
     class="btn btn-primary" 
     id="myTooltip2">
     我是提示框2
  </a>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script>


  $(function(){
      //新增提示框的事件
    $('[data-toggle="tooltip"]').tooltip();

    //能過js來更改提示框
    $('#myTooltip').tooltip({
      title:"我是一個提示框，我在頂部出現",
      placement:'top'
    });
  });
  </script>

通過 title 屬性的值來定義提示資訊(也可以使用自定義屬性 data-original-title 來設定提示資訊)。
通過 data-placement 自定義屬性來控制提示資訊框的位置，根據四種不同的位置，data-placement具有四個值：top、right、bottom和left，分別表示提示框出現的位置在頂部、右邊、底部和左邊。
還有一個最重要的引數不可缺少，data-toggle=”tooltip”。

需要特別注意的是：
1、如果同時設定了 data-original-title 和 title 定義提示資訊，那麼 data-original-title 的優先順序要高於 title。只有 data-original-title 值為空時，才會取 title 的值做為提示資訊的內容。

2、Bootstrap框架中的提示框的觸發方式和前面介紹的外掛略有不同。不能直接通過自定義的屬性 data- 來觸發。必須得依賴於JavaScript的程式碼觸發。

提示框–其他的自定義屬性
這裡寫圖片描述

提示框–JS設定引數方法
這裡寫圖片描述

彈出框（Popover）
不同的是：彈出框除了有標題 title 以外還增加了內容 content 部分。這個在提示框中是沒有的。
樣式檔案：
☑ LESS版本：對應的原始檔是 popovers.less

<button type="button" class="btn btn-default" id="myPopover">猛擊我吧</button>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
  $('#myPopover').popover({
     title:"我是彈出框的標題",
     content:"我是彈出框的內容",
     placement:"right"
  });
});
</script>
<button type="button" 
          data-toggle="popover" 
          class="btn btn-default" 
          id="myPopover">
          滑鼠放上顯示彈出框
  </button>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
//通過js來定義彈出框
$(function(){
    $('#myPopover').popover({
        title:"我是彈出框的標題",
        content:"我是彈出框的內容",
        placement:"top",
        trigger:"hover"
    });
});
</script>

這裡寫圖片描述

彈出框–提示框和彈出框的異同
提示框 tooltip 的預設觸發事件是 hover 和 focus，而彈出框 popover 是 click
提示框 tooltip 只有一個內容(title)，而彈出框不僅可以設定標題（title）還可以設定內容(content)

提示框tooltip的模板：

<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>

彈出框popover的模板：

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

相關推薦

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

選項卡（Tabs） 選項卡Tabs是Web中一種非常常用的功能。使用者點選或懸浮對應的選單項，能切換出對應的內容 Bootstrap框架中的選項卡主要有兩部分內容組成： 選項卡元件（也就是選單元件），對應的是 Bootstrap的 nav-tabs） 底

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

1.提示框和彈出框相關說明：提示框和彈出框效果類似。提示框：通過向元素新增 data-toggle="tooltip" 來建立提示框，<a href="#" data-toggle="tooltip" title="我是提示內容!">滑鼠移動到我這</a&g

bootstrap提示和彈出框

一、提示效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

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

1、標籤頁（Tabs） 標籤頁是一個經常使用的元件，可以放置較多的內容，又可以節省頁面空間。 如下： 無需寫任何JavaScript程式碼，只需要簡單的為頁面元素指定data-toggle="tab",為url新增nav和nav-tab class  案例程式碼： <

python 異常和彈出框

div message class port inter 異常 彈出框 cep code import tkinter.messagebox try: fileContent = open("abnormal.txt") fileContent.clos

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

smi top web cell 錯誤 ext script ava mozilla #之前發的 driver.switch_to_alert() 這句雖然可以運行通過，但是會彈出警告信息（這種寫法3.x不建議使用） 改成 driver.switch_to.alert就不

關於layer的提示框，彈出框一閃而過的問題

在頁面中，layer的彈出框，不管是layer.alert，還是layer.msg等等，都會出現一閃而過的問題，研究發現，總結如下           原因一：                 在頁面中使用了form表單，把button按鈕放在了form中，在這種情況下，

bootstrap模態框（彈出框），如何新增傳參事件

$('#identifier').modal({ keyboard:false}) Toggle: .modal('toggle')手動切換模態框。 $('#identifier').modal('toggle') Show: .modal('show')手動開啟模態框。 $('#identifier').

Bootstrap -- 外掛: 提示工具、彈出框、 警告框訊息

Bootstrap -- 外掛: 提示工具、彈出框、 警告框訊息 1. 提示工具（Tooltip）外掛：根據需求生成內容和標記。 使用提示工具： <!DOCTYPE html> <html> <head> <meta http-equiv=

JS元件Bootstrap實現彈出框和提示框效果程式碼

前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，

bootstrap js外掛篇——提示框、彈出框、警告框

六、提示框、彈出框、警告框 6.1提示框   6.1.1基本結構 注： 1、提示框的觸發方式和前面介紹的外掛略有不同，不能直接通過自定義的屬性 data- 來觸發，必須得依賴於JavaScri

Bootstrap：彈出框和提示框效果以及程式碼展示

前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，這

JS彈出框、對話方塊、提示框，JS關閉視窗、關閉頁面和JS控制頁面跳轉

1. RequestDispatcher.forward() 在伺服器端起作用,當使用forward()時,Servlet engine傳遞HTTP請求從當前的Servlet或者是JSP到另外的一個Servlet、JSP 或普通HTML檔案,也即你的form提交至a.jsp,在a.jsp用到了forw

bootstrap中jquery外掛——警告框、工具提示框、彈出框、模態框

bootstrap的JavaScript外掛中提供了幾種形式的提示框。其中就有警告框、工具提示框、彈出框和模態框。下面就來一個一個的看看它們是怎樣使用的吧！ 警告框 它就是這個樣子的，點選右側的小叉子可以將它隱藏。如果不想要淡淡消失的效果可以將 .f

JS元件系列——Bootstrap寒冬暖身篇：彈出框和提示框效果以及程式碼展示

前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，這

Bootstrap彈出框--自定義懸停框標題、內容和樣式

1.Bootstrap彈出框示例 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title=

【學習筆記】Bootstrap外掛 滾動監聽+彈出框+選項卡

--滾動監聽 依賴導航元件步驟：1.寫一個導航元件2.data-target="#test"執行滾動監聽的目標   data-spy="scroll" 向想要監聽的元素 新增滾動監聽 <nav id="test" class="navbar navbar-defa

第二百四十六節，Bootstrap彈出框和警告框插件

popover 事件 png div 數字 ott hid strong selector Bootstrap彈出框和警告框插件 學習要點： 　　1.彈出框 　　2.警告框 本節課我們主要學習一下 Bootstrap 中的彈出框和警告框插件。 一．彈出框 彈

js彈出框、對話框、提示框、彈窗總結

js彈出框、對話框、提示框、彈窗總結一、JS的三種最常見的對話框//====================== JS最常用三種彈出對話框 ======================== //彈出對話框並輸出一段提示信息 function ale() { /

html、css和js原生寫一個模態彈出框，順便解決父元素半透明子元素不透明效果

script javascrip z-index htm index 彈出 rgb 特性 radi 模態框： html部分： <!-- 按鈕 --> <button id="box" onclick="pop_box()">彈出框</