<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>图标菜单按钮组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .a{ height: 50px; width: 200px; border: 1px solid #ccc; background-color: #eee; } </style> </head> <body style="margin: 50px;"> <!-- <i class="glyphicon glyphicon-star"></i> <span class="glyphicon glyphicon-star"></span> --> <!-- <button class="btn btn-default btn-lg"> <i class="glyphicon glyphicon-star"></i> </button> --> <!-- <div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="###">首页</a></li> <li><a href="###">资讯</a></li> <li><a href="###">产品</a></li> <li><a href="###">关于</a></li> </ul> </div> --> <!-- <div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="###">首页</a></li> <li><a href="###">资讯</a></li> <li><a href="###">产品</a></li> <li><a href="###">关于</a></li> </ul> </div> --> <!-- <div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">网站导航</li> <li><a href="###">首页</a></li> <li><a href="###">资讯</a></li> <li><a href="###">产品</a></li> <li class="divider"><a href="###">产品</a></li> <li class="disabled"><a href="###">关于</a></li> </ul> </div> --> <!-- <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-default">左</button> <button class="btn btn-default">中</button> <button class="btn btn-default">右</button> </div> <div class="btn-group"> <button class="btn btn-default">left</button> <button class="btn btn-default">center</button> <button class="btn btn-default">right</button> </div> </div> --> <!-- <div class="btn-group"> <button class="btn btn-default">左</button> <button class="btn btn-default">中</button> <button class="btn btn-default">右</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">网站导航</li> <li><a href="###">首页</a></li> <li><a href="###">资讯</a></li> <li><a href="###">产品</a></li> <li class="divider"><a href="###">产品</a></li> <li class="disabled"><a href="###">关于</a></li> </ul> </div> </div> --> <!-- <div class="btn-group-vertical"> <button class="btn btn-default">左</button> <button class="btn btn-default">中</button> <button class="btn btn-default">右</button> </div> --> <!-- <div class="btn-group-justified"> <a class="btn btn-default">左</a> <a class="btn btn-default">中</a> <a class="btn btn-default">右</a> </div> <div class="btn-group-justified"> <div class="btn-group"> <button class="btn btn-default">左</button> </div> <div class="btn-group"> <button class="btn btn-default">中</button> </div> <div class="btn-group"> <button class="btn btn-default">右</button> </div> </div> --> <div class="btn-group"> <button class="btn btn-default">下拉菜单</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">网站导航</li> <li><a href="###">首页</a></li> <li><a href="###">资讯</a></li> <li><a href="###">产品</a></li> <li class="divider"><a href="###">产品</a></li> <li class="disabled"><a href="###">关于</a></li> </ul> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
相关推荐
这是一款基于bootstrap的带图标的按钮样式。这组按钮在bootstrap按钮的基础上,通过附加的HTML元素来构建小图标,并通过CSS3来制作鼠标hover动画效果。
TiTatoggle是一款基于Bootstrap3的纯CSS滑动开关按钮组件。该滑动按钮组件没有使用Javascript,它的HTML结构和原生的Bootstrap checkbox组件结构基本相同,使用起来非常方便。它还提供了多种主题样式:IOS样式和...
Bootstrap 使用Font Awesome图标字体文件 集成了圆角按钮 禁用状态按钮 自定义按钮尺寸 可设定按钮动画 旋转和闪烁动画 ps:字体文件在asset里面 说的不是很明白 看下面英文解释吧 Bootstrap buttons as per ...
Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航
基于bootstrap的单选按钮图标 改变了浏览器自带形状,支持自定义图标
Bootstrap5 图标库 bootstrap-icons
bootstrap五等分代码CSS和圆形按钮css,讲文档添加到bootstrap.css的最后直接写class即可。非常好用
右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap...
Bootstrap Icons:Bootstrap 有史以来第一次拥有自己的图标库,并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用,从表单到导航组件等。Bootstrap Icons ...
内有bootstrap文件在resource里,版本3.3.7 demo文件里是html文件,里面有bootstrap的图标大全
基于jquery+bootstrap的侧边栏收缩菜单,实现切换伸展收缩菜单的功能。
NULL 博文链接:https://onestopweb.iteye.com/blog/2266727
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
这是一款基于bootstrap的jquery右键菜单插件。该bootstrap右键菜单使用Bootstrap dropdown组件来制作,并通过tether插件进行定位,具有多级菜单,灵活,响应式等特点。
今天我们要为大家分享一款基于jQuery和Bootstrap的垂直手风琴下拉菜单,因为它是Bootstrap风格的,所以外观上绝对可以称得上完美。另外,菜单项在展开的时候,菜单项的内容将会以飞入的动画特效展示出来,同时菜单项...
一款基于css3+bootstrap制作的蜂窝式图标导航菜单特效,适合做网站主页快捷导航入口。