前端框架bootstrap-图标菜单按钮组件

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