Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
2024-05-23 00:59:44
一.按钮
按钮是网页中不可缺少的一种组件，例如页面中搜索、注册等按钮。按钮还广泛应用于表单、下拉菜单、模态框等场景中。
1.预定义样式类
Bootstrap提供了btn来定义按钮，btn定义了基本的按钮样式类。此外，Bootstrap定义了多个预定义的按钮样式，每个样式都有自己的语义目的。
例：预定义按钮样式示例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body class="container"><button type="button" class="btn btn-primary">primary</button><button type="button" class="btn btn-secondary">secondary</button><button type="button" class="btn btn-success">success</button><button type="button" class="btn btn-danger">danger</button><button type="button" class="btn btn-warning">warning</button><button type="button" class="btn btn-info">info</button><button type="button" class="btn btn-light">light</button><button type="button" class="btn btn-dark">dark</button><button type="button" class="btn btn-link">link</button></body>
</html>
结果图：
2.设计边框颜色
按钮设计时，如果不希望使用沉重的背景颜色，可以使用.btn-outline-*替换预定义样式类。使用.btn-outline-*类可以没置按钮的边框，*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。
例：设计边框颜色示例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body class="container"><button type="button" class="btn btn-outline-primary">primary</button><button type="button" class="btn btn-outline-secondary">secondary</button><button type="button" class="btn btn-outline-success">success</button><button type="button" class="btn btn-outline-danger">danger</button><button type="button" class="btn btn-outline-warning">warning</button><button type="button" class="btn btn-outline-info">info</button><button type="button" class="btn btn-outline-light">light</button><button type="button" class="btn btn-outline-dark">dark</button><button type="button" class="btn btn-outline-link">link</button></body>
</html>
结果图：
3.设计大小
使用.btn-lg、.btn-sm类样式，可分别实现大规格按钮、小规格按钮的定义。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><button type="button" class="btn btn-primary btn-lg">大号按钮</button><button type="button" class="btn btn-primary">默认</button><button type="button" class="btn btn-primary btn-sm">小号按钮</button>
</body></html>结果图：
4.激活和禁用状态
给按钮添加.active类样式实现激活状态。激活状态下，按钮背景颜色更深、边框变暗、带内阴影。给按钮添加.disabled类样式实现禁用状态，使按钮看起来处于非活动的状态，不具有交互性，点击不会有响应。
例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><button type="button" class="btn btn-primary btn-lg">原始按钮</button><button type="button" class="btn btn-primary btn-lg active">激活按钮</button><button type="button" class="btn btn-primary btn-lg disabled">禁用按钮</button>
</body></html>结果图：
5.按钮标签
Bootstrap使用btn类来定义按钮，btn可以在<button>元素上使用，也可以在<a>、<input>元素
上使用，同样能带来按钮效果。
例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><a class="btn btn-primary" href="#" role="button">Link</a><button class="btn btn-primary" type="submit">Button</button><input class="btn btn-primary" type="button" value="Input"><input class="btn btn-primary" type="submit" value="Submit"><input class="btn btn-primary" type="reset" value="Reset">
</body></html>结果图：
二、按钮组
如果想要将多个按钮组合放在一起，可以使用按钮组来实现。
1.定义按钮组
将多个<a>或<button>元素放在一个含有.btn-group类容器中，便可形成一个按钮组。
例：创建一个基本按钮组
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><div class="btn-group"><button type="button" class="btn btn-secondary">1</button><button type="button" class="btn btn-secondary">2</button><button type="button" class="btn btn-secondary">3</button><button type="button" class="btn btn-secondary">4</button><button type="button" class="btn btn-secondary">5</button></div>
</body></html>结果图：
2.工具栏按钮组
根据需要使用样式定义，对按钮进行群组、间隔等定义，将按钮组的组合成为更复杂组件的按钮
工具栏。把多个基本按钮组放在一个.btn-toolbar类容器中就形成了工具栏按钮组。
例：创建一个工具栏按钮组
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body class="container"><div class="btn-toolbar"><div class="btn-group mr-2"><button type="button" class="btn btn-primary">上一页</button></div><div class="btn-group"><button type="button" class="btn btn-secondary">1</button><button type="button" class="btn btn-secondary">2</button><button type="button" class="btn btn-secondary">3</button><button type="button" class="btn btn-secondary">4</button><button type="button" class="btn btn-secondary">5</button></div><div class="btn-group ml-2"><button type="button" class="btn btn-primary">下一页</button></div></div></body>
</html>
结果图：
例：与输入框结合示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><div class="btn-toolbar"><div class="btn-group mr-2"><button type="button" class="btn btn-secondary">1</button><button type="button" class="btn btn-secondary">2</button><button type="button" class="btn btn-secondary">3</button><button type="button" class="btn btn-secondary">4</button></div><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">@</div></div><input type="text" class="form-control" placeholder="Input group example"></div></div>
</body></html>结果图：
3.设计大小
Bootstrap提供了.btn-group-lg，.btn-group-sm类作用在.btn-group类的容器，可以控制按钮组下的每个子按钮，实现样式缩放。
例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body class="container"><div class="btn-group btn-group-lg"><button type="button" class="btn btn-secondary">大号按钮组</button><button type="button" class="btn btn-secondary">大号按钮组</button></div><div class="btn-group"><button type="button" class="btn btn-secondary">默认按钮组</button><button type="button" class="btn btn-secondary">默认按钮组</button></div><div class="btn-group btn-group-sm"><button type="button" class="btn btn-secondary">小号按钮组</button><button type="button" class="btn btn-secondary">小号按钮组</button></div></body>
</html>
结果图：
4.嵌套按钮
将.btn-group放在另一个.btn-group里，可以实现按钮组与下拉菜单的组合。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body class="container"><div class="btn-group"><button type="button" class="btn btn-secondary">免费注册</button><button type="button" class="btn btn-secondary">手机逛淘宝</button><div class="btn-group"><button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">我的淘宝</button><div class="dropdown-menu"><a class="dropdown-item" href="#">已买到的宝贝</a><a class="dropdown-item" href="#">我的足迹</a></div></div> </div></body>
</html>
结果图：
5.垂直排列
将一组按钮放在含有.btn-group-vertical类的容器中，就形成了垂直分布的按钮组。
例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><div class="btn-group-vertical"><button type="button" class="btn-primary">图书</button><button type="button" class="btn-primary">家居</button><button type="button" class="btn-secondary">文具</button><button type="button" class="btn-secondary">服饰</button><div class="dropdown"><button type="button" class="btn-info" data-toggle = "dropdown">食品</button><div class="dropdown-menu"><button type="button" class="dropdown-item">休闲食品</button><button type="button" class="dropdown-item">生鲜食品</button></div></div></div>
</body></html>结果图：
三、下拉菜单
下拉菜单是网页中常见的组件之一，Bootstrap定义了一套完整的下拉菜单组件。设计出合理，美观的下拉菜单，不仅可以合理布局页面，还可以为网页增色。
1.定义下拉菜单
下拉菜单组件应包含在.dropdown容器中，或使用
position: relative的容器。该容器包含两部分，即触发元素和下拉菜单。触发元素可以是<a>或
<button>元素，下拉菜单包含在.dropdown-menu容器中。
下拉菜单的实现思路:
当用户单击页面中选项按钮时，页面会展示当前选项下的菜单选项;
当用户再次单击页面中的该选项按钮时，页面会自动隐藏当前选项按钮下的菜单选项。
例：基本的下拉菜单
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body class="container"><div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button><div class="dropdown-menu"><a href="#" class="dropdown-item">HTML5</a><a href="#" class="dropdown-item">CSS3</a><a href="#" class="dropdown-item">JavaScript</a></div></div></body>
</html>
结果图：
2.设置下拉菜单的样式
例：下拉菜单向右展开示例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body class="container"><div class="dropright"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button><div class="dropdown-menu"><a href="#" class="dropdown-item">HTML5</a><a href="#" class="dropdown-item">CSS3</a><a href="#" class="dropdown-item">JavaScript</a></div></div></body>
</html>
结果图：
例：激活和禁用菜单项示例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button><div class="dropdown-menu"><button type="button" class="dropdown-item active">HTML5</button><button type="button" class="dropdown-item">CSS3</button><button type="button" class="dropdown-item disabled">JavaScript</button></div></div>
</body></html>结果图：
例：设置下拉菜单项右对齐
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button><div class="dropdown-menu dropdown-menu-right"><button type="button" class="dropdown-item">HTML5</button><button type="button" class="dropdown-item">CSS3</button><button type="button" class="dropdown-item">JavaScript</button></div></div>
</body></html>结果图：
例：菜单内容示例1
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body class="container"><div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button><div class="dropdown-menu"><h6 class="dropdown-header">菜单标题1</h6><button type="button" class="dropdown-item">菜单项1</button><button type="button" class="dropdown-item">菜单项2</button><div class="dropdown-divider"></div><h6 class="dropdown-header">菜单标题2</h6><button type="button" class="dropdown-item">菜单项3</button><button type="button" class="dropdown-item">菜单项4</button></div></div></body>
</html>
结果图：
例：菜单内容示例2
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script><script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head><body class="container"><div class="dropdown" style="max-width: 200px;"><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button><div class="dropdown-menu"><p class="px-4">下面显示一个表单</p><form class="px-4 py-2"><div class="form-group"><label>Email address</label><input type="email" class="form-control" placeholder="email@example.com" /></div><div class="form-group"><label>Password</label><input type="password" class="form-control" placeholder="Password" /></div></form></div></div>
</body></html>结果图：
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】相关推荐
- Android 对控件设置边框样式（边框颜色，圆角）和图片样式（圆角）
1.设置边框.圆角.背景色案例 在drawable中 新建一个edge.xml文件 <?xml version="1.0" encoding="utf-8" ...
- java基础入门-预定义类与自定义类
预定义类与自定义类 先上代码 <span style="font-size:14px;">package com.ray.object;import java.util ...
- Bootstrap组件学习之导航和导航条
导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...
- php边框的颜色 怎么设置,网页中table表格如何修改边框颜色
table表格是网页制作中以前较常使用的一种布局方式,但随着DIV+CSS的兴起,table表格已辉煌不在.但它在我们制作网页中也是时有用到.table表格也可以使用DIV一样随意的设置它的边框颜色. ...
- Bootstrap组件——下拉菜单
下拉菜单 一.下拉菜单 1.单一按钮的下拉菜单 1.btn菜单 2.``菜单 2.分离式按钮下拉菜单 3.菜单尺寸 4.方向 5.菜单项 6.非交互式下拉菜单 7.偏移属性 8.方法与事件 一.下拉菜 ...
- html select滚动条样式修改,如何定义Select下拉框的边框颜色和滚动条样式
如何定义Select下拉框的边框颜色和滚动条样式 (2012-11-07 15:00:25) 标签: 定义select下拉框 select定义css不显示 杂谈 如何定义Select下拉框的边框颜色和 ...
- 不使用输入框如何实现下拉_如何利用Axure实现下拉子菜单？
Axure RP是一款专业的快速原型设计工具,让我们能够快速设计并创建出应用软件或Web页面的具备高保真和交互能力的原型.通过原型设计,不但能更好地与客户进行交流确认,也能明确地给开发人员以成品效果作 ...
- 右边菜单_Excel – 如何始终显示下拉菜单右边的小箭头？
制作下拉菜单,不是什么高深的技巧,我在各种案例中也经常会用到. 如果要学习多级联动菜单的制作,可参见 Excel indirect 函数(2) – 制作多级联动菜单(文末彩蛋) 最近有同学提出了一个关 ...
- 10款菜单导航代码_jquery 导航菜单_js 导航菜单_二级导航条下拉菜单（一）
jQuery左侧下拉导航菜单后台框架模板 js侧边隐藏菜单收缩特效 黑色的左侧导航管理面板ui特效 企业官网tab下拉菜单特效 Facebook自定义多级导航菜单查询 jQuery圆形转盘多级菜单代码 ...
最新文章
- 1900页数学基础：面向CS的线性代数、拓扑、微积分和最优化
- BZOJ2831(小强的金字塔系列问题--区域整点数求法)
- 关于oracle date类型值0000-0-0的分析
- 机器人抓取方式，值得研究。
- 中专计算机专业学c语言吗,中专计算机专业学什么 有哪些课程
- toj 4610 Biggest Number
- 数据--dp，线段树优化
- android评论功能带emoji,分享一个自己写的emoji-comments评论组件
- 悲哀！面试现场，简单几道java算法题，90%程序员没写出来
- 源码实现 -- strdel
- 分享11个web前端开发实战项目案例+源码
- AD7124驱动代码(基于GD32F103 SPI)
- moment.js计算时间差
- iMazing v2021绿色便携版iOS设备数据管理工具
- macOS上使用aircrack-ng暴力破解Wi-Fi密码
- 太原理工大计算机专业几本,太原理工大学是几本 学生评价怎么样好不好(10条)...
- 【Linux】计算机的软硬件体系结构
- 基于 STM32 和 NB-IoT 的可穿戴式老人防摔监测系统
- 纯电动汽车两档ATM变速箱simulink模型，模型实现了两档AMT换挡策略和换挡过程仿真
- OpenCV的各种矩阵基本运算、基本操作及示例代码(加、减、乘、点乘、点除、乘方、开方、累加、转置、比较等)