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 相关文章推荐
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
如何编写jquery插件
Mar 29 jQuery
JavaScript实现各种排序的代码详解
Aug 28 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PDO::rollBack讲解
2019/01/29 PHP
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
django使用xadmin的全局配置详解
2019/11/15 Python
如何基于python操作excel并获取内容
2019/12/24 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
文明礼仪小标兵事迹
2014/01/12 职场文书
军训教官感言
2014/03/02 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
公司晚会主持词
2019/04/17 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python