Bootstrapフォーム(フォームボタン)の使い方を徹底分析_JavaScriptスキル

1. マルチタグのサポート

ボタンを作成するときは、 タグ要素を使用するだけでなく、 タグも使用できます。

同様に、Bootstrap フレームワークでボタンを作成する場合、先ほど説明したラベル要素に加えて、他のラベル要素でもボタンを使用できます。注意する必要があるのは、ラベル要素にクラスを追加することだけです。ボタンを作成するときは「.btn」という名前を付けます。

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

2. カスタマイズされたスタイル

Bootstrap フレームワークのさまざまなボタン スタイルは、さまざまなクラス名を通じて実装されます。

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

3. ボタンのサイズ

Bootstrap フレームワークでは、ボタンのサイズもカスタマイズできます。

ボタンのサイズを制御するために、Bootstrap フレームワークには 3 つのクラス名が提供されています。

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

4. ブロックボタン

Bootstrap フレームワークは「.btn-block」というクラス名を提供します。このクラス名をボタンに使用すると、ボタンがコンテナ全体を埋めることができ、ボタンにはパディングやマージンの値がなくなります。実際には、この種のボタンはブロック ボタンと呼ばれることがよくあります。

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

5. ボタン無効状態

Bootstrap フレームワークでは、ボタンを無効にする 2 つの方法があります:

方法 1: タグに disabled 属性を追加します

方法 2: 要素タグ

にクラス名「disabled」を追加します

この 2 つの主な違いは次のとおりです:

「.disabled」スタイルは、送信動作やリセット動作などのボタンのデフォルト動作を無効にしません。

要素タグに「disabled」属性を追加すると、要素のデフォルトの動作を無効にすることができます。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

今日は、いくつかの新しい知識を追加します: ブートストラップ フォーム プロンプト情報

通常、フォーム検証を行うときは、別のプロンプト情報を提供する必要があります。この効果はブートストラップ フレームワークでも提供されます。 「ヘルプ ブロック」スタイルは、ブロック内およびコントロールの下部にプロンプ​​ト情報を表示するために使用されます。

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

上記は Bootstrap フォーム ボタンの詳細な紹介です。今後もさらに内容が更新される予定です。