Bootstrap4组件：下拉菜单(Dropdowns)


发布时间：2020-03-18 20:55    作者： 晖哥哥   已过去：3 年   阅读总量：1502 已被赞：0

下拉菜单(Dropdowns)

示例

将下拉列表的切换（按钮或链接）和下拉菜单包含在.dropdown中，或者另外声明position: relative;元素;可以从<a> 或 <button>触发下拉菜单，以适应你的使用的需求。

单一按钮的下拉菜单 引入bootstrap.bundle.min.js 就可以不用引入popper.js

任何一个 .btn块都可以定义变更为下拉菜单，可以使用<button>或<a>元素做下拉菜单的示例。

#btn-group 让按钮与其他内容同一行，不加默认会独占一行，默认是块级元素

<div class="dropdown">

<!-- <div class="btn-group"> --> 

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>

<!-- <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</a> -->

 

<div class="dropdown-menu">

<a href="#" class="dropdown-item">aaa</a>

<a href="#" class="dropdown-item">bbb</a>

<a href="#" class="dropdown-item">ccc</a>

</div>

</div>

可以.btn颜色及样式类来定义下拉菜单的外在表现：

下拉菜单通过切换.show（默认展开）父列表项上的类来切换隐藏内容。

分裂式按钮下拉菜单（菜单通过旁边的倒三角来展出，不是一个整体出现，只能是.btn-group类）

<div class="btn-group">

<button class="btn btn-success">Dropdown</button>

<button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>

 

<div class="dropdown-menu">

<a href="#" class="dropdown-item">AAA</a>

<a href="#" class="dropdown-item">BBB</a>

<a href="#" class="dropdown-item">CCC</a>

</div>

</div>

尺寸大小

通过添加btn.btn-lg/sm改变下拉框尺寸大小。

给分列式的按钮加大小，两个都要加才行，不然就不好看

变形

可以用 .dropup（菜单向上展开）、.dropright（右边）、.dropleft（左边）改变下拉菜单的指向。

<div class="btn-group dropleft">

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>

<div class="dropdown-menu">

<a href="#" class="dropdown-item">aaa</a>

<a href="#" class="dropdown-item">bbb</a>

<a href="#" class="dropdown-item">ccc</a>

</div>

</div>

 

<div class="btn-group">

<div class="btn-group dropleft">

<button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>

<div class="dropdown-menu">

<a href="#" class="dropdown-item">AAA</a>

<a href="#" class="dropdown-item">BBB</a>

<a href="#" class="dropdown-item">CCC</a>

</div>

</div>

<button class="btn btn-success">Dropdown</button>

</div>

菜单

旧版Boostrap(v3)下拉菜单中的子菜单项必须是链接，但v4不再是这种情况，现在你可选择使用<button>下拉列表中的元素，而不是仅仅 <a>标签。

菜单可以是a ,button ,span 标签

你可以创建非交互式下拉菜单项 .dropdown-item-text. 还可以随意使用定制的CSS或文本实用程序进一步设计样式.

<div class="dropdown">

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>

<div class="dropdown-menu show">

<a href="#" class="dropdown-item">aaa</a>

<button class="dropdown-item">bbb</button>

<span class="dropdown-item-text">ccc</span>

</div>

</div>

有效&不可用

加上 .active 让下拉列表中的项 样式为有效菜单。

加上.disabled 让下拉列表中的项 样式为不可用菜单。

对齐

默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right 到.dropdown-menu右侧轻松对齐下拉菜单。

响应式对齐：

如果你想使用响应式对齐，请通过添加data-display="static"属性禁用动态定位，并使用响应式变体类。然后再为了下拉菜单左/右对齐和给定断点或更大的断点, 加上.dropdown-menu-{sm|-md|-lg|-xl}-left/right。

你不需要添加 data-display="static"属性设置为导航栏中的下拉按钮，因为导航条中不使用popper.js。

<div class="btn-group">

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown Dropdown Dropdown Dropdown</button>

<div class="dropdown-menu dropdown-menu-lg-right">

<a href="#" class="dropdown-item">aaa</a>

<a href="#" class="dropdown-item">bbb</a>

<a href="#" class="dropdown-item">ccc</a>

</div>

</div>

内容

头部

添加 h6.dropdown-header标题来标记任何下拉菜单中的操作部分。

分割线

使用div.dropdown-divider分隔符分割相关菜单子项，呈现出分组和分割线效果。

Class=’p-4’ :以内容为中心，给内容的四面留白

文本

在文本下拉菜单中放置任何自由格式的文本并使用间隔工具。请注意，您可能需要额外的大小调整样式来限制菜单宽度。

<div class="dropdown-menu p-4 text-muted" style="width:200px;">

<p>一些示例文本在下拉菜单中自由流动。</p>

<p>这是更多示例文本。</p>

</div>

表单（按钮里的菜单可以加入表单，表单也可以做成按钮点击弹出，看例子的第二个）

将表单放在下拉菜单中，或将其放入下拉菜单中，并使用margin 或 padding 通用CSS样式调整空间和位置。

<div class="dropdown-menu p-3" style="width:240px;">

<form action="">

<div class="form-group">

<label for="">邮箱：</label>

<input type="email" class="form-control">

</div>

<div class="form-group">

<label for="">密码：</label>

<input type="password" class="form-control">

</div>

<button class="btn btn-primary">登录</button>

</form>

</div>

<!-- <form action="" class="dropdown-menu p-3" style="width:240px;">

<div class="form-group">

<label for="">邮箱：</label>

<input type="email" class="form-control">

</div>

<div class="form-group">

<label for="">密码：</label>

<input type="password" class="form-control">

</div>

<button class="btn btn-primary">登录</button>

</form> -->

下拉选项

使用data-offset（偏移）或data-reference（在分裂按钮式时候使用，data-reference="parent"，左边部分对齐，默认是右边部分对齐）更改下拉菜单的位置。

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-offset="10,20">Dropdown</button>#data-offset="10（向右）,20（向下）"

 

<button class="btn btn-success">Dropdown</button>

<button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-reference="parent"></button>

JavaScript行为

事件：点击事件

  1. show.bs.dropdown：当调用show显示方法时，此事件会立即触发。（显示前）

给按钮加个ID为myRropdown

(2) shown.bs.dropdown：当下拉菜单对用户可见时，会触发此事件(将等待CSS转换完成)。（显示后）

(3) hide.bs.dropdown：当调用隐藏实例方法时，会立即触发此事件。（隐藏前）

(4) hidden.bs.dropdown：当下拉菜单从用户隐藏完毕时，会触发此事件(将等待CSS转换完成)。（隐藏后）

四个都有的例子：

点赞

0


登陆后方可评论

年 月 归 档
点 赞 最 多
同 类 推 荐