按鈕組也是一個獨立的元件,按鈕組和下拉式選單元件一樣,需要依賴button.js外掛程式才能正常運作。 把一組 組合進一個做成更複雜的元件。 1 2 3 4 5 6 7 8 9 登入後複製 按鈕下拉式選單僅從外觀上看和下拉式選單效果基本上是一樣的。它們唯一的不同是外部容器div.dropdown換成了div.btn-group 按钮下拉菜单 菜单列表1 菜单列表2 菜单列表3 菜单列表4 菜单列表5 登入後複製 bootstrap.css檔 .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } .btn-group > .btn + .dropdown-toggle { padding-right: 8px; padding-left: 8px; } .btn-group > .btn-lg + .dropdown-toggle { padding-right: 12px; padding-left: 12px; } .btn-group.open .dropdown-toggle { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); } .btn-group.open .dropdown-toggle.btn-link { -webkit-box-shadow: none; box-shadow: none; } 登入後複製 按鈕的向下向上三角形 按鈕的向下三角形,是透過在button標籤中加入span標籤元素,且類別名為.caret 按钮下拉菜单 登入後複製 這個三角形式透過css來實現的,下面是bootstrap.css原始碼: .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } 登入後複製 以上就是本文的全部內容,希望對大家的學習有所幫助。