用Bootstrap框架制作下拉列表

Bootstrap下拉菜单

用于显示链接列表的可切换、有上下文的菜单。

实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative;的元素。然后加入组成菜单的 HTML 代码。

<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul>
</div>

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

<div class="dropup"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu2"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul>
</div>

对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">...
</ul>

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">...<li class="dropdown-header">Dropdown header</li>...
</ul>

分割线

为下拉菜单添加一条分割线，用于将多个链接分组。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">...<li role="separator" class="divider"></li>...
</ul>

禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4"><li><a href="#">Regular link</a></li><li class="disabled"><a href="#">Disabled link</a></li><li><a href="#">Another link</a></li>
</ul>

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>4</title><link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"><script src="../bootstrap-3.3.7/js/jquery-3.4.1.min.js"></script><script src="../bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><br><div class="dropdown"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Hobbies<span class="caret"></span></button><ul class="dropdown-menu"><li class="dropdown-header">Interesting</li><li class="active"><a href="#">Studying</a></li><li><a href="#">Running</a></li><li><a href="#">Playing basketball</a></li><li class="disabled"><a href="#">Playing game</a></li><li role="separator" class="divider"></li><li><a href="#">Eating food</a></li><li><a href="#">Sleeping</a></li></ul></div></div>
</body>
</html>

在浏览器上打开:

但此时点击相应的选项 button 按钮里的文本并不会随之改变，所以我们需要用 js 来让它具有了交互性。

<script>$(function(){//点击li获取它的内部文本$('.dropdown li').click(function(){$('.dropdown button').html($(this).text()+' <span class="caret"></span>');});});</script>

运行效果：

用Bootstrap框架制作下拉列表相关推荐

UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
用bootstrap框架制作网页
课程设计要做一个html网页,自己做的css样式实在是不堪入目,所以用了bootstrap框架,现总结如下: (1):下载bootstrap: 点击下载后: 下载解压后得到如下文件: (2):将这个文 ...
python web开发 Bootstrap框架基础
文章目录 1. 安装 2. Bootstrap 5 基本应用 learning from <python web开发从入门到精通> Bootstrap 是最受欢迎的前端组件库,用于 HT ...
Bootstrap 前端框架制作响应式网站
放假突然兴起,想学点前端框架,制作一个页面玩玩(PS:一直做后端,怕忘了前端的知识,所以补一补).说做就做,花了一天的时间,谷歌开发者模式,仿制别人公司的页面(希望不会被查),做了个响应式小网页,可以 ...
Bootstrap 框架详解
文章目录一.Bootstrap 简介二.安装及使用三.布局容器 1.固定宽度 2.百分百宽度四.栅格网格系统 1.列组合 2.列偏移 3.列排序 4.列嵌套 5.根据分辨率自适应五.常用样式 ...
Bootstrap框架中的字形图标的理解
最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...
前端面试汇总（Bootstrap框架）
前端面试汇总(Bootstrap框架) 1 什么是Bootstrap?以及为什么要使⽤Bootstrap? Bootstrap是⼀个⽤于快速开发 Web 应⽤程序和⽹站的前端框架. Bootstrap ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
初学Bootstrap，制作响应式布局
Bootstrap是目前比较受欢迎的前端框架.它是基于 HTML.CSS.JAVASCRIPT 的,简洁灵活.因为在前几个月的学习中有了解到Bootstrap,并且当时就使用Bootstrap制作了简 ...

用Bootstrap框架制作下拉列表

Bootstrap下拉菜单

实例

对齐

标题

分割线

禁用的菜单项

实例：

用Bootstrap框架制作下拉列表相关推荐

最新文章

热门文章