文档章节

4.6、Bootstrap V4自学之路------组件---下拉列表

Asktao
 Asktao
发布于 2016/03/24 10:03
字数 1259
阅读 83
收藏 0

示例

把弹出菜单的触发器以及弹出菜单包裹在一个.dropdown中,或者其它声明了position:relative;的元素中。然后,添加菜单的HTML。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

PS:新知识点的话,则是 .open类。加上之后是打开状态。

按钮元素

你可以视情况在你的弹出菜单中使用<button>元素,而不是<a>元素。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

PS:这里要注意的是在菜单列表中,<button>标签替代了<a>。

    如果说两者有什么差别的话。我想到了之前看文档上所说的,form表单。

    form控件,无法管理到<a>标签。参考form 表单文档。

对齐

默认情况下,一个弹出菜单的菜单是自动放置在父元素下面,与父元素左侧对齐。给.dropdown-menu添加.dropdown-menu-right类能使菜单向右侧对齐。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

PS:当使用 .dropdown-menu-right类。需要设置父类框的宽度。

菜单头部

在任何一个弹出菜单添加一个头部以标记活动的分区。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
    <div class="dropdown-menu">
      <h6 class="dropdown-header">Dropdown header</h6>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
</div>

PS:添加 .dropdown-header类。则标签固定且不可编辑。

菜单分隔线

使用一个分隔线来对相关的菜单项分组。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

PS:看到之前的文档里,使用过这个属性 .dropdown-divider类

禁用的菜单项

对弹出菜单中的某一项添加.disabled类,可以把它们样式化为不可用

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Regular link</a>
      <a class="dropdown-item disabled" href="#">Disabled link</a>
      <a class="dropdown-item" href="#">Another link</a>
    </div>
</div>

用法

依靠数据属性或者JavaScript,通过切换菜单项的父元素上的.open类,弹出菜单插件可以切换内容(弹出菜单)的可见性。

在移动设备上,打开一个弹出菜单会添加一个.dropdown-backdrop作为轻触区域,如果在菜单外面轻触时弹,菜单会关闭。这是支持iOS设备的要求。这意味着在移动设备上,从一个打开的弹出菜单切换到另一个弹出菜单至少需要两次轻触

注意:data-toggle="dropdown"属性是关闭弹出菜单的菜单在应用程序级别的依靠。所以最好一直使用它。


利用数据属性

给一个链接或者按钮添加一个data-toggle="dropdown"以切换一个弹出菜单。

不截图了。关键是指data-toggle="dropdown"存在的位置、和对应的关系。

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

为了保持URL与链接按钮交互,请使用data-target属性而不是href="#"

<div class="dropdown">
  <a id="dLabel1" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </a>

  <div class="dropdown-menu" aria-labelledby="dLabel1">
      <a class="dropdown-item" href="#">Regular link</a>
      <a class="dropdown-item disabled" href="#">Disabled link</a>
      <a class="dropdown-item" href="#">Another link</a>
  </div>
</div>

这样的样式有些难看。。。。(吐槽~_~!)

利用JavaScript

$('.dropdown-toggle').dropdown()

选项

无?

方法

$().dropdown('toggle')      对给定的导航条或轻触导航触发弹出菜单的菜单

PS:这里我尝试了,但是效果是触发点击效果,但不弹出菜单。

事件

所有的弹出菜单事件都是在.dropdown-menu的父元素上触发的,这个父元素都有一个relatedTarget属性,它的值是触发的锚元素。

事件 描述
show.bs.dropdown 当调用显示实例的方法时,会立即触发该事件。
shown.bs.dropdown 当弹出菜单已经对用户可见时(需要等待CSS 过渡完成),会触发该事件。
hide.bs.dropdown 当调用隐藏实例的方法时,会立即触发该事件。
hidden.bs.dropdown 当弹出菜单已经对用户不可见时(需要等待CSS 过渡完成),会触发该事件。


$('#myDropdown').on('show.bs.dropdown', function () {
   // do something… 
})



© 著作权归作者所有

Asktao
粉丝 27
博文 98
码字总数 114189
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
421
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

升级到 v4 Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 当心!它在 flux 中...

Asktao
2016/03/26
324
0
4.2、Bootstrap V4自学之路------组件---按钮组

1、基本示例 用把一系列带有的按钮包裹起来。 <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-secondary">Left</button> <button ......

Asktao
2016/03/23
72
0
4.3、Bootstrap V4自学之路------组件---按钮下拉组件

单按钮弹出菜单 <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action ......

Asktao
2016/03/23
91
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
155
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.2K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部