JS組件Bootstrap按鈕組與下拉按鈕詳解

    這篇文章主要為大家介紹了JS組件Bootstrap按鈕組與下拉按鈕的相關資料，感興趣的小伙伴們可以參考一下
    本文先為大家分享按鈕組的使用方法，具體內(nèi)容如下
    一、按鈕組（Button Groups）
    1、單個按鈕組
    用.btn-group封裝多個帶.btn的<button>
    <div> 
     <button>1</button> 
     <button>2</button> 
     <button>3</button> 
    </div> 
    2、多個按鈕組
    將多個<div>放進<div>中。
    <div> 
     <div> 
      ... 
     </div> 
     <div> 
      ... 
     </div> 
    </div>
    3、垂直按鈕組
    向.btn-group添加.btn-group-vertical。
    <div> 
     ... 
    </div>
    二、下拉按鈕（Button Dropdowns）
    例子
    <div> 
     <a data-toggle="dropdown" href="#"> 
      Action 
      <span></span> 
     </a> 
     <ul> 
      <!-- dropdown menu links -->
     </ul> 
    </div> 
    1、控制大小
    同樣使用.btn-large、.btn-small、.btn-mini控制大小。
    2、分割的下拉按鈕
    <div> 
     <button>Action</button> 
     <button data-toggle="dropdown"> 
      <span></span> 
     </button> 
     <ul> 
      <!-- dropdown menu links -->
     </ul> 
    </div> 
    3、向上出現(xiàn)的菜單
    <div> 
     <button>Dropup</button> 
     <button data-toggle="dropdown"> 
      <span></span> 
     </button> 
     <ul> 
      <!-- dropdown menu links -->
     </ul> 
    </div> 
    三、JavaScript
    例子
    加載狀態(tài)。添加data-loading-text="Loading..."。
    代碼如下:
    <button type="button" data-loading-text="Loading...">Loading state</button> 
    開關狀態(tài)。添加data-toggle="button"。
    代碼如下:
    <button type="button" data-toggle="button">Single Toggle</button>
    復選框。在btn-group后添加data-toggle="buttons-checkbox"。
    <div data-toggle="buttons-checkbox"> 
     <button type="button">Left</button> 
     <button type="button">Middle</button> 
     <button type="button">Right</button> 
    </div> 
    單選。在btn-group后添加data-toggle="buttons-radio"。
    <div data-toggle="buttons-radio"> 
     <button type="button">Left</button> 
     <button type="button">Middle</button> 
     <button type="button">Right</button> 
    </div>
    用法
    JavaScript代碼觸發(fā)開關狀態(tài)。
    $().button("toggle")  
    也可添加data-toggle屬性自動觸發(fā)。
    <button type="button" data-toggle="button" >…</button> 
    使用JavaScript代碼觸發(fā)加載狀態(tài)，同時按鈕顯示data-loading-text屬性指定的值。
    $().button("loading")  
    <button type="button" data-loading-text="loading stuff..." >...</button>  
    注意：Firefox在頁面載入時會保持按鈕無效狀態(tài)。變通方案是在按鈕上應用autocomplete="off"。
    使用JavaScript代碼重置按鈕狀態(tài)。
    $().button("reset") 
    重置按鈕狀態(tài)，并將按鈕文字變成指定的文字。下例的complete僅為例子，可以替換。
    <button data-complete-text="finished!" >...</button> 
    <script> 
     $('.btn').button('complete') 
    </script>
    以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。