Kumpulan butang Bootstrap


Kumpulan butang membenarkan berbilang butang disusun pada baris yang sama. Ini berguna apabila anda ingin menjajarkan butang bersama-sama. Anda boleh menambah radio JavaScript pilihan dan gelagat gaya kotak semak melalui pemalam Butang Bootstrap.

Jadual berikut meringkaskan beberapa kelas penting yang disediakan oleh Bootstrap untuk menggunakan kumpulan butang:

Class描述代码示例
.btn-group该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>
.btn-toolbar该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
.btn-group-vertical该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。
<div class="btn-group-vertical">
  ...
</div>

Kumpulan Butang Asas

Contoh berikut menunjukkan penggunaan kelas .btn-group yang dibincangkan dalam jadual di atas:

< !DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - Kumpulan Butang Asas</title>
<link href="http: //libs. baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/ 2.0.0/ jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js" >< /skrip></kepala>
<badan>

<div class="btn-group">
<button type="button" class= "btn btn- lalai">Butang 1</butang>
<button type="button" class="btn btn-default">Butang 2</button>
<button type=" button" class= "btn btn-default">Butang 3</button>
</div>

</body>
</html>
><🎜
Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的按钮组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

Bar Alat Butang

Contoh berikut menunjukkan penggunaan kelas .btn-toolbar dibincangkan dalam jadual di atas:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - Bar Alat Butang</title>
<link href="http://libs.baidu .com/bootstrap /3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery .min.js "></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></ script>< /head>
<badan>

<div class="btn-toolbar" role="toolbar">
<div class="btn-group" >
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default"> butang>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class=" btn-group" >
<button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn- default"> Butang 5</button>
<button type="button" class="btn btn-default">Button 6</button>
</div>
< btn-group">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class= "btn btn- lalai">Butang 8</butang>
<button type="button" class="btn btn-default">Butang 9</button>
</div>
< /div>

</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮工具栏</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/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>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Saiz butang

Contoh berikut menunjukkan penggunaan kelas .btn-group-* dibincangkan dalam jadual di atas:

< html>
<html>
<head>
<title>Contoh Bootstrap - Saiz Kumpulan Butang</title>
<link href="http:// libs.baidu. com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0. min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script> ;</kepala>
<badan>

<div class="btn-group btn-group-lg">
<button type="button " class=" btn btn-default">Butang 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button " class="btn btn-default">Butang 3</button>
</div>
<div class="btn-group btn-group-sm">
< button type="button" class="btn btn-default">Button 4</button>
<button type="button" class="btn btn-default">Butang 5< 🎜> <button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group- xs">
<button type="button" class="btn btn-default">Button 7</button>
<button type="button" class="btn btn-default" >Butang 8</butang>
<button type="button" class="btn btn-default">Butang 9</button>
</div>

< ;/body>
</html>
Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮组的大小</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">Button 1</button>
	<button type="button" class="btn btn-default">Button 2</button>
	<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Button 4</button>
	<button type="button" class="btn btn-default">Button 5</button>
	<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Button 7</button>
	<button type="button" class="btn btn-default">Button 8</button>
	<button type="button" class="btn btn-default">Button 9</button>
</div>

</body>
</html>

Instance Running» Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Bersarang

Anda boleh menyarangkan kumpulan butang dalam kumpulan butang lain, iaitu, menyarangkan .btn-group di dalam satu lagi .btn-group . Ini digunakan apabila anda ingin menggabungkan menu lungsur turun dengan satu siri butang.

<!DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - Kumpulan Butang Bersarang</title>< lt🎜 ;pautan href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http: //libs .baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0 /bootstrap.min.js"></script></head>
<badan>

<div class="btn-group">
<butang type="button" class="btn btn-default">Butang 1</button>
<button type="button" class="btn btn-default">Butang 2</button> ;

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown ">
Yang berikut
>         <li><a href="#">Pautan lungsur 1</a></li>
                                                                                                                                                         >
</ul>
</div>
</div>

</body>
</html>



Instance
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 嵌套的按钮组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
	<button type="button" class="btn btn-default">按钮 1</button>
	<button type="button" class="btn btn-default">按钮 2</button>
	<div class="btn-group">
		<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>

Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian

Kumpulan Butang Menegak

Contoh berikut menunjukkan penggunaan kelas .btn-group-vertical dibincangkan dalam jadual di atas:

< ;! DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - Kumpulan Butang Menegak</title>
<link href="http:/ /libs.baidu .com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0 .0/jquery .min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"> ;</ skrip></kepala>
<badan>

<div class="btn-group-vertical">
<button type="button" class ="btn btn -default">Butang 1</button>
<button type="button" class="btn btn-default">Button 2</button>

< div class=" btn-group-vertical">
<button type="button" class="btn btn-default dropdown-togol"
data-toggle="dropdown">
Dropdown
                                                                                             a href="#">Pautan lungsur 1</a></li>
  <li><a href="#">Pautan lungsur 2</a></ li>
</ul>
</div>
</div>

</body>
</html>


Instance
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
   <title>Bootstrap 实例 - 垂直的按钮组</title>
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

←
→