bootstrap下拉按钮组

最新推荐文章于 2024-06-03 20:31:46 发布
最新推荐文章于 2024-06-03 20:31:46 发布
阅读量591 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43293451/article/details/92443933
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap</title>
	<style type="text/css">
		div{			
			position:relative;
			margin:10px 10px;
		}
	</style>
</head>
<body>
	<script src="jquery.min.js"></script>
	<link href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	
	<div class="btn btn-group">
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			default<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">html</a>
			</li>
			<li>
				<a href="#">css</a>
			</li>
			<li>
				<a href="#">js</a>
			</li>
		</ul>
	</div>
	<div class="btn btn-group">
		<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
			primary<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">html</a>
			</li>
			<li>
				<a href="#">css</a>
			</li>
			<li>
				<a href="#">js</a>
			</li>
		</ul>
	</div>
	<div class="btn btn-group">
		<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
			success<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">html</a>
			</li>
			<li>
				<a href="#">css</a>
			</li>
			<li>
				<a href="#">js</a>
			</li>
		</ul>
	</div>
	<div class="btn btn-group">
		<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
			info<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">html</a>
			</li>
			<li>
				<a href="#">css</a>
			</li>
			<li>
				<a href="#">js</a>
			</li>
		</ul>
	</div>
	<div class="btn btn-group">
		<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
			warning<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">html</a>
			</li>
			<li>
				<a href="#">css</a>
			</li>
			<li>
				<a href="#">js</a>
			</li>
		</ul>
	</div>
	<div class="btn btn-group">
		<button class="btn btn-danger dropdown-toggle btn-lg" data-toggle="dropdown">
			danger<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">html</a>
			</li>
			<li>
				<a href="#">css</a>
			</li>
			<li>
				<a href="#">js</a>
			</li>
		</ul>
	</div>
	<br><br>
	<div class="btn btn-group">
		<button class="btn btn-default">默认</button>
		<button class="btn btn-default dropdown-toggle data-toggle" data-toggle="dropdown"><span class="caret"></span></button>
		<ul class="dropdown-menu" role="menu">
			<li>
				<a href="#">html</a>
			</li>
			<li>
				<a href="#">css</a>
			</li>
			<li>
				<a href="#">js</a>
			</li>
		</ul>
	</div><br><br><br><br>
	<div class="btn-group dropup">
		<button class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">default<span class="caret"></span>		
		</button>
		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
			<li>
				<a href="#">html</a>
			</li>
			<li>
				<a href="#">css</a>
			</li>
			<li>
				<a href="#">js</a>
			</li>
		</ul>
	</div>
</body>
</html>

在这里插入图片描述

