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对象之内置对象Math使用方法
Apr 16 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 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:风雨欲来 路在何方?
2006/10/09 PHP
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
php mssql 时间格式问题
2009/01/13 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
javascript操作cookie
2017/01/17 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
shiro授权的实现原理
2017/09/21 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python 爬虫的工具列表大全
2016/01/31 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
python实现126邮箱发送邮件
2020/05/20 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
大专自我鉴定范文
2013/10/01 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
银行员工考核评语
2014/12/31 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
Python词云的正确实现方法实例
2021/05/08 Python