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 面向对象全新理练之数据的封装
Dec 03 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
js实现无缝滚动图
Feb 22 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
javascript自定义事件功能与用法实例分析
Nov 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
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
python中的sort方法使用详解
2014/07/25 Python
python多线程用法实例详解
2015/01/15 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python可视化实现代码
2019/01/15 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
自荐信格式
2013/12/01 职场文书
大学生自荐书范文
2013/12/10 职场文书
参观考察邀请函范文
2014/01/29 职场文书
工地安全质量标语
2014/06/07 职场文书
环境卫生标语
2014/06/09 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
MySQL分布式恢复进阶
2022/07/23 MySQL