极客教程Bootstrap 4按钮组
Bootstrap提供了一些类，允许沿着同一直线、水平或垂直方向对按钮进行分组。要分组的按钮被嵌套在一个 <div>元素，其类别为.btn-group。
水平排列的按钮组： .btn-group类用于创建水平排列的按钮组。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="btn-group">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<button type="button"
class="btn btn-success">
JavaScript
</button>
</div>
</div>
</body>
</html>
输出:
垂直排列的按钮组： .btn-group-vertical类在父div中用于创建垂直按钮组。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="btn-group-vertical">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<button type="button"
class="btn btn-success">
JavaScript
</button>
</div>
</div>
</body>
</html>
输出:
按钮组的大小：整个按钮组可以通过在.btn-group父元素中包含btn-group-*（*可以是sm、md或lg）类来获得相同的大小，而不是在每个按钮中包含大小类。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="btn-group btn-group-lg">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<button type="button"
class="btn btn-success">
JavaScript
</button>
</div>
<br><br>
<div class="btn-group btn-group-md">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<button type="button"
class="btn btn-success">
JavaScript
</button>
</div>
<br><br>
<div class="btn-group btn-group-sm">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<button type="button"
class="btn btn-success">
JavaScript
</button>
</div>
</div>
</body>
</html>
输出:
嵌套按钮组和制作下拉菜单：一个按钮组可以嵌套在另一个按钮组中，下拉菜单可以通过这种方式创建。
1.单按钮下拉。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="btn-group">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success btn-group">
CSS
</button>
<div class="btn-group">
<button type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
JavaScript
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">React</a></li>
<li><a href="#">Vue</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
输出:
2.分割按钮下拉。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="btn-group">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success btn-group">
CSS
</button>
<div class="btn-group">
<button type="button"
class="btn btn-success">
JavaScript
</button>
<button type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">React</a></li>
<li><a href="#">Vue</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
输出:
然而，当按钮嵌套在.btn-group-vertical类下时，分割按钮的下拉功能并不像预期的那样工作。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Button Groups</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="btn-group-vertical">
<button type="button"
class="btn btn-success">
HTML
</button>
<button type="button"
class="btn btn-success">
CSS
</button>
<div class="btn-group">
<button type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown">
JavaScript
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">React</a></li>
<li><a href="#">Vue</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
输出:
支持的浏览器:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari