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

javascript sudoku 数独智力游戏生成代码

Mar 27 Javascript

JQuery.closest(),parent(),parents()寻找父结点

Feb 17 Javascript

js实现仿阿里巴巴城市选择框效果实例

Jun 24 Javascript

JavaScript实现非常简单实用的下拉菜单效果

Aug 27 Javascript

jQuery点击输入框显示验证码图片

May 19 Javascript

Jquery组件easyUi实现手风琴(折叠面板)示例

Aug 23 Javascript

详解VUE的状态控制与延时加载刷新

Mar 27 Javascript

Angular2利用组件与指令实现图片轮播组件

Mar 27 Javascript

Vue实现商品分类菜单数量提示功能

Jul 26 Javascript

微信小程序select下拉框实现源码

Nov 08 Javascript

webpack5 联邦模块介绍详解

Jul 08 Javascript

超详细小程序定位地图模块全系列开发教学

Nov 24 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 和 MySQL 开发的 8 个技巧

2007/01/02 PHP

ThinkPHP实现递归无级分类――代码少

2015/07/29 PHP

PHP接入支付宝接口失效流程详解

2020/11/10 PHP

js继承的实现代码

2010/08/05 Javascript

jQuery探测位置的提示弹窗(toolTip box)详细解析

2013/11/14 Javascript

JS判断客服QQ号在线还是离线状态的方法

2015/01/13 Javascript

javascript实现倒计时跳转页面

2016/01/17 Javascript

Angular下H5上传图片的方法（可多张上传）

2017/01/09 Javascript

深入理解基于vue-cli的vuex配置

2017/07/24 Javascript

vue中$refs的用法及作用详解

2018/04/24 Javascript

vue项目前端埋点的实现

2019/03/06 Javascript

原生js代码能实现call和bind吗

2019/07/31 Javascript

[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29

2020/10/29 DOTA

python实现DNS正向查询、反向查询的例子

2014/04/25 Python

python 异或加密字符串的实例

2018/10/14 Python

Python 单元测试（unittest）的使用小结

2018/11/14 Python

py-charm延长试用期限实例

2019/12/22 Python

Python抓包程序mitmproxy安装和使用过程图解

2020/03/02 Python

python实现梯度法 python最速下降法

2020/03/24 Python

vscode配置anaconda3的方法步骤

2020/08/08 Python

Python中BeautifulSoup通过查找Id获取元素信息

2020/12/07 Python

short s1 = 1; s1 = s1 + 1;有什么错？ short s1 = 1; s1 += 1;有什么错？

2014/09/26 面试题

2014年大学生自我评价

2014/01/19 职场文书

秋季运动会广播稿

2014/02/22 职场文书

化妆品促销方案

2014/02/24 职场文书

土地转让协议书

2014/04/15 职场文书

中层干部竞聘演讲稿

2014/05/15 职场文书

大学军训的体会

2014/11/08 职场文书

客户答谢会致辞

2015/01/20 职场文书

教育教学读书笔记

2015/07/02 职场文书

大学运动会通讯稿

2015/07/18 职场文书

预防职务犯罪警示教育心得体会

2016/01/15 职场文书

先进个人事迹材料（2016推荐版）

2016/03/01 职场文书

导游词之天下银坑景区

2019/11/21 职场文书

Java集成swagger文档组件

2021/06/28 Java/Android

Java GUI编程菜单组件实例详解

2022/04/07 Java/Android