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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
深入理解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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
浅谈PHP的反射机制
2016/12/15 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
python发布模块的步骤分享
2014/02/21 Python
Python简单实现控制电脑的方法
2018/01/22 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python列表如何更新值
2020/05/27 Python
iostream与iostream.h的区别
2015/01/16 面试题
六个一活动实施方案
2014/03/21 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
年会主持人开场白台词
2015/05/29 职场文书
红歌会主持词
2015/07/02 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android