English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 基础教程

Bootstrap 插件

Bootstrap ボタン

本章将通过示例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

以下样式可用于<a>、<button>或<input>元素上：

クラス説明示例
.btnボタンに基本的なスタイルを追加試してみてください
.btn-defaultデフォルト/標準ボタン試してみてください
.btn-primaryオリジナルボタンのスタイル（操作されていない）試してみてください
.btn-success成功アクションを示す試してみてください
.btn-info情報を弹出させるボタンのスタイルに使用できます試してみてください
.btn-warning慎重に行う必要があるアクションを示すボタン試してみてください
.btn-danger危険アクションを示すボタンの操作試してみてください
.btn-linkリンクのように見えるボタンにする (ボタンの動作を保持試してみてください
.btn-lg大きなボタンを作成する試してみてください
.btn-sm小さいボタンを作成する試してみてください
.btn-xs非常に小さいボタンを作成する試してみてください
.btn-blockブロックレベルのボタン(親要素にまで広がる100%の幅)試してみてください
.activeボタンがクリックされた試してみてください
.disabled無効化ボタン試してみてください

以下の例では、上記のすべてのボタン class を示しています：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　ボタンオプション/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
!--　標準のボタン　-->
<button　type="button"　class="btn　btn-default">デフォルトボタン</button>
!--　ボタンのセットの中でオリジナルのアクションを示す追加の視覚効果を提供　-->
<button　type="button"　class="btn　btn-primary">オリジナルボタン</button>
!--　成功またはポジティブなアクションを示します　-->
<button　type="button"　class="btn　btn-success">成功ボタン</button>
!--　情報警告メッセージのコンテキストボタン　-->
<button　type="button"　class="btn　btn-info">情報ボタン</button>
!--　慎重に行うべきアクションを示します　-->
<button　type="button"　class="btn　btn-warning">警告ボタン</button>
!--　危険または潜在的なネガティブなアクションを示します　-->
<button　type="button"　class="btn　btn-danger">危険ボタン</button>
!--　ボタンとして強調されず、リンクのように見えるが、同時にボタンの動作を保持　-->
<button　type="button"　class="btn　btn-link">リンクボタン</button>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

ボタンサイズ

以下の表に、さまざまなサイズのボタンの class が示されています：

Class説明
.btn-lgこれにより、ボタンが少し大きく見えます。
.btn-smこれにより、ボタンが少し小さく見えます。
.btn-xsこれにより、ボタンが非常に小さく見えます。
.btn-blockこれにより、親要素の全幅を横切るブロックレベルのボタンが作成されます。

以下の例では、上記のすべてのボタン class を示しています：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　ボタンサイズ/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
　　　<button　type="button"　class="btn　btn-primary　btn-lg">大きなオリジナルボタン</button>
　　　<button　type="button"　class="btn　btn-default　btn-lg">大きなボタン</button>
</p>
<p>
　　　<button　type="button"　class="btn　btn-primary">　デフォルトサイズのオリジナルボタン</button>
　　　<button　type="button"　class="btn　btn-default">　デフォルトサイズのボタン</button>
</p>
<p>
　　　<button　type="button"　class="btn　btn-primary　btn-sm">小さいオリジナルボタン</button>
　　　<button　type="button"　class="btn　btn-default　btn-sm">小さいボタン</button>
</p>
<p>
　　　<button　type="button"　class="btn　btn-primary　btn-xs">特に小さいオリジナルボタン</button>
　　　<button　type="button"　class="btn　btn-default　btn-xs">特に小さいボタン</button>
</p>
<p>
　　　<button　type="button"　class="btn　btn-primary　btn-lg　btn-block">ブロックレベルのオリジナルボタン</button>
　　　<button　type="button"　class="btn　btn-default　btn-lg　btn-block">ブロックレベルのボタン</button>
</p>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

ボタン状態

Bootstrap は、アクティブ、無効化など、ボタンの状態に対応する class を提供しており、以下に詳細に説明します。

アクティブ状態

アクティブ状態では、ボタンは押されたように見える外観（濃い背景、濃い枠線、影）を呈します。

以下の表に、ボタン要素とアンカー要素をアクティブ状態にする class が示されています：

要素Class
ボタン要素追加 .active class を使用して、それがアクティブであることを示します。
アンカー要素追加 .active class を <a> ボタンに表示して、それがアクティブであることを示します。

以下の例を示します：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　ボタンアクティブ状態/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
	<button　type="button"　class="btn　btn-default　btn-lg　">デフォルトボタン/button>
　　　	<button　type="button"　class="btn　btn-default　btn-lg　active">アクティブボタン/button>
</p>
<p>
　　　	<button　type="button"　class="btn　btn-primary　btn-lg　">オリジナルボタン/button>
　　　	<button　type="button"　class="btn　btn-primary　btn-lg　active">アクティブなオリジナルボタン/button>
</p>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

無効状態

ボタンを無効にすると、その色が薄くなります 50%、そしてグラデーションを失います。

以下のテーブルに、ボタン要素とアンカー要素を無効状態にするクラスを示します：

要素Class
ボタン要素追加 disabled 属性 まで<button>ボタンに
アンカー要素追加 disabled class まで<a>ボタンに

以下の例を示します：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　ボタン無効状態/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
　　　<button　type="button"　class="btn　btn-default　btn-lg">デフォルトボタン/button>
　　　<button　type="button"　class="btn　btn-default　btn-lg"　disabled="disabled">無効ボタン/button>
</p>
<p>
　　　<button　type="button"　class="btn　btn-primary　btn-lg　">オリジナルボタン/button>
　　　<button　type="button"　class="btn　btn-primary　btn-lg"　disabled="disabled">無効なオリジナルボタン/button>
</p>
<p>
　　　<a　href="#"　class="btn　btn-default　btn-lg"　role="button">リンク/a>
　　　<a　href="#"　class="btn　btn-default　btn-lg　disabled"　role="button">無効リンク/a>
</p>
<p>
　　　<a　href="#"　class="btn　btn-primary　btn-lg"　role="button">オリジナルリンク/a>
　　　<a　href="#"　class="btn　btn-primary　btn-lg　disabled"　role="button">無効なオリジナルリンク/a>
</p>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

ボタンタグ

あなたは<a>、<button>、または<input>要素でボタンクラスを使用できますが、ブラウザ間の不一致性を避けるために、<button>要素でボタンクラスを使用することをお勧めします。

以下の例を示します：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　ボタンタグ/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a　class="btn　btn-default"　href="#"　role="button">リンク</a>
<button　class="btn　btn-default"　type="submit">ボタン</button>
<input　class="btn　btn-default"　type="button"　value="入力">
<input　class="btn　btn-default"　type="submit"　value="提出">
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

ボタングループ

div内で直接.btnを使用します-groupを使用してボタングループを作成できます：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　ボタン（Button）プラグインのオプションボタン/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>ボタングループ/h2>
　　.btn-<p>groupを使用してボタングループを作成します：</p>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

groupを使用してボタングループを作成します：<-group-lg|sm|xsを使用してボタングループのサイズを制御します：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　ボタングループ/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Button ボタングループ　-　ボタンサイズ設定/h2>
　　<p>ボタンサイズを設定するための-group-*　クラスを使用してボタングループ内のボタンのサイズを制御します。/p>
　　<h2>大按钮:</h2>
　　<div　class="btn-group　btn-group-lg">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>默认大小按钮:</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>小按钮:</h2>
　　<div　class="btn-group　btn-group-sm">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>超级小按钮:</h2>
　　<div　class="btn-group　btn-group-xs">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>垂直按钮组</h2>
　　<p>如果要设置垂直方向的按钮可以通过　.btn-group-vertical　类来设置：</p>
　　<div　class="btn-group-vertical">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

自适应大小的按钮组

可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

以下示例使用 a 标签来展示：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>自适应按钮组</h2>
　　<p>以通过　.btn-group-justified　类来设置自适应大小的按钮组。</p>
　　<div　class="btn-group　btn-group-justified">
　　　　<a　href="#"　class="btn　btn-primary">Apple</a>
　　　　<a　href="#"　class="btn　btn-primary">Samsung</a>
　　　　<a　href="#"　class="btn　btn-primary">Sony</a>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

注意: 如果是 <button> 元素, 你需要在外层使用 .btn-group 类来包裹:

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>自适应按钮组</h2>
　　<div　class="btn-group　btn-group-justified">
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　</div>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　</div>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　　　</div>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

内嵌下拉菜单的按钮组

按钮组内嵌的按钮可以设置下拉菜单，如下示例：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>内嵌按钮组</h2>
　　<p>内嵌按钮组创建下拉菜单：</p>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　Sony　<span　class="caret"></span></button>
　　　　　　<ul　class="dropdown-menu"　role="menu">
　　　　　　　　<li><a　href="#">タブレット</a></li>
　　　　　　　　<li><a　href="#">スマートフォン</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

分割按钮

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　按钮</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>分隔按钮</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<ul　class="dropdown-menu"　role="menu">
　　　　　　<li><a　href="#">タブレット</a></li>
　　　　　　<li><a　href="#">スマートフォン</a></li>
　　　　</ul>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›
Bootstrap 画像Bootstrap フォーム