第七章之菜单按钮图标组件


Posted in Javascript onApril 25, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.小图标组件

2.下拉菜单组件

3.按钮组组件

4.按钮式下拉菜单

本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件、下拉菜单组件和各种按钮组件。

一.小图标组件

Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件链接:

http://v3.bootcss.com/components/#glyphicons。

部分图标如下:

第七章之菜单按钮图标组件 

可以使用<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="dropdown"才能有效。对于菜单部分,设置 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="dropdown open">

三.按钮组组件

按钮组就是多个按钮集成在一个容器里形成独有的效果。

//基本格式
<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-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>

注意:这里<div>中并没有实现 class="dropdown",通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个 class="dropdown-toggle"即可。

//设置按钮组垂直排列
<div class="btn-group-vertical"> 
//设置两端对齐按钮组,使用<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组件之菜单按钮图标组件,希望对大家有所帮助!

Javascript 相关文章推荐
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
jquery if条件语句的写法
May 19 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
第九章之路径分页标签与徽章组件
Apr 25 #Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 #Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 #Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 #Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 #Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 #Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 #Javascript
You might like
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php session 错误
2009/05/21 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
vue.js删除列表中的一行
2018/06/30 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python里dict变成list实例方法
2019/06/26 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
银行员工职业规划范文
2014/01/21 职场文书
股份合作协议书范本
2014/04/14 职场文书
创意婚礼策划方案
2014/05/18 职场文书