Bootstrap 教程第四课：制作一组功能图标按钮

上一节内容，我们讲到在Bootstrap中，如何使用文字图标制作带有图标的按钮（ Bootstrap教程第三课：制作有图标的按钮），这节课，我们将在上一节的基础上，进行一组功能图标按钮的制作。

我们以文档的居左、居中、居右和两端对齐按钮为例，首页在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将四个图标放到一组中去的时候，图标之间间隔被消除。按照这个思路，我们可以做很多组合功能按钮，如加粗、斜体、下划线等。