taojYang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-按钮组
小姑姑的博客
11-12 458
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按钮组</title> <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css"> <script src="../JS/jquery-3.2.1.min
Bootstrap组件-按钮，按钮组
qq_27009517的博客
06-14 199
按钮可以button，也可以是a display: inline-block的使用：a <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width...
Bootstrap 5 按钮组-按钮组下拉菜单
m0_73839298的博客
09-18 302
4.在第二个按钮组的按钮后，添加下拉菜单通过一个名为 "dropdown-menu""的下拉列表项 "" 实现，其中包含了多个 "" 标签，ul>li>a，作为下拉菜单的项目，其中ul中包含多个li，li包含a，li这些项目a具有相同的类（dropdown-item）即下拉列表的下拉链接项，表示它们具有相同的样式。这个按钮组中的按钮具有与前面按钮相同的类（"btn btn-primary"），此外还有一个 "dropdown-toggle"类，表示这个按钮可以作为下拉菜单的触发器，
Bootstrap 下拉菜单dropdown、按钮组btn-group、导航元素nav、导航栏navbar
喜欢文学的程序员
07-31 4997
最近Bootstrap有点让我糊涂，在使用过程中，下拉菜单(dropdown)、按钮组(btn-group)、导航元素(nav)、导航栏(navbar)容易混淆，遂用闲暇时间琢磨琢磨（本文基于Bootstrap3）。 这几者个人理解有点递进的意思： 下拉菜单(dropdown)可以用在后3个中，组合起来可以称呼为：“按钮下拉菜单”或“导航下拉菜单”； 按钮与导航之间没有“合作使用”价值，所以...
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
最新发布
林林一928的博客
06-03 804
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
layui下拉菜单的按钮组（数据表格表头版）
不吃草的程序猿的博客
07-11 4270
layui下拉菜单的按钮组（数据表格表头版） 最近工作中需要使用layui在数据表格的表头工具栏里添加一个下拉按钮组，layui目前还没有开发出相关的功能，所以需要自己手动拼写，在参考了博友们的部分文章后，做了一部分的改动，实现了基本的需求，即下拉按钮组，点击切换功能，注意是需要通过点击进行下拉展示和收起，也就是div的隐藏和显示，实现的思路其实比较简单，博友们如果有更好的方式欢迎留言 html： <script type="text/html" id="toolbar"> <bu
Bootstrap系列之下拉菜单（Dropdowns）
老__L的博客
06-06 1万+
使用Bootstrap下拉插件切换上下文覆盖来显示链接列表和更多内容。下拉列表是可切换的，上下文覆盖显示链接列表和更多。它们与包含的Bootstrap下拉式JavaScript插件进行交互。它们是通过点击而不是悬停来切换的;这是一个有意的设计决策。下拉框建立在第三方库Popper上，它提供动态定位和视口检测。请确保在Bootstrap JavaScript之前包含或使用包含Popper的 / 。Popper不用于定位导航栏中的下拉框，因为动态定位不是必需的。如果您从源代码构建我们的JavaScript，它需
Bootstrap的下拉菜单组件相关知识
昊虹AI笔记
10-12 2637
Bootstrap的下拉菜单组件
JS组件Bootstrap按钮组与下拉按钮详解
10-22
本篇文章将详细介绍JS组件中的Bootstrap按钮组和下拉按钮的使用方法。 **一、按钮组（Button Groups）** 1. **单个按钮组**：当你需要将一组相关的按钮放在一起时，可以使用`.btn-group`类来包裹这些`.btn`类的...
Bootstrap按钮下拉菜单组件详解
09-02
在CSS方面，Bootstrap提供了`.btn-group`和`.dropdown-menu`的样式，确保按钮组的外观和下拉菜单的行为。例如，`.btn-group.open .dropdown-toggle`类用于在菜单展开时应用阴影效果，增强视觉反馈。`.caret`类则是...
Bootstrap按钮组简单实现代码
08-31
Bootstrap按钮组嵌套下拉菜单 如果我们想要将按钮组嵌套下拉菜单，可以使用dropdown类，例如： <!-- 按钮组嵌套下拉菜单 --> <button type="button" class="btn btn-default">left ...
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
08-31
主要介绍了BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)的相关资料,需要的朋友可以参考下
Bootstrap CSS组件之按钮下拉菜单
08-31
`.btn-group`用于创建一个按钮组，`.btn`用于定义按钮的样式，`.dropdown-toggle`则用于添加下拉箭头，并触发下拉菜单的显示和隐藏。`.dropdown-menu`是下拉列表的容器，包含一系列的链接或操作项。 1. **组合式...
Bootstrap4 按钮组
01-19
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 元素上添加 .btn-group 类来创建按钮组。 实例 Apple Samsung Sony 提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。 ...
使用Bootstrap设计一个下拉菜单
m0_64962002的博客
05-18 775
使用Bootstrap设计一个下拉列表框
零基础Bootstrap入门教程(19)--下拉菜单、按钮式下拉菜单
程序员大阳
02-28 3776
本文目录1. 概述2. 下拉菜单2.1 普通下拉菜单2.2 更换颜色2.3 更换尺寸2.4 添加分割线2.5 菜单分组2.6 上拉菜单3. 按钮式下拉菜单4. 小结 1. 概述 下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。 Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下
dash-bootstrap-下拉式菜单
lalalalala233的博客
01-11 560
from logging import debug import dash from dash import Input, Output, State, html import dash_bootstrap_components as dbc from dash_bootstrap_components.themes import BOOTSTRAP app = dash.Dash(external_stylesheets=[dbc.themes, BOOTSTRAP]) dropdown = htm.
Bootstrap 快速入门之第五章 组件之图标&下拉菜单&按钮组&按钮式下拉菜单
qq_61313896的博客
05-01 1620
一：图标 Bootstrap 图标库的所有图标都是 SVG 格式的，因此你可以通过以下几种方式将它们添加到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。我们建议设置width: 1em（以及可选的height: 1em），便于你通过font-size属性重置图标的大小。 用法： 1.内嵌 将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 width 和 height 属性进行了重新设置。 <svg xmlns="...
Bootstrap 组件 - 按钮组与下拉按钮（Button Groups & Button Dropdowns）
热门推荐
Try my best
01-28 3万+
按钮组（Button Groups） 单个按钮组 用.btn-group封装多个带.btn的 1 2 3 多个按钮组 将多个放进中。 ... ... 垂直按钮组 向.btn-group添加.btn-group-vertical。 ... 下拉按钮（Button Dropdowns）
bootstrap下拉菜单
04-23
怎么用？ 您好，关于您提出的问题，我可以为您提供一些基本的使用方法。 Bootstrap下拉菜单是通过HTML和CSS来构建的，...希望这可以帮助您更好地使用Bootstrap下拉菜单。如果您有任何其他问题，也可以随时向我提问！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值