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 相关文章推荐
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
node.js超时timeout详解
Nov 26 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
webpack3之loader全解析
Oct 26 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
原生JavaScript实现轮播图
Jan 10 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php目录拷贝实现方法
2015/07/10 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
python回调函数的使用方法
2014/01/23 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
百度吧主申请感言
2014/01/12 职场文书
自我鉴定写作要点
2014/01/17 职场文书
七年级地理教学反思
2014/01/26 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
班委竞选稿范文
2015/11/21 职场文书