编程 Javascript

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个精彩的专题：

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

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

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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