財団ボタン
ボタンのスタイル
財団は、6つのボタンのスタイルを提供しています。 .button
クラスは、パディングと一緒に青色のボタンを作成します。 ボタンクラスの別の色: .secondary
、 .success
、 .info
、 .warning
または.alert
:
例
<ボタンタイプ= "ボタン"クラス = "ボタン">デフォルト</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンの二次">セカンダリ</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン成功">サクセス</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン情報">情報</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンの警告">警告</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンの警告">警告</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンの二次">セカンダリ</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン成功">サクセス</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン情報">情報</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンの警告">警告</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンの警告">警告</ button>の
»をお試しください
Buttonクラスは、で使用することができ<a>
、 <button>
、または<input>
要素:
例
<AのHREF = "#"クラス = info"役割"button = "button">リンクボタン</ A>
<ボタンタイプ= "ボタン"クラス = "ボタン情報">ボタン</ button>の
<入力タイプ= "ボタン"クラス = "ボタン情報"値= "入力ボタン">
<入力タイプ= "提出"クラス = "ボタン情報"値= "submitボタン">
<ボタンタイプ= "ボタン"クラス = "ボタン情報">ボタン</ button>の
<入力タイプ= "ボタン"クラス = "ボタン情報"値= "入力ボタン">
<入力タイプ= "提出"クラス = "ボタン情報"値= "submitボタン">
»をお試しください
なぜだろう#へのhrefタグ? 私たちはジャンプや「404」のページを取得するには、リンクをクリックしたくないとき、私たちは、HREFタグ#を設定することができます。 |
ボタンサイズ
我々は、使用することができます.large
、 .small
または.tiny
ボタンのサイズを設定するクラス:
例
<ボタンタイプ= "ボタン"クラス = "ボタン大">大</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン">デフォルト</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン小">小</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン小さな">タイニー</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン">デフォルト</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン小">小</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン小さな">タイニー</ button>の
»をお試しください
丸みを帯びたボタン
あなたが使用することができます.radius
と.round
丸いボタンを設定するクラス:
例
<ボタンタイプ= "ボタン"クラス = "ボタン">デフォルトボタン</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンの半径">半径ボタン</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンのラウンド">ラウンドボタン</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンの半径">半径ボタン</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンのラウンド">ラウンドボタン</ button>の
»をお試しください
ボタンの拡張機能
あなたが使用することができます.expand
100%ブロードバンドにボタンを設定するクラス:
例
<ボタンタイプ= "ボタン"クラス = "ボタン">デフォルトボタン</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン拡大">拡張ボタン</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタン拡大">拡張ボタン</ button>の
»をお試しください
ボタンを無効にします
あなたが使用することができます.disabled
[設定]ボタンをクリックし、クラスを使用できません。
例
<ボタンタイプ= "ボタン"クラス = "ボタン">デフォルトボタン</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンを無効に">無効ボタン</ button>の
<ボタンタイプ= "ボタン"クラス = "ボタンを無効に">無効ボタン</ button>の
»をお試しください