BootStrap--dropdown

下拉菜单

  下拉菜单的基本结构为:

<div class="dropdown">
    <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">item1</a></li>
        <li><a href="#">item1</a></li>
        <li class="divider"></li>
        <li><a href="#">item1</a></li>
    </ul>
</div>

  下拉菜单的外层容器一定要提供了一个相对定位的属性,所以具有position:relative属性的元素就可以作为下拉菜单的外层容器

  下拉菜单的按钮元素关键的属性为data-toggle="dropdown",该属性提供了HTML使用的触发条件,class="dropdown-toggle"提供了一些颜色的上的样式,基本上可以忽略

  行内元素添加class="caret"是一个标识下拉菜单的一个小三角

  下拉菜单的具体内容有ul-li-a嵌套使用,ul上添加class="dropdown-menu",li上添加class="divider"提供分隔功能,添加class="dropdown-header"提供一个分组的功能

  默认下拉菜单是想下伸展的在最外层容器上设置class="dropup"可以让菜单向上

  默认下拉菜单内容元素和触发元素是左边对齐的可以在最外层容器上设置class="pull-right"来实现右边对齐

JS使用

  下拉菜单提供了四个事件(事件要绑定在最外层元素上):

    1.show.bs.dropdown在下拉菜单出现之前触发

    2.shown.bs.dropdown在下拉菜单出现之后触发

    3.hide.bs.dropdown在下拉菜单隐藏之前触发

    4.hidden.bs.dropdown在下拉菜单隐藏之后触发

  使用方式为:

$(".dropdown").on("show.bs.dropdown",function(){alert("before show")})
时间: 2024-10-25 11:55:49

BootStrap--dropdown的相关文章

Rails Bootstrap dropdown下拉菜单没反应解决方法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { } Mac环境 Rails 5.1.4 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { }

Rails 101(Rails 5版) bootstrap/dropdown

让这个网站有实际"登入"."登出"的功能 练习到这个章节时出现下接菜单没有反应 这里是使用bootstrap的dropdown功能,到官方查了一下安装方法,发现缺少了一个 jQuery,我们要把他安装好,方法如下: 1.在Gemfile增加  gem 'jquery-rails' ,然后 bundle 2.app/assets/javascripts/application.js里增加 //= require jquery//= require bootstrap-

Bootstrap dropdown require Popper.js

<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>放在引用Bootstrap.js之前解决 网页有 dropdown 样式的 出脚本错误问题Bootstrap dropdown require Popper.js 原文地址:https://blog.51cto.com/zhaoyingyatou/2365456

Bootstrap dropdown menu within a responsive table

Bootstrap 的 dropdown menu 在 responsive table内 会被外层遮挡住 解决办法: $('.table-responsive').on('show.bs.dropdown', function () { $('.table-responsive').css( "overflow", "inherit" ); }); $('.table-responsive').on('hide.bs.dropdown', function ()

bootstrap dropdown的点击变为:hover 后自动下拉

翻了不少地方.找到这段代码. 先把这个复制到bootstrap.min.js下面增加 1 /* 2 3 * Project: Twitter Bootstrap Hover Dropdown 4 * Author: Cameron Spear 5 * Contributors: Mattia Larentis 6 * 7 * Dependencies?: Twitter Bootstrap's Dropdown plugin 8 * 9 * A simple plugin to enable t

Bootstrap源码分析之dropdown

源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原理: 1.利用dropdown类作为定位点,然后让子级的列表dropdown-menu绝对定位实现,还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联.2. 需要js插件的支持 源码分析: 1.caret:实现向下的三角形,利用边框实现的    1.1.边框颜色默认是字

[Bootstap] 9. Dropdown

Dropdown Arrow Class In order to create a down arrow like this: , what class should we apply to the element? Answer: caret Opening Dropdowns The Bootstrap Dropdown plugin will toggle a specific class on our element in order to make the dropdown visib

bootstrap源码分析之下拉菜单 (+function ($) { &quot;use strict&quot;;}(window.jQuery);全面分析)

<div class="dropdown"> <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dr

Gruntfile.js模板

module.exports = function(grunt) { // 配置项 var AppConfig = { name: 'app', //源文件目录 src: 'app/src', //生产文件目录 dist: 'app/assets' }; //加载所有的任务 require('load-grunt-tasks')(grunt); //显示每一个任务所花的时间和百分比 require('time-grunt')(grunt); grunt.initConfig({ config:

帮同学做的大一大作业:《我的家乡—郑州》

---恢复内容开始--- 最近在上海上学的一个高中同学让我帮忙,帮她做她们的计算机课程大作业. 由于关系不错我也不好意思拒绝就帮忙做了,因为这个学期刚刚开始接触HTML5和css,所以制作过程中有很多不懂的,而且由于HTML5是选修课,一星期只有一节,所以做这个花费了比较多的时间,这个网站是我制作的第一个网站,比较有纪念意义,所以发在博客上,作为纪念. 通过去做这个作业,我了解到很多课上学不到的东西.因为没有美工,从头到尾,都是我一个人在臆想,刚开始的时候,根本无从下手,我去参考别人做的家乡网站