按钮可以说是使用频率最高的交互组件之一了,Bootstrap框架对按钮也非常重视,提供了多种样式强化类。同时还提供了按钮组,可以组合使用按钮,更加方便。
2. 按钮的使用 2.1 设置Bootstrap按钮在Bootstrap框架下,只需要为按钮添加.btn类,然后添加.btn-default类,即可创建Bootstrap样式的按钮。
注意Bootstrap可以将
示例代码:
button按钮
a按钮
对应效果:
Bootstrap提供了4中按钮大小,通过为按钮添加表示大小的类即可实现,这些类包括.btn-lg、.btn-sm、.btn-xs。
示例代码:
默认按钮
lg按钮
sm按钮
xs按钮
对应效果:
Bootstrap还提供了设置按钮颜色样式的类,包括:
- btn-default:白色标准按钮
- btn-primary:蓝色按钮,表示首选意义
- btn-info:淡蓝色按钮,表示提示意义
- btn-success:绿色按钮,表示成功意义
- btn-warning:黄色按钮,表示警告意义
- btn-danger:红色按钮,表示危险意义
- btn-link:样式看起来是一个链接
示例代码:
default
primary
info
success
warning
danger
link
对应效果:
通过为按钮组添加.btn-group类的包围元素,即可设置按钮组。
示例代码:
篮球
足球
乒乓球
对应效果:
可以通过btn-group-lg、btn-group-sm、btn-group-xs类调整按钮组大小。
示例代码:
篮球
足球
乒乓球
篮球
足球
乒乓球
篮球
足球
乒乓球
对应效果:
通过设置btn-group-vertical类,可以将按钮组转化为垂直方向显示。
示例代码:
篮球
足球
乒乓球
对应效果:
Bootstrap提供的按钮和按钮组风格多样,基本能满足使用需求,后期很多很多前端框架,也是参考了Bootstrap这一经典设计。



