Bootstrap基本组件学习笔记之下拉菜单(7)


Posted in Javascript onDecember 07, 2016

对于一些较为常用的功能模块,Bootstrap也进行了封装。包括下拉菜单、按钮组、导航、分页、缩略图、进度条等。
下面先总结下下拉菜单的使用。

直接看下面的例子:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>下拉菜单</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>下拉菜单</h1>
 </div>
 <div class="col-lg-6">
 <h3>样式1</h3>
 <div class="dropdown">
  <a href="#" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
  <li class="active"><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li class="divider"></li>
  <li><a href="#">菜单3</a></li>
  </ul>
 </div>
 </div>
 <div class="col-lg-6">
 <h3>样式2</h3>
 <div class="dropdown">
  <button class="btn btn-lg btn-primary expanded" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
  <li class="active"><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li class="divider"></li>
  <li><a href="#">菜单3</a></li>
  </ul>
 </div>
 </div>
</div>
</body>
</html>

效果如下:

Bootstrap基本组件学习笔记之下拉菜单(7)

说明:
(1)按钮(超链接)和下拉选择需要包含在<div class=”dropdwon”>…</div>内;
(2)按钮(超链接)必须添加data-toggle="dropdown"触发器;
(3)放置下拉选项的无序列表需要添加. dropdown-menu类;
(4)添加一个空的<li class="divider"></li>标签来实现分隔列表项。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
js获取url传值的方法
Dec 18 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
浅述Javascript的外部对象
Dec 07 #Javascript
vue2.0开发实践总结之疑难篇
Dec 07 #Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 #Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 #Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 #Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 #Javascript
JavaScript之Vue.js【入门基础】
Dec 06 #Javascript
You might like
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
Yii rules常用规则示例
2016/03/15 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
农村婚礼证婚词
2014/01/08 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
分居协议书范本
2014/11/03 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
大学生实习介绍信
2015/05/05 职场文书
创业计划书之家政服务
2019/09/18 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Python关于OS文件目录处理的实例分享
2021/05/23 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang