第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

data-offset-top=125 當(dāng)頁面向上滾動(dòng)超過125時(shí) ul則不會跟著頁面繼續(xù)滾動(dòng)。

nav-tabs.affix {top：30px} ?則是定義ul的頁面位置。

前者是設(shè)置滾動(dòng)距離，后者是頁面top距離

模態(tài)彈出框（Modals）

<!-- 按鈕觸發(fā)模態(tài)框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態(tài)框</button>

• data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用于打開模態(tài)窗口。

• data-target="#myModal"，您想要在頁面上加載的模態(tài)框的目標(biāo)

  <!-- 模態(tài)框（Modal） -->

  <div class="modal fade"? id="myModal"? tabindex="-1" role="dialog"? aria-labelledby="myModalLabel"?aria-hidden="true">? ?

• modal fade?當(dāng)模態(tài)框被切換時(shí)，它會引起內(nèi)容淡入淡出。

• aria-labelledby="myModalLabel"，該屬性引用模態(tài)框的標(biāo)題。

• aria-hidden="true"?用于保持模態(tài)窗口不可見，直到觸發(fā)器被觸發(fā)為止（比如點(diǎn)擊在相關(guān)的按鈕上）。
  

  ?<div class="modal-dialog"> ?

  ?<div class="modal-content"> ? ? ? ?

  ? ?<div class="modal-header">? ? ? ?

? ? ? ?<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>?

• data-dismiss="modal"，是一個(gè)自定義的 HTML5 data 屬性。在這里它被用于關(guān)閉模態(tài)窗口。

• class="close"，close 是一個(gè) CSS class，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式。

? ? ? ? ? ?<h4 class="modal-title" id="myModalLabel">模態(tài)框（Modal）標(biāo)題</h4> ? ? ? ??

? ?</div>? ? ? ??

? ? <div class="modal-body">在這里添加一些文本</div> ? ??

? ? ? ?<div class="modal-footer"> ? ? ? ? ?

?? ? ?<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button> ? ? ? ? ??

? ? ?<button type="button" class="btn btn-primary">提交更改</button> ?

?? ? ? ? ?</div>?

?? ? ? ?</div>

?</div>?

? </div>

Affix 插件可以對任何元素進(jìn)行固定定位，其中比較簡單的方法，就是通過自定義屬性 data 來觸發(fā)。其主要包括兩個(gè)參數(shù)：<br> <br> 1、data-spy：取值 affix，表示元素固定不變的。<br> <br> 2、data-offset：整數(shù)值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top 和 data-offset-bottom。<br> <br> data-offset-top 用來設(shè)置元素距離頂部的距離。比如 90，表示元素距離頂部 90px，當(dāng)用戶從頂部向下拖動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)的距離大于 90px 時(shí)，affix 元素不再滾動(dòng)，就會固定在瀏覽器窗口頂部。<br> data-offset-bottom 剛好與 data-offset-top 相反。<br> 具體使用如下：<br> <br> <div data-spy="affix" data-offset="90">affix元素</div><br> 分開設(shè)置 data-offset 值方式：<br> <br> <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div> 請?jiān)趯捚聊Ｊ较虏榭葱Ч?。?jù)我測試下來，使用聲明式，就算設(shè)置了 data-offset-top 的值也會失效，需要在樣式中給 affix 設(shè)置一個(gè)top值，與 data-offset-top 值相等。data-offset-bottom一樣。

按鈕狀態(tài)切換 使用 data-toggle 屬性還可以激活按鈕的行為狀態(tài)，實(shí)現(xiàn)在激活和未激活之間進(jìn)行狀態(tài)切換。例如，下面代碼可以激活按鈕行為特性，單擊時(shí)將按鈕激活，再單擊可以讓按鈕恢復(fù)到默認(rèn)狀態(tài)： <button type="button" data-toggle="button" class="btn btn-primary">確認(rèn)</button>

使用按鈕組來模擬復(fù)選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義data-toggle="buttons"來實(shí)現(xiàn)。唯一不同的是，將input[type="radio"]換成input[type="checkbox"]

模擬單選擇按鈕是通過一組按鈕來實(shí)現(xiàn)單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設(shè)計(jì)更具個(gè)性化，可以定制出更美觀的單選按鈕組。

可以通過按鈕組自定義屬性"data-toggle="buttons">，如下代碼：

<div class="btn-group" data-toggle="buttons">

