上一节内容,我们讲到在Bootstrap中,如何使用文字图标制作带有图标的按钮(
Bootstrap教程第三课:制作有图标的按钮),这节课,我们将在上一节的基础上,进行一组功能图标按钮的制作。
我们以文档的居左、居中、居右和两端对齐按钮为例,首页在Glyphicon字体图标中,找到这四个图标的对应的字体样式值,分别是:
现在,给这四个功能图标的外层,加上DIV,并给DIV添加.btn-group样式,代码如下:
我们以文档的居左、居中、居右和两端对齐按钮为例,首页在Glyphicon字体图标中,找到这四个图标的对应的字体样式值,分别是:
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
效果如下:<button class="btn btn-default"> <span class="glyphicon glyphicon-align-left"></span> </button> <button class="btn btn-default"> <span class="glyphicon glyphicon-align-center"></span> </button> <button class="btn btn-default"> <span class="glyphicon glyphicon-align-right"></span> </button> <button class="btn btn-default"> <span class="glyphicon glyphicon-align-justify"></span> </button>
现在,给这四个功能图标的外层,加上DIV,并给DIV添加.btn-group样式,代码如下:
最终效果如下:<div class="btn-group">
//这里是按钮代码
</div>
可以看到,使用.btn-group将四个图标放到一组中去的时候,图标之间间隔被消除。按照这个思路,我们可以做很多组合功能按钮,如加粗、斜体、下划线等。