Bootstrap 教程第四课：制作一组功能图标按钮-白红宇的个人博客

发布日期：2021-11-30 16:49:54 浏览次数：11 分类：技术文章

本文共 578 字，大约阅读时间需要 1 分钟。

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

我们以文档的居左、居中、居右和两端对齐按钮为例，首页在Glyphicon字体图标中，找到这四个图标的对应的字体样式值，分别是：

现在按照上一节课的内容，制作这四个文字图标按钮，代码如下：

                        

效果如下：

现在，给这四个功能图标的外层，加上DIV，并给DIV添加.btn-group样式，代码如下：

<div class="btn-group">
//这里是按钮代码
</div>

最终效果如下：

可以看到，使用.btn-group将四个图标放到一组中去的时候，图标之间间隔被消除。按照这个思路，我们可以做很多组合功能按钮，如加粗、斜体、下划线等。

转载地址：https://leeguoren.blog.csdn.net/article/details/51721899 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：Bootstrap 教程第五课：制作下拉菜单

下一篇：Bootstrap 教程第三课：制作有图标的按钮

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！