Bootstrap 按钮组大小，嵌套，垂直的使用

最新推荐文章于 2023-10-11 10:21:17 发布

boonyaxnn

最新推荐文章于 2023-10-11 10:21:17 发布

阅读量2.1k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 按钮组大小嵌套垂直

本文链接：https://blog.csdn.net/boonyaxnn/article/details/62046166

版权

Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1、按钮的大小class .btn-group-* 的使用，代码

<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>

2、在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group ，代码

<div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-default">按钮 7</button>
			<button type="button" class="btn btn-default">按钮 8</button>
          <div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				按钮9<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="#">下拉 1</a></li>
					<li><a href="#">下拉 2</a></li>
				</ul>
			</div>
		</div>

3、垂直的按钮组class .btn-group-vertical 的使用，代码

<div class="btn-group btn-group-lg">
			<div class="btn-group-vertical">
              <button type="button" class="btn btn-default">按钮 10</button>
              <button type="button" class="btn btn-default">按钮 11</button>

             <div class="btn-group-vertical">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    	       按钮12<span class="caret"></span>
             </button>
                 <ul class="dropdown-menu">
                   <li><a href="#">下拉1</a></li>
                  <li><a href="#">下拉 2</a></li>
                </ul>
            </div>
         </div>
		</div>

4、综合Bootstrap 按钮组大小class .btn-group-*，嵌套，垂直class .btn-group-vertical的使用，html代码

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap-按钮组的大小,嵌套</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
        	body {      
              padding-top: 150px;        
              font-family: '宋体';  
              background: #127CC1;
              }  
        </style>
	</head>
	<body>
    <div class="container">
		<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-lg">
			<button type="button" class="btn btn-default">按钮 7</button>
			<button type="button" class="btn btn-default">按钮 8</button>
          <div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				按钮9<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="#">下拉 1</a></li>
					<li><a href="#">下拉 2</a></li>
				</ul>
			</div>
		</div>
		<div class="btn-group btn-group-lg">
			<div class="btn-group-vertical">
              <button type="button" class="btn btn-default">按钮 10</button>
              <button type="button" class="btn btn-default">按钮 11</button>

             <div class="btn-group-vertical">
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    	       按钮12<span class="caret"></span>
             </button>
                 <ul class="dropdown-menu">
                   <li><a href="#">下拉1</a></li>
                  <li><a href="#">下拉 2</a></li>
                </ul>
            </div>
         </div>
		</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	</body>
</html>