ブートストラップボタン


この章では、例を通してブートストラップ ボタンの使用方法を説明します。クラス .btn を持つ要素は、丸い灰色のボタンのデフォルトの外観を継承します。ただし、Bootstrap には、次の表に示すように、ボタンのスタイルを定義するためのオプションがいくつか用意されています。

次のスタイルは、<a>、<button>、または <input> 要素で使用できます。クラス

説明インスタンス.btnボタンに基本スタイルを追加試してみる.btn-defaultデフォルト/標準ボタン試してみる.btn -prim aryオリジナルのボタンスタイル(操作不可) 試してみる.btn-successはアクションが成功したことを示します試してみる.btn-infoこのスタイルはこんな用途に使えます情報をポップアップさせたい場所にボタンを押してください 試してください.btn-warning注意して操作する必要があることを示すボタン試してください.btn-danger危険なアクションを示します試してください.btn-linkボタンをリンクのように見せます（ボタンの動作はそのままです）試してください.btn-lg大きなボタンを作成します試してみる.btn-sm小さなボタンを1つ作ってみる試してみる.btn-xs超小さなボタンを作ってみる試してみる.btn- blockブロックレベルボタン (親要素の幅 100% に拡張)試してみる.activeボタンがクリックされました試してみる.disabled無効化されたボタンTやってみよう

Instance
次の例は、上記のすべてのボタン クラスを示しています: 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮选项</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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

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

次の例は、上記のすべてのボタン クラスを示しています:


Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮大小</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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 はアクティブ化とdeactivation ボタンステータスのクラスについては、後で詳しく説明します。

アクティベーション状態

ボタンは、アクティベートされると押された状態 (暗い背景、暗い境界線、影) になります。

次の表は、ボタン要素とアンカー要素をアクティブにするクラスのリストです。

ElementClass
Button Element アクティブであることを示すために .active クラスを追加します。
アンカー要素 .active クラスを <a> ボタンに追加して、アクティブであることを示します。

次の例はこれを示しています:


インスタンス

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


無効ステータス

の場合ボタンが無効になると、その色は 50% 明るくなり、グラデーションが失われます。

次の表は、ボタン要素とアンカー要素を無効にするクラスのリストです。

要素ボタン要素無効アンカー要素disabled
クラス
属性を<button>に追加します。ボタン。
<a> に class を追加します。 注: このクラスは <a> の外観のみを変更し、その機能は変更しません。ここでは、カスタム JavaScript を使用してリンクを無効にする必要があります。


インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮激活状态</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

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

ボタンラベル

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

次の例はこれを示しています:

インスタンス

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮禁用状态</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

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