Bootstrap图标菜单按钮组件
2017-07-15 10:36
645 查看
小图标组件
Bootstrap提供了免费的263个小图标,具体可以参考中文官网的组件连接使用i或者span标签来配合使用
<!--使用小图标--> <i class="glyphicon glyphicon-star"></i> <span class="glyphicon glyphicon-star"></span> <!--也可以结合按钮--> <button class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-star"></span> </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>
按钮和菜单需要包裹在.dropdown容器里,而作为被点击的元素按钮需要设置data-toggle=”drop-down”才能有效。对于菜单部分,设置class=”dropdown-menu”才能自动隐藏并添加固定样式。设置class=”caret”表示箭头,可上可下。
<!--设置向上触发--> <div class="dropup"> <!--菜单项居右对齐,默认值是 dropdown-menu-left--> <ul class="dropdown-menu dropdown-menu-right"> <!--设置菜单的标题,不要加超链接--> <li class="dropdown-header">网站导航</li> <!--设置菜单的分割线--> <li class="divider"></li> <!--设置菜单的禁用项--> <li class="disabled"><a href="#">产品</a></li>
按钮组组件
按钮组就是多个按钮集成在一个容器里形成独有的效果<!--基本格式--> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> </div> <!--设置按钮组垂直排列--> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">上</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">下</button> </div>
<!--多个按钮组整合起来便于管理--> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> </div> </div>
<!--设置按钮组大小--> <div class="btn-group btn-group-lg"> <div class="btn-group> <div class="btn-group btn-group-sm"> <div class="btn-group btn-group-xs">
<!--嵌套一个分组,比如下拉菜单--> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="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><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> </div> </div>
<!--设置两端对齐按钮组,使用a标签--> <div class="btn-group-justified"> <a type="button" class="btn btn-default">左</a> <a type="button" class="btn btn-default">中</a> <a type="button" class="btn btn-default">右</a> </div> <!--如果使用button标签,则需要对每个按钮进行群组--> <div class="btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> </div> </div>
按钮式下拉菜单
这个下拉菜单其实和下拉菜单组件一样,只不过这个是在群组里,不需要div声明class=”dropdown”<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" 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="btn-group"> <button type="button" class="btn btn-default">下拉菜单</button> <button type="button" class="btn btn-default dropdown-toggle" 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="btn-group dropup">
相关文章推荐
- bootstrap图标菜单按钮组件
- 第二百三十七节,Bootstrap图标菜单按钮组件
- Bootstrap 图标菜单和按钮组件(五)
- bootstrap图标菜单和按钮组件
- Bootstrap-图标菜单和按钮组件
- 第 7 章 图标菜单按钮组件
- Bootstrap组件---下拉菜单,多级菜单 ,按钮
- bootstrap --字体图标的设置 按钮组件
- 第七章之菜单按钮图标组件
- 第七章之菜单按钮图标组件
- (六)图标菜单与按钮组件
- 第7 章图标菜单按钮组件
- Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
- 第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件
- Bootstrap--组件之Glyphicons字体图标
- JS组件系列——Bootstrap右键菜单解决方案:ContextMenu
- Bootstrap菜单按钮及导航实例解析
- Bootstrap(四) 菜单、按钮及导航
- bootstrap菜单、按钮及导航学习笔记5-15导航(基础样式)
- jQueryUI modal dialog does not show close button (x) JQueryUI和BootStrap混用时候,右上角关闭按钮显示不出图标的解决办法