首页 > 代码库 > （三）按钮组
（三）按钮组
一、按钮组
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="<%=path%>/bootstrap/css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="<%=path%>/bootstrap/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="<%=path%>/bootstrap/js/bootstrap.min.js"></script> <title>Insert title here</title> <script type="text/javascript"> </script> </head> <body> <div class="btn-group"> <button class="btn btn-default">按钮一</button> <button class="btn btn-default">按钮一</button> <button class="btn btn-default">按钮一</button> </div> </body>
效果：
-
class="btn-group" 定义一个按钮组容器。
二、按钮工具栏
- 把一组
<div class="btn-group">组合进一个<div class="btn-toolbar">中就可以做成更复杂的组件。
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="<%=path%>/bootstrap/css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="<%=path%>/bootstrap/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="<%=path%>/bootstrap/js/bootstrap.min.js"></script> <title>Insert title here</title> <script type="text/javascript"> </script> </head> <body> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default">按钮一</button> <button class="btn btn-default">按钮二</button> </div> <div class="btn-group"> <button class="btn btn-default">按钮三</button> <button class="btn btn-default">按钮四</button> </div> </div> </body>
效果：
（三）按钮组
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。