bootstrap按钮组

来源：互联网发布：微博登录显示网络问题编辑：程序博客网时间：2024/06/07 20:10

1、基础实例

代码如下

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>bootstrap按钮组</title>    <link href="dist/css/bootstrap.min.css" rel="stylesheet">     <script src="js/jquery-1.11.2.min.js"></script>    <script src="dist/js/bootstrap.min.js"></script>  </head>  <body>  <div class="btn-group" role="group" aria-label="">  <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>  </body></html>

效果图

按钮工具栏
代码如下

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>bootstrap按钮组</title>    <link href="dist/css/bootstrap.min.css" rel="stylesheet">     <script src="js/jquery-1.11.2.min.js"></script>    <script src="dist/js/bootstrap.min.js"></script>  </head>  <body><div class="btn-toolbar" role="toolbar">  <div class="btn-group">  <button type="button" class="btn btn-default">按钮 1</button>  <button type="button" class="btn btn-default">按钮 2</button>  <button type="button" class="btn btn-default">按钮 3</button> </div>  <div class="btn-group">  <button type="button" class="btn btn-default">按钮 4</button>  <button type="button" class="btn btn-default">按钮 5</button>  <button type="button" class="btn btn-default">按钮 6</button>  </div>  <div class="btn-group">  <button type="button" class="btn btn-default">按钮 7</button>  <button type="button" class="btn btn-default">按钮 8</button>  <button type="button" class="btn btn-default">按钮 9</button>  </div></div>  </body></html>

效果图

尺寸
代码如下

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>bootstrap按钮组</title>    <link href="dist/css/bootstrap.min.css" rel="stylesheet">     <script src="js/jquery-1.11.2.min.js"></script>    <script src="dist/js/bootstrap.min.js"></script>  </head>  <body><div class="btn-toolbar" role="toolbar">  <div class="btn-group btn-group-lg">  <button type="button" class="btn btn-default">按钮 1</button>  <button type="button" class="btn btn-default">按钮 2</button>  <button type="button" class="btn btn-default">按钮 3</button> </div>  <div class="btn-group btn-group-sm">  <button type="button" class="btn btn-default">按钮 4</button>  <button type="button" class="btn btn-default">按钮 5</button>  <button type="button" class="btn btn-default">按钮 6</button>  </div>  <div class="btn-group btn-group-xs">  <button type="button" class="btn btn-default">按钮 7</button>  <button type="button" class="btn btn-default">按钮 8</button>  <button type="button" class="btn btn-default">按钮 9</button>  </div></div>  </body></html>

效果图

嵌套
代码如下

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>bootstrap按钮组</title>    <link href="dist/css/bootstrap.min.css" rel="stylesheet">     <script src="js/jquery-1.11.2.min.js"></script>    <script src="dist/js/bootstrap.min.js"></script>  </head>  <body><div class="btn-group" role="group" aria-label="...">  <button type="button" class="btn btn-default">1</button>  <button type="button" class="btn btn-default">2</button>  <div class="btn-group" role="group">    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">      Dropdown      <span class="caret"></span>    </button>    <ul class="dropdown-menu" role="menu">      <li><a href="#">Dropdown link</a></li>      <li><a href="#">Dropdown link</a></li>    </ul>  </div></div>  </body></html>

效果图

垂直排列
代码如下

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>bootstrap按钮组</title>    <link href="dist/css/bootstrap.min.css" rel="stylesheet">     <script src="js/jquery-1.11.2.min.js"></script>    <script src="dist/js/bootstrap.min.js"></script>  </head>  <body><div class="btn-group-vertical">  <button type="button" class="btn btn-default">按钮 1</button>  <button type="button" class="btn btn-default">按钮 2</button>  <div class="btn-group-vertical">    <button type="button" class="btn btn-default dropdown-toggle"       data-toggle="dropdown">      下拉      <span class="caret"></span>    </button>    <ul class="dropdown-menu">      <li><a href="#">下拉链接 1</a></li>      <li><a href="#">下拉链接 2</a></li>    </ul>  </div></div>  </body></html>

效果图

注：更多学习资源尽在java教程网，http://java.662p.com/thread-4517-1-1.html

1 0