image.png
小图标组件
image.png
http://v3.bootcss.com/components/#glyphicons（借鉴别人文章）
需要注意，可能在页面中使用图标时，设置好代码可图标却显示不出来，若遇到此问题，需要注意以下问题，便可解决：
image.png
css、fonts、js都要在项目中另起文件夹（fonts和css必须是同级，都是在官网上下载的3.0版bootstrap包含的），保证它们都是在同级的，然后html如下：
例子
可以使用<i>或<span>标签来配合使用：
image.png
例子
例子
效果图
效果图
按钮的设置
image.png
例子
例子
效果图
效果图
下拉菜单组件
image.png
例子
例子
效果图
菜单项居右对齐，标题，分割线，禁用项
image.png
说明:
divider设置分割线，一般是自己独立一行li，若把divider设置在li中的产品这行，则就会覆盖产品二字
例子
例子
效果图
效果图
例子
例子
效果图
效果图
三、按钮组组件
image.png
例子
例子
效果图
效果图
按钮组大小，下拉菜单
image.png
image.png
例子
例子
效果图
效果图
按钮组排列顺序
image.png
例子
例子
效果图
效果图
四、按钮式下拉菜单
image.png
image.png
例子
例子
效果图
效果图
分裂式按钮下拉菜单
image.png
例子
例子
效果图
效果图
本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping
网友评论