编程 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 相关文章推荐

动态调用css文件——jquery的应用

Feb 20 Javascript

Microsoft Ajax Minifier 压缩javascript的方法

Mar 05 Javascript

改进UCHOME的记录发布，增强可访问性用户体验

Jan 17 Javascript

javaScript让文本框内的最后一个文字的后面获得焦点实现代码

Jan 06 Javascript

Node.js开发指南中的简单实例(mysql版)

Sep 17 Javascript

jquery中对于批量deferred的处理方法

Jan 22 Javascript

JavaScript中Null与Undefined的区别解析

Jun 30 Javascript

手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效

Dec 06 Javascript

jquery插件bootstrapValidator表单验证详解

Dec 15 Javascript

JS实现的走迷宫小游戏完整实例

Jul 19 Javascript

解决在Bootstrap模糊框中使用WebUploader的问题

Mar 22 Javascript

element-ui中Table表格省市区合并单元格的方法实现

Aug 07 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