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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
实例讲解vue源码架构
Jan 24 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
浅述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缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
php实现购物车功能(下)
2016/01/05 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
讲解Python中的标识运算符
2015/05/14 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
家长给孩子的表扬信
2014/01/17 职场文书
《问银河》教学反思
2014/02/19 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
初中毕业感言300字
2015/07/31 职场文书
检讨书之工作不认真
2019/08/14 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书