? ? ? ? <label for="male" class="btn btn-primary">

? ? ? ? ? ? <input type="radio" name="options" id="male">男

? ? ? ? </label>

? ? ? ? <label for="female" class="btn btn-primary">

? ? ? ? ? ? <input type="radio" name="options" id="female">女

? ? ? ? </label>

? ? ? ? <label for="unknow" class="btn btn-primary">

? ? ? ? ? ? <input type="radio" name="options" id="unknow">未知

? ? ? ? </label>

? ? ? ??

? ? </div>

JavaScript觸發(fā)警告框 $(function(){ ? ?$("#close").on("click",function(){ ? ? ? ?$(this).alert("close"); ? ?}); });

關(guān)閉按鈕不在 div.alert 容器內(nèi)時(shí)，只要給關(guān)閉元素定義了data-target屬性（如果是鏈接元素還可以通過href屬性）,而且屬性值與div.alert容器的id一致，關(guān)閉元素放在容器外也可以關(guān)閉警告框。來看一個(gè)簡單的示例： <div class="alert alert-warning" role="alert" id="myAlert"> ? ?<h4>謹(jǐn)防被騙</h4> ? ?<p>請確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識的人...</p> </div> <button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">關(guān)閉</button>

觸發(fā)警告框，需要在關(guān)閉按鈕上設(shè)置自定義屬性data-dismiss="alert"。

從之前的學(xué)習(xí)可知，彈出框中HTML自定義的 data 屬性和提示框中的自定義的 data 屬性基本相同，只不過在其基礎(chǔ)上增加了一個(gè) data-content 屬性，用來設(shè)置彈出框的內(nèi)容。其實(shí)兩插件也有略微的不同： 提示框 tooltip 的默認(rèn)觸發(fā)事件是 hover 和 focus，而彈出框 popover 是 click 提示框 tooltip 只有一個(gè)內(nèi)容(title)，而彈出框不僅可以設(shè)置標(biāo)題（title）還可以設(shè)置內(nèi)容(content) 兩個(gè)插件的顯示模板不同： 提示框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框架中觸發(fā)彈出框和提示框一樣不能直接通過HTML的自定義data屬性來觸發(fā)。需要依賴于JavaScript腳本。 最簡單的觸發(fā)方式如下： html代碼： <button type="button" ? ? ? ?class="btn btn-default" ? ? ? ?data-toggle="popover" ? ? ? ?data-placement="left" ? ? ? ?title="提示框居左" ? ? ? ?data-content="我是彈出框的內(nèi)容"> ? ? ? ?猛擊我吧 </button> js代碼： $(function(){ ? ?$('[data-toggle="popover"]').popover(); }); 注意：上面這種方法注意要使用 data- 設(shè)置彈出框的屬性。 使用JS設(shè)置參數(shù)： html代碼： <button type="button" ? ? ? ? ?class="btn btn-default" ? ? ? ? ?id="myPopover"> ? ? ? ? ?猛擊我吧 </button> 除此之外，也可以單獨(dú)指定一個(gè)元素，在該元素上調(diào)用提示框，并且可能通過JavaScript的各種參數(shù)來實(shí)現(xiàn)，無需定義一些data屬性，如： $(function(){ ? ?$('#myPopover').popover({ ? ? ? ?title:"我是彈出框的標(biāo)題", ? ? ? ?content:"我是彈出框的內(nèi)容", ? ? ? ?placement:"top" ? ?}); })

彈出框(Popover)僅從外表上看，和前面介紹的提示框（Tooltip）長得差不多， 不同的是：彈出框除了有標(biāo)題 title 以外還增加了內(nèi)容 content 部分。這個(gè)在提示框中是沒有的。 <script> $(function(){ ?$('#myPopover').popover({ ? ? title:"我是彈出框的標(biāo)題", ? ? content:"我是彈出框的內(nèi)容", ? ? placement:"right" ?}); }); </script>

Bootstrap框架中的提示框的觸發(fā)方式和前面介紹的插件略有不同。不能直接通過自定義的屬性 data- 來觸發(fā)。必須得依賴于JavaScript的代碼觸發(fā)。其代碼如下：

<a class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="我是一個(gè)提示框，我在頂部出現(xiàn)">我是提示框1</a>

<script>

? ? ? ? $(function(){

? ? ? ? ? ? $('[data-toggle]').tooltip();

? ? ? ? })

? ? </script>