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继承--原型链继承和类式继承
Apr 08 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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 db类库进行数据库操作
2009/03/19 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
php微信开发之图片回复功能
2018/06/14 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
详解python之配置日志的几种方式
2017/05/22 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Python turtle库的画笔控制说明
2020/06/28 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
人力资源管理专业学生自我评价
2013/11/20 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
信仰观后感
2015/06/03 职场文书
鸦片战争观后感
2015/06/09 职场文书
安全生产奖惩制度
2015/08/06 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript