Bootstrap группа кнопок
Группа кнопок позволяет использовать несколько кнопок, чтобы быть уложены на одной линии. Если вы хотите, чтобы выровнять кнопки вместе, что очень полезно. Вы можете (кнопка) плагин Bootstrap , чтобы добавить дополнительный флажок и стиль поведения окно JavaScript.
В следующей таблице приведены некоторые из наиболее важных класса Bootstrap с помощью кнопок, предоставляемые группой:
| Class | 描述 | 代码示例 |
|---|
| .btn-group | 该 class 用于形成基本的按钮组。在.btn-group中放置一系列带有 class.btn的按钮。 |
<div class="btn-group">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
</div>
|
| .btn-toolbar | 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 |
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
|
| .btn-group-lg, .btn-group-sm, .btn-group-xs | 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 |
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
|
| .btn-group-vertical | 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。 |
<div class="btn-group-vertical">
...
</div>
|
Основные группы кнопок
Следующий пример демонстрирует приведенную выше таблицу , чтобы обсудить использованиекласса .btn-группы:
примеров
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > Кнопка 1 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 2 Кнопка </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 3 Кнопка </ кнопка>
</ Div>
Результаты следующие:
Кнопка на панели инструментов
Следующий пример демонстрирует , приведенную выше таблицу , обсуждаются вклассе .btn-панели для использования:
примеров
<Div класс = "БТН-панели" Роль = "Панель инструментов">
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > Кнопка 1 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 2 Кнопка </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 3 Кнопка </ кнопка>
</ Div>
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 4 Кнопка </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > Кнопка 5 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 6 Кнопка </ кнопка>
</ Div>
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > кнопки 7 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 8 Кнопка </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 9 Кнопка </ кнопка>
</ Div>
</ Div>
Результаты следующие:
Размер кнопки
Следующий пример демонстрирует сказанное выше таблицы длякласса .btn-* Использование - группового:
примеров
<Div класс = "БТН-группа btn- группа-ДЖИ">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > Кнопка 1 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 2 Кнопка </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 3 Кнопка </ кнопка>
</ Div>
<Div класс = "БТН-группа btn- групповой см">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 4 Кнопка </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > Кнопка 5 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 6 Кнопка </ кнопка>
</ Div>
<Div класс = "БТН-группа btn- групповые хз">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > кнопки 7 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 8 Кнопка </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 9 Кнопка </ кнопка>
</ Div>
Результаты следующие:
гнездование
Вы можете вкладывать другой Кнопка группы внутри группы, то есть в пределах.btn-группы гнездо другой .btn-группа.При использовании комбинации ряда кнопок и выпадающих меню, чтобы сделать, это будет использоваться.
примеров
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > Кнопка 1 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 2 Кнопка </ кнопка>
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию ниспадающего -toggle" данных тумблер = "раскрывающимся"> это <пролет класс = "каретка"> </ SPAN>
</ Button>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> выпадающий ссылка 1 </ A> </ li >
<Li> <а HREF = "#"> ссылка выпадающий 2 </ а> </ li >
</ UL>
</ Div>
</ Div>
Результаты следующие:
Вертикальная кнопка группы
Следующий пример демонстрирует сказанное выше таблицы длякласса .btn-группы вертикального использования:
примеров
<Div класс = "БТН-группу по вертикали ">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > Кнопка 1 </ Кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > 2 Кнопка </ кнопка>
<Div класс = "БТН-группу по вертикали ">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию ниспадающего -toggle" данных тумблер = "раскрывающимся"> выпадающий <SPAN класс = "каретка"> </ SPAN>
</ Button>
<Ul класс = "выпадающий меню">
<Li> <а HREF = "#"> выпадающий ссылка 1 </ A> </ li >
<Li> <а HREF = "#"> ссылка выпадающий 2 </ а> </ li >
</ UL>
</ Div>
</ Div>
Результаты следующие:
