3.2Bootstrap学习组件篇之按钮组

按钮组

用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件,可以设置为单选框或多选框样式及行为。

按钮组中的工具提示和弹出框需要特别的设置

当为.btn-group中的元素应用工具提示或弹出框时,必须指定container: 'body'选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。(这个是毛线?)

基本案例:

把一系列的.btn按钮放入.btn-group

代码段:

预览: 3.2Bootstrap学习组件篇之按钮组_第1张图片

按钮工具栏

把一组

组合进一个
做成更复杂的组件。

代码段:

预览效果:

3.2Bootstrap学习组件篇之按钮组_第2张图片

尺寸

只要给.btn-group加上.btn-group-*,而不是给组中每个按钮都应用大小类。

代码段:

预览效果:

3.2Bootstrap学习组件篇之按钮组_第3张图片


嵌套

想要把下拉菜单混合到一系列按钮中,就把.btn-group放入另一个.btn-group中。

代码段:

嵌套

预览: 3.2Bootstrap学习组件篇之按钮组_第4张图片

垂直排列

让一组按钮竖直显示而不是水平显示。

代码段:

垂直排列



3.2Bootstrap学习组件篇之按钮组_第5张图片

两端对齐的链接排列

让一组按钮拉长为相同的尺寸,适应父元素的宽度。对于按钮组中的按钮下拉菜单也同样适用。

特定元素的用法

这只适用  元素,因为 

预览效果

3.2Bootstrap学习组件篇之按钮组_第6张图片

分裂式按钮下拉菜单

相似地,分裂式按钮下拉菜单也需要同样的改变标记,但只要多一个分开的按钮。

代码段:

分列式按钮下拉菜单

预览:

3.2Bootstrap学习组件篇之按钮组_第7张图片

尺寸

下拉菜单按钮适用所有尺寸的按钮。

代码段:

下拉菜单按钮适合所有尺寸的按钮

预览:

3.2Bootstrap学习组件篇之按钮组_第8张图片

向上弹出式菜单

给父元素添加.dropup就能使触发的下拉菜单在元素上方。

代码段:

预览:

3.2Bootstrap学习组件篇之按钮组_第9张图片

你可能感兴趣的:(web开发--前端框架)