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


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与框架页的操作代码
Jan 17 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
js实现双色球效果
Aug 02 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
PHP学习之PHP运算符
2006/10/09 PHP
php 清除网页病毒的方法
2008/12/05 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php简单实现MVC
2015/02/05 PHP
php代码架构的八点注意事项
2016/01/25 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
详解微信UnionID作用
2019/05/15 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
python实现发送邮件功能代码
2017/12/14 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python3.7添加dlib模块的方法
2020/07/01 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
护理专业的自荐信
2013/10/22 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
工作决心书
2014/03/11 职场文书
医德医魂心得体会
2014/09/11 职场文书
2014年工商所工作总结
2014/12/09 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
PyTorch的Debug指南
2021/05/07 Python
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS