前端框架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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容