Bootstrap CSS组件之下拉菜单(dropdown)


Posted in Javascript onDecember 17, 2016

Bootstrap下拉菜单,常用在开发项目中,今天为大家介绍介绍

dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu
例子见下拉菜单.html

//源码
.dropup,
.dropdown {
 position: relative;
}
.dropdown-toggle:focus {
 outline: 0;
}
.dropdown-menu {
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 2px 0 0;
 font-size: 14px;
 text-align: left;
 list-style: none;
 background-color: #fff;
 -webkit-background-clip: padding-box;
     background-clip: padding-box;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, .15);
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
     box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu.pull-right {
 right: 0;
 left: auto;
}
.dropdown-menu .divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}
.dropdown-header {
 display: block;
 padding: 3px 20px;
 font-size: 12px;
 line-height: 1.42857143;
 color: #777;
 white-space: nowrap;
}
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Bootstrap从3.0版本开始全面支持移动平台,贯彻移动先行宗旨 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>
  <!-- -->
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      我的书籍<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">编程</a></li>
      <li><a href="#">设计</a></li>
      <li><a href="#">深入</a></li>
    </ul>
  </div>

  <!-- dropdown/dropdown-menu/dropdown-header -->
  <div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      我的书籍<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">前端</a></li>
      <li><a href="#">JS</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">后台</li>
      <li><a href="#">PYTHON</a></li>
      <li><a href="#">JAVA</a></li>
    </ul>
  </div>


  <!-- bootstrap是基于jQuery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

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

Javascript 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
javascript 跳转代码集合
Dec 03 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
zepto.js 实时监听输入框的方法
Dec 04 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
深入理解JS继承和原型链的问题
Dec 17 #Javascript
Bootstrap CSS组件之输入框组
Dec 17 #Javascript
原生js验证简洁注册登录页面
Dec 17 #Javascript
javascript 数组去重复(在线去重工具)
Dec 17 #Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 #Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 #Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 #Javascript
You might like
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python如何从键盘获取输入实例
2020/06/18 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
麦当劳辞职信范文
2014/01/18 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
公司人事管理制度
2015/08/05 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript
MySQL存储过程及语法详解
2022/08/05 MySQL