Bootstrap组件_按钮组
2024-05-20 05:35:17
按钮组通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按钮组</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></body>
</html>按钮工具栏把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按钮组</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></body>
</html>尺寸只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了
多个按钮组时也适用。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按钮组</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-toolbar" role="toolbar"><div class="btn-group btn-group-lg" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group btn-group-sm" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group btn-group-xs" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div></div></div></body>
</html>嵌套想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按钮组</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expended="false" ><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li></ul></div></div></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按钮组</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-group btn-group-justified" role="group"><div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">middle</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">right</button></div></div></div></body>
</html>Bootstrap组件_按钮组相关推荐
- Bootstrap组件_输入框组
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态 、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
一.按钮 按钮是网页中不可缺少的一种组件,例如页面中搜索.注册等按钮.按钮还广泛应用于表单.下拉菜单.模态框等场景中. 1.预定义样式类 Bootstrap提供了btn来定义按钮,btn ...
- Bootstrap 组件 Button 按钮
按钮 使用Bootstrap 的自定义按钮样式对于一些行动在 表单中,对话框,和更多支持的多种大小.状态还有更多. 例子 Bootstrap包含几个预定义的按钮样式,每个样式都有自己的语义目的,还添加 ...
- Bootstrap系列之按钮组（Button group）
文章の目录 1.基本示例 2.按钮工具栏 3.Sizing 4.嵌套 5.Vertical variation 写在最后 将一系列按钮与按钮组一起放在一行中,并使用JavaScript增强它们的功能. ...
- Bootstrap禁用某个按钮组
禁用某个按钮组 某些特殊情况下,可能需要垂直分组的按钮效果.这也很简单,只需把 .btn-group类换成.btn-group-vertical类,就可以让按钮组中的按钮堆叠排列.堆叠排列的按钮组中, ...
- Bootstrap组件_媒体对象，列表组
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 点击父组件按钮 显示子组件_按钮设计用户界面组件系列
点击父组件按钮 显示子组件 重点 (Top highlight) In order to design the right interactions, we need to look back at ...
- Bootstrap组件_路径导航，标签，徽章
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Bootstrap组件_导航
标签页注意 .nav-tabs 类依赖 .nav 基类.<!DOCTYPE html> <html lang="en"> <head><m ...
最新文章
- 【WEB安全】轻松检测钓鱼网站的技巧
- 系统服务器异常0,贪婪洞窟云服务器异常0
- 5G的7大用途，你知道几个？
- Ribbon的权重负载均衡策略
- 关联与依赖区别理解（原）
- UVA10317- Equating Equations(回溯+剪枝)
- win10设置HTML桌面背景,Win10系统直接将视频设置为桌面背景的方法
- cad计算机快捷键命令大全,cad快捷键命令有哪些？常用cad快捷键命令大全
- 漂亮的字体 手写_20种漂亮的草书和手写字体可供下载
- Ffmpeg 视频教程 向视频中添加文字
- 数据库系统概论练习4
- 线性回归、岭回归、逻辑回归、聚类
- 金蝶标准版迷你版常见问题汇总
- 历史上的今天：大型计算机先驱和小型机之父诞生；中国雅虎邮箱成历史
- STA X（X为主存地址）指令发出的微操作命令
- Windows屏幕工具（屏幕截图、贴图/屏幕取色/截图文字、表格识别/截图翻译、GIF录屏、GIF压缩）
- 响应式鲜花店预订网站织梦源码
- 考虑储能削峰填谷的含DG配电网可靠性评估
- 破解XP管理员帐户密码
- 项目管理：（一）项目管理一般知识