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函数绑定
Aug 18 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JavaScript中this详解
Sep 01 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
js 作用域和变量详解
Feb 16 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
Node.js Buffer用法解读
May 18 Javascript
详解webpack模块加载器兼打包工具
Sep 11 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 实现身份验证代码
2010/03/24 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
用Python写冒泡排序代码
2016/04/12 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python request 模块详细介绍
2020/11/10 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
公关活动策划方案
2014/05/25 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
创业计划书之水果店
2019/07/18 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
python实现剪贴板的操作
2021/07/01 Python
python pygame 开发五子棋双人对弈
2022/05/02 Python
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS