Bootstrap JS ボタン

❮ 前章へ次のリファレンス ❯

JS ボタン (button.js)

ボタンをもっと制御したい場合には、このプラグインを使用します。

ボタンに関するチュートリアルは、Bootstrap ボタン・チュートリアルをご覧みください。

ボタン・プラグイン・クラス

下のクラスは、<a>、<button>または <input> 要素のスタイルのために使用します：

クラス	説明	例
.btn	ボタンに基本的なスタイルを追加する	Try it
.btn-default	デフォルト/標準的なボタンを表示する	Try it
.btn-primary	ビジュアルな重さを提供し、一組のボタンの主要な行動を識別する	Try it
.btn-success	成功または積極的な行動を表す	Try it
.btn-info	情報提供用アラートメッセージ用のコンテキストボタン	Try it
.btn-warning	この行動には注意を払うべきであることを表す	Try it
.btn-danger	危険または潜在的に負の行動を表す	Try it
.btn-link	リンクのように見えるボタンを作る (更にボタンの振舞を持つ)	Try it
.btn-lg	大型ボタンを作る	Try it
.btn-sm	小型ボタンを作る	Try it
.btn-xs	極小ボタンを作る	Try it
.btn-block	ブロックレベルのボタンを作る (親要素の幅全体を占有する)	Try it
.active	ボタンを押せるようにする	Try it
.disabled	ボタンを無効にする	Try it

JavaScript を介して

手動で有効にします：

$('.btn').button();

ボタン・オプション

None

ボタン・メソッド

次の表は、使用できる全ボタンメソッドの一覧です。

注: このプラグインの場合、メソッドは data 属性を経由して渡すこともできます； data-toggle や data-loading のように、data- の後にメソッド名を追加します。

メソッド	説明	Try it
.button("toggle")	ボタンが押されたかのようにする	Try it
.button("loading")	ボタンを無効にし、ボタンのテキストを "loading..." に変更する	Try it
.button("reset")	ボタンのテキストを、元のテキストへ変更する (変更した場合)	Try it
.button("string")	新しいボタンのテキストを指定する	Try it

例

ボタンのカスタマイズに CSS を使用する

ボーダーの丸みを削除する方法：

例

.btn-default {
border-radius: 0;
}

Try it Yourself »

指定の色を追加する方法：

例

.btn-default {
    background: #000;
    color: #fff;
}

.btn-default:hover {
    background: #fff;
    color: #000;
}

Try it Yourself »

影を追加するする方法：

例

.btn-default {
box-shadow: 1px 2px 5px #000000;
}

Try it Yourself »

❮ 前章へ次のリファレンス ❯