ブートストラップ スタイルのボタンとは何ですか?

ブートストラップ スタイルのボタンには、1. 「.btn」の丸い灰色のボタン、2. 「.btn-lg」の大きなボタン、3. 「.btn-sm」の小さなボタン、4. 「.btn-xs」が含まれます。 「極小ボタン」、5.「.btn-block」ブロックレベルボタン、6.「.disabled」無効スタイルボタンなど。

このチュートリアルの動作環境: Windows 7 システム、ブートラップ バージョン 3.3.7、DELL G3 コンピューター

ブートストラップ ボタン スタイルの概要

クラス スタイル	説明
.btn	丸みを帯びた灰色のボタン。ボタンのシャープさを和らげるために、ボタンはこのスタイルを使用して角を丸くし、それを他の機能でカバーする必要があります。
.btn-default	デフォルト/標準ボタン。白いボタンを押すと灰色になります。
.btn-primary	元のボタン スタイル (操作されていない)、これはアクティブに対応します。操作されていないボタンのスタイルであり、アクティブです。ボタンをクリックしたときに表示される対応するスタイルです。
.btn-success	成功したアクションを示します
.btn-info	このスタイルのボタン情報をポップアップ表示するために使用できます
.btn-warning	慎重な操作が必要なボタン
.btn-危険	危険なアクションを示すボタン操作
.btn-link	ボタンをリンクのように見せます (ボタンの動作はそのままです)
.btn-lg	大きなボタン
.btn-sm	小さなボタン
.btn-xs	超小さなボタン
.btn-block	ブロック レベル ボタン (拡張親要素の幅の 100%)
.active	ボタンをクリックすると、ボタンは押された状態になります (暗い背景、暗い色の境界線) 、影）。
.disabled	ボタンを無効にすると、色が 50% 明るくなり、グラデーションが失われます。

#基本ボタン グループ

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

ブートストラップの詳細については、

ブートストラップの基本チュートリアル

を参照してください。 ！

以上がブートストラップ スタイルのボタンとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。