<source id="zl0zm"></source>
  • <i id="zl0zm"></i>

    <wbr id="zl0zm"></wbr>
  • JavaScript插件

    Bootstrap自帶了13個jQuery插件,這些插件為Bootstrap中的組件賦予了“生命”。

    引入單個插件還是一次性引入所有插件

    每個插件都可以單獨的引入到頁面中(注意插件間的依賴關系),或者一次性引入。bootstrap.jsbootstrap.min.js 文件都將所有插件包含在一個文件中了(前者是未壓縮版,后者是壓縮版)。

    Data 屬性

    你可以僅僅通過data屬性API就能使用所有Bootstrap中的插件,而且不用寫一行JavaScript代碼。這是Bootstrap中的一等API,并且是你的首選方式。

    特殊情況是,在某些情況下可能需要特意禁用這種默認動作。因此,我們特地提供了禁用data屬性API的方式,通過解除綁定在body上的被命名為`'data-api'`的事件即可實現。如下所示:

    $('body').off('.data-api')

    還可以解除特定插件的事件綁定,只要將插件名和data-api鏈接在一起作為參數使用。如下所示:

    $('body').off('.alert.data-api')

    編程API

    我們同時為所有Bootstrap插件提供了JavaScript API。所有公開的API都可以單獨或鏈式調用,均返回其所操作的集合(和jQuery的API一致)。

    $(".btn.danger").button("toggle").addClass("fat")

    所有方法均可接受一個可選的參數對象、一個對此方法有特定意義的字符串或者什么也不傳(即用默認參數初始化此插件):

    $("#myModal").modal()                       // initialized with defaults
    $("#myModal").modal({ keyboard: false })   // initialized with no keyboard
    $("#myModal").modal('show')                // initializes and invokes show immediately

    每個插件都通過`Constructor` 屬性暴露了其原始的構造函數:$.fn.popover.Constructor。如果你想獲得某個特定插件的實例,可以直接從頁面元素中獲取:$('[rel=popover]').data('popover').

    避免沖突

    如果你需要將Bootstrap插件和其它UI框架一同使用。在這種情況下,隨時都會導致命名空間沖突。如果這種情況發生了,你可以通過調用插件的 .noConflict 函數恢復其原始值。

    var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
    $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
    

    事件

    Bootstrap對多數插件的獨有行為提供了自定義事件。 一般而言,這些事件都是以(英語)動詞的原型和過去分詞形式來表示的 - 動詞原形形式的(例如: show) 在事件執行之前觸發;過去分詞形式的(例如:shown) 在動作執行完畢后觸發。

    所有動詞原形形式的事件都提供了preventDefault函數。這能在動作執行之前使其停止。

    $('#myModal').on('show', function (e) {
        if (!data) return e.preventDefault() // stops modal from being shown
    })
    

    關于過渡效果

    對于簡單的過度效果,只要在引入其它JS文件時一同引入bootstrap-transition.js文件即可。如果你引入的是編譯(或壓縮)之后的bootstrap.js文件,就不再需要引入此文件了,因為bootstrap.js文件已經包含了此插件。

    使用案例

    過渡效果插件的使用案例:

    • 具有幻燈片或淡入效果的對話框
    • 具有淡出效果的標簽頁
    • 具有淡出效果的警告框
    • 具有幻燈片效果的輪播板

    案例

    模態對話框是一類簡潔、靈活的的彈框,他們具有精簡的功能和友好的默認行為。

    靜態案例

    帶有標題、正文、頁腳按鈕的對話框。

    <div class="modal hide fade">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>對話框標題</h3>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn">關閉</a>
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div>
    

    動態演示

    點擊下面的按鈕會通過javascript觸發一個模態對話框。對話框從頁面頂端滑下的同時逐漸呈現。

    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">查看演示案例</a>
    
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">關閉</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
    

    調用方式

    通過data屬性

    無需編寫JavaScript代碼即可生成一個對話框。在一個主控元素,例如按鈕,上設置data-toggle="modal",然后再設置data-target="#foo"href="#foo" 用以指向某個將要被啟動的對話框。

    <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

    通過JavaScript

    僅用一行JavaScript代碼即可啟動id為myModal的對話框:

    $('#myModal').modal(options)

    選項

    上面的選項都可以通過data屬性或JavaScript代碼傳遞給組件。對于data屬性,將選項名稱附著于data-字符串之后,就像data-backdrop=""一樣。

    名稱 類型 默認值 描述
    backdrop boolean true 為模態對話框添加一個背景元素。另外,為背景指定static時,點擊模態對話框的外部區域不會將其關閉。
    keyboard boolean true 按下esc鍵時關閉模態對話框
    show boolean true 初始化時即顯示模態對話框
    remote path false

    如果提供了遠程url地址,就會通過 jQuery的load方法加載內容并注入到.modal-body中。如果你使用的是data屬性api,你還可以使用href標簽指定遠程數據源。案例如下:

    <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

    方法

    .modal(options)

    讓你指定的內容變成一個模態對話框。接受一個可選的參數object.

    $('#myModal').modal({
      keyboard: false
    })
    

    .modal('toggle')

    手動打開或隱藏一個模態對話框。

    $('#myModal').modal('toggle')

    .modal('show')

    手動打開一個模態對話框。

    $('#myModal').modal('show')

    .modal('hide')

    手動隱藏一個模態對話框。

    $('#myModal').modal('hide')

    事件

    Bootstrap中的模態對話框對外暴露了一些事件允許你監聽。

    事件 描述
    show show方法被調用時,此事件將被立即觸發。
    shown 當模態對話框呈現到用戶面前時(會等待過渡效果執行結束)此事件被觸發。
    hide hide方法被調用時,此事件被立即觸發。
    hidden 當模態對話框被隱藏(而且過渡效果執行完畢)之后,此事件將被觸發。
    $('#myModal').on('hidden', function () {
      // do something…
    })
    

    用在導航條上

    ScrollSpy插件根據滾動的位置自動更新導航條中相應的導航項。拖動下面區域的滾動條,使其低于導航條的位置,注意觀察active類的變化。下拉菜單中的子項也會跟著變為高亮狀態。

    @fat

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    @mdo

    Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

    one

    Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

    two

    In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

    three

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


    調用方式

    通過data屬性

    只需將data-spy="scroll"添加到被監聽的頁面元素上(大部分情況是添加到body上),然后將data-target=".navbar"添加到導航部分,僅此而已,頂部導航條就擁有了監聽滾動的功能。你可能希望將滾動監聽應用到.nav組件上。

    <body data-spy="scroll" data-target=".navbar">...</body>

    通過JavaScript

    通過JavaScript啟動滾動監聽:

    $('#navbar').scrollspy()
    注意! 必須為導航條中的鏈接指定相應的目標id。例如,<a href="#home">home</a>必須和dom中類似<div id="home"></div>的頁面元素相呼應。

    方法

    .scrollspy('refresh')

    當滾動監聽所作用的DOM有增刪頁面元素的操作時,需要調用下面的refresh方法:

    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this).scrollspy('refresh')
    });
    

    選項

    所有參數都可以通過data屬性或JavaScript傳遞。對于data屬性,將參數名附著到data-后面,就像data-offset=""一樣。

    名稱 類型 默認值 描述
    offset number 10 Pixels to offset from top when calculating position of scroll.

    事件

    事件 描述
    activate 每當新條目被激活時,此事件被觸發。

    案例

    Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

    Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


    調用方式

    通過JavaScript啟動標簽頁(每個標簽都需要被單獨激活):

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

    你可以通過多種方式激活標簽頁:

    $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
    $('#myTab a:first').tab('show'); // Select first tab
    $('#myTab a:last').tab('show'); // Select last tab
    $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
    

    標記

    無需寫任何JavaScript代碼,只需簡單的為頁面元素指定data-toggle="tab"data-toggle="pill"屬性即可激活標簽頁或膠囊式標簽頁。為ul添加navnav-tabs classe,即可為其添加Bootstrap的標簽頁樣式。

    <ul class="nav nav-tabs">
      <li><a href="#home" data-toggle="tab">首頁</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>

    方法

    $().tab

    激活某個標簽頁和對應的內容容器。應當為標簽頁指定data-targethref用以標記DOM樹中的目標容器節點。

    <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a href="#home">首頁</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#messages">Messages</a></li>
      <li><a href="#settings">Settings</a></li>
    </ul>
    
    <div class="tab-content">
      <div class="tab-pane active" id="home">...</div>
      <div class="tab-pane" id="profile">...</div>
      <div class="tab-pane" id="messages">...</div>
      <div class="tab-pane" id="settings">...</div>
    </div>
    
    <script>
      $(function () {
        $('#myTab a:last').tab('show');
      })
    </script>
    

    事件

    事件 描述
    show 當標簽頁顯示之前將觸發此事件。使用event.targetevent.relatedTarget分別定位當前活動標簽頁和上一次的活動標簽頁(如果有的話)。
    shown 當標簽頁顯示出來之后,此事件將被觸發。使用event.targetevent.relatedTarget分別定位當前活動標簽頁和上一次的活動標簽頁(如果有的話)。
    $('a[data-toggle="tab"]').on('shown', function (e) {
      e.target // activated tab
      e.relatedTarget // previous tab
    })
    

    案例

    本插件受到Jason Frame開發的jQuery.tipsy插件的啟發。Tooltips做了很多改進,例如不需要依賴圖片,而是改用CSS3實現動畫效果,用data屬性存儲標題信息。

    出于性能方面的考慮,工具提示和彈出提示的data屬性API是選擇性加入的,也即是說你必要自己初始化他們

    將鼠標停懸在下面的鏈接上查看工具提示:

    Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

    四個方向

    輸入框組中的工具提示

    將工具提示和彈出提示與Bootstrap中的輸入框組一同使用時,為了避免不必要的影響,你需要設置container(文檔如下):


    調用方式

    通過JavaScript觸發工具提示:

    $('#example').tooltip(options)

    選項

    可以通過data屬性或JavaScript傳遞參數。對于data屬性,將參數名附著到data-后面即可,例如, data-animation=""

    名稱 類型 默認值 描述
    animation boolean true apply a css fade transition to the tooltip
    html boolean false Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
    placement string | function 'top' how to position the tooltip - top | bottom | left | right
    selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
    title string | function '' default title value if `title` tag isn't present
    trigger string 'hover focus' how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.
    delay number | object 0

    delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

    If a number is supplied, delay is applied to both hide/show

    Object structure is: delay: { show: 500, hide: 100 }

    container string | false false

    Appends the tooltip to a specific element container: 'body'

    注意! 可以針對單個工具提示指定單獨的data屬性。

    標記

    <a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>

    方法

    $().tooltip(options)

    對一組頁面元素綁定一個工具提示處理器。

    .tooltip('show')

    彈出某個頁面元素的工具提示。

    $('#element').tooltip('show')

    .tooltip('hide')

    隱藏某個頁面元素的工具提示。

    $('#element').tooltip('hide')

    .tooltip('toggle')

    打開或隱藏某個頁面元素的工具提示。

    $('#element').tooltip('toggle')

    .tooltip('destroy')

    隱藏并銷毀某個頁面元素的工具提示。

    $('#element').tooltip('destroy')

    案例

    下面

    對任意頁面元素添加一個覆蓋層展示額外信息,就行iPad中的類似功能。將鼠標懸停在下面的按鈕上即可觸發一個彈出提示。必須先引入 工具提示 插件

    靜態彈出提示

    有4個可選參數:top、right、bottom和left 對其方式。

    Popover top

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Popover right

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Popover bottom

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Popover left

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    No markup shown as popovers are generated from JavaScript and content within a data attribute.

    動態演示

    Four directions


    調用方式

    通過JavaScript啟用彈出提示:

    $('#example').popover(options)

    選項

    可以通過data屬性或JavaScript傳遞參數。對于data屬性,將參數名附著到data-之后,例如data-animation=""

    名稱 類型 默認值 描述
    animation boolean true apply a css fade transition to the tooltip
    html boolean false Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
    placement string | function 'right' how to position the popover - top | bottom | left | right
    selector string false if a selector is provided, tooltip objects will be delegated to the specified targets
    trigger string 'click' how popover is triggered - click | hover | focus | manual
    title string | function '' default title value if `title` attribute isn't present
    content string | function '' default content value if `data-content` attribute isn't present
    delay number | object 0

    delay showing and hiding the popover (ms) - does not apply to manual trigger type

    If a number is supplied, delay is applied to both hide/show

    Object structure is: delay: { show: 500, hide: 100 }

    container string | false false

    Appends the popover to a specific element container: 'body'

    Heads up! Options for individual popovers can alternatively be specified through the use of data attributes.

    標記

    For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

    方法

    $().popover(options)

    對一組頁面元素初始化彈出提示。

    .popover('show')

    打開某個頁面元素的彈出提示。

    $('#element').popover('show')

    .popover('hide')

    隱藏某個頁面元素的彈出提示。

    $('#element').popover('hide')

    .popover('toggle')

    打開或隱藏某個頁面元素的彈出提示。

    $('#element').popover('toggle')

    .popover('destroy')

    隱藏并銷毀某個頁面元素的彈出提示。

    $('#element').popover('destroy')

    警告框案例

    利用此插件對所有警告消息添加取消功能。

    Holy guacamole! Best check yo self, you're not looking too good.

    Oh snap! You got an error!

    Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

    Take this action Or do this


    調用方式

    通過JavaScript為某個警告框添加取消功能:

    $(".alert").alert()

    標記

    僅需將data-dismiss="alert"添加到關閉按鈕即可自動賦予某個警告框關閉的功能。

    <a class="close" data-dismiss="alert" href="#">&times;</a>

    方法

    $().alert()

    賦予所有警告框以關閉功能。如果你希望警告框在關閉時帶有動畫效果,請確保.fade.in類已經應用到這些警告框上了。

    .alert('close')

    關閉某個警告框。

    $(".alert").alert('close')

    事件

    Bootstrap中的警告框對外暴露了一些事件允許你監聽。

    事件 描述
    close close方法被調用時,此事件被立即觸發。
    closed 當警告框被關閉后(將會等到css過渡效果執行結束),此事件被觸發。
    $('#my-alert').bind('closed', function () {
      // do something…
    })
    

    使用案例

    按鈕可以實現很多功能。為工具條(toolbar)之類的組件賦予控制按鈕的狀態或者創建一組按鈕的功能。

    狀態

    添加data-loading-text="正在加載"可以為按鈕設置正在加載狀態。

    <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

    選中

    添加data-toggle="button"可以激活單個按鈕的選中狀態。

    <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>

    復選

    添加data-toggle="buttons-checkbox"可以為按鈕組添加復選框樣式的勾選風格。

    <div class="btn-group" data-toggle="buttons-checkbox">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
    </div>
    

    單選

    添加data-toggle="buttons-radio"為按鈕組添加單選框樣式的選中風格。

    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
    </div>
    

    調用方式

    通過JavaScript激活按鈕:

    $('.nav-tabs').button()

    標記

    按鈕插件的Data屬性是完整的。通過下面的案例可以看到各種類型的標記。

    選項

    方法

    $().button('toggle')

    Toggles push state. Gives the button the appearance that it has been activated.

    Heads up! You can enable auto toggling of a button by using the data-toggle attribute.
    <button type="button" class="btn" data-toggle="button" >…</button>

    $().button('loading')

    Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

    <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
    Heads up! Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".

    $().button('reset')

    Resets button state - swaps text to original text.

    $().button(string)

    Resets button state - swaps text to any data defined text state.

    <button type="button" class="btn" data-complete-text="finished!" >...</button>
    <script>
      $('.btn').button('complete')
    </script>
    

    關于

    給可折疊的組件,如手風琴式的切換和導航,提供基本和靈活的樣式。

    * 需要包含過渡效果插件。

    案例

    通過折疊插件,我們可以創建一個簡單的手風琴式的組件:

    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    <div class="accordion" id="accordion2">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
    </div>
    ...
    

    使用此插件時可以無需寫任何標記。讓按鈕控制另一個元素進行展開和折疊。

    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
      simple collapsible
    </button>
    
    <div id="demo" class="collapse in"> … </div>
    

    調用方式

    通過data屬性

    Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

    To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

    通過JavaScript

    手動調用:

    $(".collapse").collapse()

    選項

    項的傳遞可通過data屬性或JavaScript。對于data屬性,需要附加選項名稱data-,例如data-parent=""

    名稱 類型 默認值 描述
    parent selector false If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
    toggle boolean true Toggles the collapsible element on invocation

    方法

    .collapse(options)

    Activates your content as a collapsible element. Accepts an optional options object.

    $('#myCollapsible').collapse({
      toggle: false
    })
    

    .collapse('toggle')

    Toggles a collapsible element to shown or hidden.

    .collapse('show')

    Shows a collapsible element.

    .collapse('hide')

    Hides a collapsible element.

    事件

    Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

    事件 描述
    show This event fires immediately when the show instance method is called.
    shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
    hide This event is fired immediately when the hide method has been called.
    hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
    $('#myCollapsible').on('hidden', function () {
      // do something…
    })

    案例

    簡單,易于擴展,可迅速地為表單中的文本輸入框創建優雅的輸入提示。

    <input type="text" data-provide="typeahead">

    需要設置autocomplete="off"以阻止瀏覽器的默認提示菜單遮蓋Bootstrap的輸入提示下拉菜單。


    調用方式

    通過data屬性

    通過添加data屬性給頁面元素注冊輸入提示功能,就像上面的案例一樣。

    通過JavaScript

    手動調用輸入提示:

    $('.typeahead').typeahead()

    選項

    可以通過data屬性或JavaScript傳遞參數。對于data屬性,將參數名附著到data-之后,例如data-source=""

    名稱 類型 默認值 描述
    source array, function [ ] 用于查詢的數據源。可以是一個字符串數組或是一個函數。函數會接收到兩個參數,分別是輸入域中的 query值和process回調函數。函數可能會被同步調用,直接返回數據源;或者異步調用,通過process回調函數的唯一一個參數。
    items number 8 下拉菜單中顯示的最大的條目數。
    minLength number 1 觸發提示所需的最小字符個數。
    matcher function case insensitive 該函數用于決定某個查詢是否匹配某個條目。它接受唯一一個參數item,表示當前需要測試的條目。 使用this.query引用當前查詢字符串。如果匹配查詢,就返回一個布爾值true
    sorter function exact match,
    case sensitive,
    case insensitive
    該函數用來排序提示項。它接受唯一一個參數items,并且其變量范圍在typeahead實例內。使用this.query引用當前查詢字符串。
    updater function returns selected item 此方法用于返回選中的條目。其接受一個參數item,并且其變量范圍在typeahead實例內。
    highlighter function highlights all default matches 該函數用來高亮自動完成的結果。 它接受唯一一個參數item,并且變量范圍在typeahead實例內。應該返回html。

    方法

    .typeahead(options)

    為輸入框初始化輸入提示功能。

    案例

    本頁面左側就是一個附加導航的實際案例。


    調用方式

    通過data屬性

    只需添加data-spy="affix"到任意需要監聽的頁面元素上,就可以很容易的將其變為附加導航。然后使用偏移量來控制其位置。

    <div data-spy="affix" data-offset-top="200">...</div>
    注意! 你必須管理一個固定元素的位置和它的父級的行為。通過affixaffix-topaffix-bottom進行位置控制。因為它的正常流程是通過頁面的內頁移動來確定的,所以使用該插件時,要檢查一下父級是否是切換模式。

    通過JavaScript

    通過JavaScript啟動:

    $('#navbar').affix()

    選項

    選項的傳遞可通過數據屬性或JavaScript. 對于數據屬性, 需要附加選項名稱 data-,例如data-offset-top="200"

    名稱 類型 默認值 描述
    offset number | function | object 10 計算從頂部到滾動的位置的偏移(像素). 如果設置了一個數字, 該偏移量的值將被應用在頂部和左方向. 如果要設置一個方向或者多個方向的偏移量, 只需提供一個對象offset: { x: 10 }。該函數可以讓你動態的提供一個偏移量(對于一些響應式設計很有用)。
    主播福利