Bootstrap 简明教程
Bootstrap - Button Group
本章将讨论 Bootstrap 按钮组。Bootstrap 按钮组将多个按钮水平或垂直地放在一行上。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group" role="group" aria-label="Basic Example">
<button type="button" class="btn btn-info">Register</button>
<button type="button" class="btn btn-danger">Submit</button>
<button type="button" class="btn btn-warning">Cancel</button>
</div>
</body>
</html>
-
作为 .nav navigation components 的替代,这些类也可以应用于一组链接。
-
你可以通过使用 .active 类来突出显示一个链接。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group my-2">
<a href="#" class="btn btn-success active" aria-current="page">Registration Link</a>
<a href="#" class="btn btn-success">Submit</a>
<a href="#" class="btn btn-success">Cancel</a>
</div>
</body>
</html>
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group mt-2" role="group" aria-label="Mixed styles">
<button type="button" class="btn btn-info">Register</button>
<button type="button" class="btn btn-success">Cancel</button>
<button type="button" class="btn btn-warning">Submit</button>
</div>
</body>
</html>
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group my-2" role="group" aria-label="Basic outlined">
<button type="button" class="btn btn-outline-primary">Register</button>
<button type="button" class="btn btn-outline-dark">Submit</button>
<button type="button" class="btn btn-outline-warning">Cancel</button>
</div>
</body>
</html>
Checkbox and radio button groups
使用类似复选框切换按钮的按钮,我们可以创建一个干净漂亮的按钮组。若要实现此操作,请使用 .btn-check 类和 type="checkbox" 。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group my-2" role="group" aria-label="checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btnCheckbox1" autocomplete="off">
<label class="btn btn-outline-primary" for="btnCheckbox1">Register</label>
<input type="checkbox" class="btn-check" id="btnCheckbox2" autocomplete="off">
<label class="btn btn-outline-warning" for="btnCheckbox2">Submit</label>
<input type="checkbox" class="btn-check" id="btnCheckbox3" autocomplete="off">
<label class="btn btn-outline-info" for="btnCheckbox3">Cancel</label>
</div>
</body>
</html>
使用类似于单选按钮的按钮切换按钮,我们可以创建一个无缝外观的按钮组。要实现此功能,请使用 .btn-check 和 type="radio" 。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group" role="group" aria-label="radio toggle button group">
<input type="radio" class="btn-check" name="radioButton" id="buttonRadio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="buttonRadio1">Register</label>
<input type="radio" class="btn-check" name="radioButton" id="buttonRadio2" autocomplete="off">
<label class="btn btn-outline-warning" for="buttonRadio2">Submit</label>
<input type="radio" class="btn-check" name="radioButton" id="buttonRadio3" autocomplete="off">
<label class="btn btn-outline-success" for="buttonRadio3">Cancel</label>
</div>
</body>
</html>
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-toolbar mt-2" role="toolbar" aria-label="Toolbar button groups">
<div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup1">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-secondary">Secondary</button>
</div>
<div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
<div class="btn-group" role="group" aria-label="toolbarButtonGroup3">
<button type="button" class="btn btn-warning">Warning</button>
</div>
</div>
</body>
</html>
在工具栏中组合输入组和按钮组。使用实用程序适当地设置空间。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-toolbar mb-3" role="toolbar" aria-label="toolbarButtonGroup1">
<div class="btn-group me-2" role="group" aria-label="toolbarButtonGroup2">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-secondary">secondary</button>
</div>
<div class="input-group">
<div class="input-group-text" id="inputbtnGroup1">@</div>
<input type="text" class="form-control" placeholder="Username" aria-label="toolbarButtonGroup3" aria-describedby="inputButtonGroup1">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="toolbarButtonGroup4">
<div class="btn-group" role="group" aria-label="toolbarButtonGroup1">
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-success">Success</button>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="tutorialspoint" aria-label="toolbarButtonGroup5" aria-describedby="inputButtonGroup2">
<div class="input-group-text" id="inputbtnGroup2">@example.com</div>
</div>
</div>
</body>
</html>
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h6 class="mt-4">Default size button group</h6>
<div class="btn-group" role="group" aria-label="Default size button group">
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
</div>
<h6 class="mt-4">Small size button group</h6>
<div class="btn-group btn-group-sm" role="group" aria-label="Small size button group">
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
</div>
<h6 class="mt-4">Large size button group</h6>
<div class="btn-group btn-group-lg" role="group" aria-label="Large size button group">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-info">Info</button>
</div>
</body>
</html>
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group mt-2" role="group" aria-label="Nested dropdown">
<button type="button" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-warning">Cancel</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Languages
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">English</a></li>
<li><a class="dropdown-item" href="#">Hindi</a></li>
</ul>
</div>
</div>
</body>
</html>
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group-vertical mt-2" role="group" aria-label="Button group with verical variation">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
</div>
</body>
</html>
使用 dropdown menu 创建垂直按钮组。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Secondary</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Languages
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">English</a></li>
<li><a class="dropdown-item" href="#">French</a></li>
</ul>
</div>
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
</body>
</html>
使用 radio buttons 创建垂直按钮组。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Button Groups</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="btn-group-vertical mt-2" role="group" aria-label="Vertical button group with radio">
<input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton1" autocomplete="off" >
<label class="btn btn-outline-warning" for="verticalRadioButton1">Unchecked Radio Button</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton2" autocomplete="off" checked>
<label class="btn btn-outline-warning" for="verticalRadioButton2">checked Radio Button</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="verticalRadioButton3" autocomplete="off">
<label class="btn btn-outline-warning" for="verticalRadioButton3">Unchecked Radio Button</label>
</div>
</body>
</html>