Bootstrap组件(一)之菜单


Posted in Javascript onMay 11, 2016

Glyphicons字体图标

基类.glyphicon {position/top/display/font-family/}

具体类 {content} --表现在伪元素上

使用要点:a.基类+具体类 b.一般图标和文本之间添加一个空格

注意点:a.不要和其他组件混用,单独使用一个标签,一般使用span,e.g.:<span class="glyphicon glyphicon-search"></span>

b.已使用字体图标类的标签不要再嵌套元素或包含文本

字体图标源文件位置更改:默认相对于css位置,再../fonts/目录内,如需更改位置,则修改less或者已编译的css

下拉上弹菜单

a.外包元素 b.下拉上弹触发器 c.菜单列表

外包元素类.dropdown/.dropup {position}

下拉上弹触发器data-toggle 用于js钩子,切换外层元素open类的开启和关闭

菜单列表dropdown-menu {position/top/left/z-index/float/padding/margin/border/box-shadow}

e.g.: div>(button+ul) (默认为下拉) div可以添加类.dropdown或dropup或添加relative样式

<div class="dropdown"> <!-- 此元素的class可设置为dropdown/dropup/ 或单独设置样式为position: relative; --> <!-- 外包元素 -->
<button class="btn btn-default" data-toggle="dropdown"> <!-- 弹出触发器 -->
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu"> <!-- 弹出菜单 -->
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

下拉上弹菜单-对齐

默认左对齐

左对齐.dropdown-menu-left {right/left}

右对齐.dropdown-menu-right {right/left}

由其它元素overflow引起的元素被遮挡需要自行解决

<ul class="dropdown-menu dropdown-menu-right">
...
</ul>

下拉上弹菜单-菜单标题

标题.drop-header {font-size/color}

<ul class="dropdown-menu">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>

 下拉上弹菜单-分割线

分割线.divider {height/margin/background-color} --role="separator"

<ul>
...
<li role="separator" class="divider" ></li>
...
</ul>

下拉上弹菜单-禁用菜单

禁用.disabled {color}

<ul>
...
<li><a href="#">disabled link</a></li>
...
</ul>

以上内容是小编给大家介绍的bootstrap 组件的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
vue-hook-form使用详解
Apr 07 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
Bootstrap 组件之按钮(二)
May 11 #Javascript
jQuery验证插件validate使用详解
May 11 #Javascript
JQuery validate插件验证用户注册信息
May 11 #Javascript
jQuery validate验证插件使用详解
May 11 #Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 #Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 #Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
You might like
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
jquery JSON的解析方式
2009/07/25 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python 对key为时间的dict排序方法
2018/10/17 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python使用建议技巧分享(三)
2020/08/18 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
全球性的女装店:storets
2019/06/12 全球购物
数学系毕业生求职信
2014/05/29 职场文书
领导参观欢迎词
2015/01/26 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python