Bootstrap图标菜单按钮组件
来源:互联网 发布:zol软件下载app 编辑:程序博客网 时间:2024/04/29 11:51
小图标组件
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">
阅读全文
0 0
- Bootstrap图标菜单按钮组件
- bootstrap图标菜单按钮组件
- bootstrap图标菜单和按钮组件
- Bootstrap-图标菜单和按钮组件
- Bootstrap组件---下拉菜单,多级菜单 ,按钮
- Bootstrap 字体图标和下拉菜单、按钮
- bootstrap --字体图标的设置 按钮组件
- BootStrap--CSS组件--按钮下拉菜单
- 第7 章图标菜单按钮组件
- 3.1Bootstrap学习组件篇之下拉菜单、图标
- 3.1Bootstrap学习组件篇之下拉菜单、图标
- bootstrap入门【组件之按钮组,下拉菜单,嵌套】
- bootstrap——组件(三、按钮式下拉菜单)
- Bootstrap 按钮下拉菜单
- bootstrap(菜单、按钮、导航)
- Bootstrap按钮菜单
- Bootstrap按钮下拉菜单
- Bootstrap按钮下拉菜单
- nginx缓存页面+cookie后 串会话问题
- Code[vs] 1506传话(tarjan缩点)
- UVA 116 Unidirectional TSP(动态规划)
- PreparedStatement和Statement的区别
- 什么是jquery
- Bootstrap图标菜单按钮组件
- mysql decimal
- 数据结构实验之排序五:归并求逆序数
- linux-windows下串口编程(主要是linux下通过串口进行烧写hex)
- Unity3D学习记录——碰撞变色
- 门急诊排队叫号系统demo的基本实现
- jQuery选择器
- Java进阶之Annotation(注解)
- FZU2253 Salty Fish(最大区间和)(福州大学第十四届程序设计竞赛)