Bootstrap系列 29 按鈕組

2021-09-07 00:09:33 字數 2496 閱讀 6518

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

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

除了可以使用元素之外,還可以使用其他標籤元素,比如標籤。唯一要保證的是:不管使用什麼標籤,「.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>

Bootstrap系列 32 按鈕垂直分組

實際運用當中,總會碰到垂直顯示的效果。在bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的 btn group 類名換成 btn group vertical 即可。div class btn group vertical button class btn btn default t...

Bootstrap系列 33 等分按鈕

等分按鈕也常被稱為是自適應分組按鈕,其實現方法也非常的簡單,只需要在按鈕組 btn group 上追加乙個 btn group justified 類名.div class btn wrap div class btn group btn group justified a class btn bt...

Bootstrap筆記 按鈕

確定要刪除嗎?修改內容 修改內容 修改內容 修改內容 btn 是按鈕樣式的基類,在新增其他樣式前,必須先新增btn btn primary btn default btn success btn warning btn danger active 啟用 設定按鈕大小 btn lg btn md bt...