Группа кнопок также является независимым компонентом. Группа кнопок такая же, как и компонент раскрывающегося меню, и должна полагаться на плагин кнопки.
Объедините группу <div> в один <div>, чтобы сделать более сложные компоненты.
<div role="toolbar"> <div> <button type="button">1</button> <button type="button">2</button> <button type="button">3</button> <button type="button">4</button> <button type="button">5</button> <button type="button">5</button> <button type="button">6</button> </div> <div> <button type = "button"> 7 </button> <button Type = "Button"> 8 </button> </div> <div> <button Type = "Button"> 9 </button> </div> </div>
Раскрывающееся меню кнопок выглядит только как раскрывающееся меню. Единственное различие между ними заключается в том, что внешний контейнер div.dropdown заменяется div.btn-group
<div> <Кнопка Data-toggle = "Выпадение"> раскрывающееся меню кнопки <pran> </span> </button> <ul> <li> <a href = "#"> Список меню 1 </a> </li> <li> <a href = "#"> Список меню 2 </a> </li> <li> <a Href = "#" href = "#"> Список меню 4 </a> </li> <li> <a href = "#"> Список меню 5 </a> </li> </ul> </div>
file bootstrap.css
.btn-group .dropdown-toggle: active, .btn-group.open .dropdown-toggle {upline: 0;}. btn-group> .btn + .dropdown-toggle {padding-right: 8px; Накладки-левые: 8px;}. Btn-Group> .btn-lg + .dropdown-toggle {adding-right: 12px; Ladding-left: 12px;}. Btn-group.open .dropdown-toggle {-webkit-box-shadow: вставка 0 3px 5px rgba (0, 0, 0, .125); Box-Shadow: вставка 0 3px 5px rgba (0, 0, 0, .125);}. Btn-group.open .dropdown-toggle.btn-link {-webkit-box-shadow: none; Box-Shadow: нет;}Вниз вверх треугольник кнопки
Нисходящий треугольник кнопки - добавление элемента тега SPAN в тег кнопки, а имя класса - .CARET
<Кнопка данных toggle = "Выпадающая"> раскрывающееся меню кнопки <pran> </span> </button>
Эта форма треугольника реализована через CSS. Ниже приведен исходный код bootstrap.css:
.caret {Display: Inline Block; Ширина: 0; высота: 0; Полевая левая: 2PX; Вертикальная атака: средняя; Пограничная топ: 4PX твердый; граница правая: 4px твердое прозрачное; РЕМЖА СЛЕДУ: 4PX SOLID TRASPANT;}Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.