📌  相关文章
📜  Bootstrap-按钮组

📅  最后修改于: 2020-10-27 06:12:06             🧑  作者: Mango

 

按钮组允许将多个按钮堆叠在一行上。当您要将诸如对齐按钮之类的项目放在一起时，这很有用。您可以使用Bootstrap Button Plugin添加可选的JavaScript单选和复选框样式行为。

下表总结了Bootstrap提供的使用按钮组的重要类-

Class Description Code Sample
.btn-group This class is used for a basic button group. Wrap a series of buttons with class .btn in .btn-group.
.btn-toolbar This helps to combine sets of
into a
for more complex components.
.btn-group-lg, .btn-group-sm, .btn-group-xs These classes can be applied to button group instead of resizing each button. 
...


...


...
.btn-group-vertical This class make a set of buttons appear vertically stacked rather than horizontally. 

   ...

基本按钮组

以下示例演示了上表中讨论的类.btn-group的使用-

现场演示

按钮工具栏

以下示例演示了上表中讨论的.btn-toolbar类的用法–

现场演示

按键尺寸

以下示例演示了上表中讨论的.btn-group- *类的用法–

现场演示

套料

您可以将按钮组嵌套在另一个按钮组中，即，将.btn-group放置在另一个.btn-group中。当您希望下拉菜单与一系列按钮混合在一起时，可以完成此操作。

现场演示

垂直按钮组

以下示例演示了上表中讨论的.btn-group-vertical类的用法–

现场演示