Bootstrap系列 -- 29. 按鈕組

賀臣發表於2015-06-26
boot

 

　　單個按鈕在Web頁面中的運用有時候並不能滿足我們的業務需求，常常會看到將多個按鈕組合在一起使用，比如富文字編輯器裡的一組小圖示按鈕等

　　按鈕組和下拉選單元件一樣，需要依賴於button.js外掛才能正常執行。不過我們同樣可以直接只呼叫bootstrap.js檔案。因為這個檔案已整合了button.js外掛功能。對於結構方面，非常的簡單。使用一個名為“btn-group”的容器，把多個按鈕放到這個容器中。

　　除了可以使用<button>元素之外，還可以使用其他標籤元素，比如<a>標籤。唯一要保證的是：不管使用什麼標籤，“.btn-group”容器裡的標籤元素需要帶有類名“.btn”

　　注意:

　　1、預設所有按鈕都有圓角

　　2、除第一個按鈕和最後一個按鈕（下拉按鈕除外），其他的按鈕都取消圓角效果

　　3、第一個按鈕只留左上角和左下角是圓角

　　4、最後一個按鈕只留右上角和右下角是圓角

<div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>

 

相關文章