ブートストラップボタングループ

ボタングループを使用すると、複数のボタンを同じ行に積み重ねることができます。ボタンを並べて配置したい場合に便利です。 Bootstrap Button プラグインを使用して、オプションの JavaScript ラジオとチェックボックススタイルの動作を追加できます。

次の表は、ボタングループを使用するために Bootstrap によって提供されるいくつかの重要なクラスをまとめたものです。クラス

.btn を持つ一連のボタンを .btn-group 内に配置します。

<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このクラスは、<div class="btn-group"> の複数のグループを 1 つの <div class="btn-toolbar"> に結合するのに役立ちます。複雑なコンポーネント。

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

これらのクラスは、各ボタンのサイズを変更することなく、ボタングループ全体のサイズ変更に適用できます。。

<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 このクラスは、ボタンのグループを水平ではなく垂直に積み重ねます。りー

基本的なボタングループ

次の例は、上の表で説明したクラス .btn-group の使用方法を示しています。 title>ブートストラップの例 - 基本的なボタングループ</title>

<スクリプト src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<スクリプト src="http:// libs.baidu .com/bootstrap/3.0.3/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>

例

<div class="btn-group-vertical">
  ...
</div>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ボタンツールバー

次の例は、上の表で説明したクラス .btn-toolbar の使用方法を示しています。ブートストラップの例 - ボタンツールバー</title>

<スクリプト src="http://libs.baidu .com/ bootstrap/3.0.3/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> ;

インスタンス

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

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ボタンサイズ

次の例は、上の表で説明したクラス .btn-group-* の使用方法を示しています。 title>ブートストラップの例 - ボタングループサイズ</title>

<スクリプト src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<スクリプト src="http:// libs.baidu .com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head>
<body>

<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-xs"> ;
<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>

</body>
</html>

インスタンス

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

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ネスト

ボタングループを別のボタングループ内にネストすることができます。つまり、.btn-group を別の .btn-group 内にネストできます。これは、ドロップダウンメニューと一連のボタンを組み合わせたい場合に使用します。

<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - ネストされたボタングループ</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. "></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>< ;/head> ;
<body>

<div class="btn-group">
<button type="button" class="btn btn-default">ボタン 1</button>
< ;ボタンの種類="button" class="btn btn-default">ボタン 2</button>

<div class="btn-group">
<button type="button" class="btn btn-defaultドロップダウントグル"
data-toggle="ドロップダウン">
次の
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
/a>。 ;</li>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックして、オンラインインスタンスを表示します

垂直ボタングループ

次の例は、上の表で説明したクラス .btn-group-vertical の使用方法を示しています。

<!DOCTYPE html>
<html>
<head>
< ;title>ブートストラップの例 - 垂直ボタングループ</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel=" stylesheet"> ;
<スクリプト src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<スクリプト src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" baidu.com/bootstrap/3.0.3/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"> lt; スパンクラス = "キャレット" & gt; & lt;/ボタン & gt;
& lt; ; & lt; a href = "#" >ドロップダウンリンク 1</a></li>
/div>
lt;/div>

← ブートストラップドロップダウンメニュー

ブートストラップボタンのドロップダウンメニュー →

提出する