1. 通過按鈕組容器
把一組按鈕放在同一行裡,通過與按鈕外掛程式聯合使用,可以設定成單選框或者多選框的樣式和行為。
注意:按鈕組中的工具提示和彈出框需要特別的設定,當為.btn-group
中的元素應用工具提示或彈出框時,必須指定container: 'body'
選項,這樣可以避免不必要的***(例如工具提示或彈出框觸發時,會讓頁面元素變寬和/或失去圓角)。
2.在使用的過程中如果需要用到一系列按鈕,就可以通過按鈕組來解決這個問題。
3.按鈕的大小:
只要給.btn-group加上.btn-group-*類,就不用給按鈕組中的每個按鈕去賦予尺寸類了。
例如:class=
"btn-group btn-group-lg"
>...
class=
"btn-group"
>...
class=
"btn-group btn-group-sm"
>...
class=
"btn-group btn-group-xs"
>...
4.按鈕的巢狀:
如果想要把下拉列表混合到一系列按鈕中,只需要把.btn-group放入到另乙個.btn-group中就可以了。
5.垂直排列: 按鈕豎著排列。分列式按鈕下拉列表不支援這種方式。
class=
"btn-group-vertical"
>
...
6.兩端對齊的按鈕組(我沒看懂。。。。。。)
7.按鈕式下拉列表:任意乙個按鈕放入.btn-group中,加入適當的選單標籤,就可以讓按鈕作為選單的觸發器了。
外掛程式依賴
按鈕式下拉列表依賴下拉列表外掛程式 ,因此需要將此外掛程式包含在你所使用的 bootstrap 版本中。
8.**式按鈕下拉列表
效果圖:
9.向上彈出式選單。
給父元素新增 .dropup 類就能使觸發的下拉列表朝上方開啟。
class=
"btn-group dropup"
>
type=
"button"
class=
"btn btn-default"
>dropup
type=
"button"
class=
"btn btn-default dropdown-toggle"
data-toggle=
"dropdown"
>
class=
"caret"
>
class=
"sr-only"
>toggle dropdown
參考:
學習筆記9 按鈕組(學習整理)
1.通過按鈕組容器 把一組按鈕放在同一行裡,通過與按鈕外掛程式聯合使用,可以設定成單選框或者多選框的樣式和行為。注意 按鈕組中的工具提示和彈出框需要特別的設定,當為.btn group中的元素應用工具提示或彈出框時,必須指定container body 選項,這樣可以避免不必要的 例如工具提示或彈出...
學習筆記9
函式 函式以def開頭,後面接函式名和括號,然後接冒號 函式的最後接return結束函式,並返回乙個值,可以沒有,就相當於返回none 函式呼叫時直接用函式名加括號 括號內為需要傳入的引數。傳入函式的引數是實參 在函式內使用的大多都為形參 形參只能在函式內使用,函式結束後就自動釋放記憶體了。函式中的...
學習筆記9
今天來進行系統的學習一下css 層疊樣式表 首先說一下層疊次序,四個優先權 1.瀏覽器預設設定 2.外部樣式表 3內部樣式表 位於 內部樣式表 內聯樣式 this is a paragraph 多重樣式 例 h1居中對齊 h1 h1 css的使用 背景 background color backgr...