您的位置：首页 > Web前端 > BootStrap

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

2017-03-14 17:29 381 查看

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>

5、效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap 按钮组大小 嵌套 垂直
相关文章推荐
新的分享
章节导航