この記事では、主にブートストラップフォームスタイルを使用する知識を紹介します。とても良いです、一緒に見てみましょう！
形状
<form role = "form"> <div> <label for = "embrowinputemail1">電子メール：</label> <入力タイプ= "email" id = "exampleinputemail1" placeholder = "> </div> <div> <ラベル=" empleatinputpassword1 ">パスワード> <入力=" "prawnputpuspass11" "platedputsputsword1"パスワード "> </div> <label> <入力タイプ="チェックボックス ">パスワードを覚えておいてください</label> </div> <button type =" submit ">電子メールを入力</button> </form>
複製写真：
クラス：フォームコントロール
1.幅は100％になり、2。ライトグレー（#CCC）の境界が設定されています。3。4pxの丸い角、4。
2。水平形式：
ブートストラップフレームワークのデフォルト形式は垂直ディスプレイスタイルですが、多くの場合、水平方向のフォームスタイルが必要です（ラベルは左にあり、フォームコントロールは右側にあります）
<form role = "form"> <div> <label for = "inputemail3"> email </label> <div> <input type = "email" inputemail3 "placeholder ="> </div> </div> <div> <ラベル= "inputpassword3">パスワード</ラベル> <入力= "pissonパスワード "> </div> </div> <div> <div> <div> <label> <入力タイプ="チェックボックス ">パスワードを覚えておいてください</label> </div> </div> </div> <div> <div> <button type =" submit ">電子メール</button> </div> </div> </form>
複製写真：
Bootstrapフレームワークで水平形式の効果を達成するには、次の2つの条件を満たす必要があります。
1。クラス名「フォームホリゾント」は要素で使用されます。
2。ブートストラップフレームワークに沿ったメッシュシステム。
要素にクラス名「Form-Horizontal」を使用するには、次の機能があります。
- フォームコントロールパディングとマージン値を設定します。
- グリッドシステムの「行」に似た「フォームグループ」の表現を変更します。
3。水平形式：
Bootstrapフレームワークにこのようなフォームエフェクトを実装することは簡単です。要素にクラス名「フォームインライン」を追加するだけです。
インライン形式の実装原則は非常に簡単です。 1つの行にフォームコントロールを表示するには、フォームコントロールをインラインブロック要素（表示：インラインブロック）に設定する必要があります。
<form role = "form"> <div> <label for = "embrowinputemail2"> email </label> <入力タイプ= "email" id = "emblyinputemail2" placeholder = "> </div> <div> <label for =" embrowinputpassword2 ">パスワード</ラベル> <入力=" password "pruspputpuspassworderパスワード "> </div> <label> <入力タイプ="チェックボックス ">パスワードを覚えておいてください</label> </div> <button type =" submit ">電子メールを入力</button> </form>
複製写真：
4。入力ボックス入力
シングルライン入力ボックス、一般的なテキスト入力ボックス、つまり、入力の型属性値はテキストです。ブートストラップで入力を使用する場合、タイプタイプも追加する必要があります。タイプタイプを指定しない場合、正しいスタイルは取得されません。
<form role = "form"> <div> <入力タイプ= "email" placeholder = "enter email"> </div> <div> <input type = "placeholder ="
複製写真：
5。選択ボックスの選択
ブートストラップフレームワークのドロップダウン選択ボックスは、元の使用と一致しており、マルチライン選択は複数の属性の値を複数に設定します。ブートストラップフレームワークは、これらの要素に統一されたスタイルを提供します。
<form role = "form"> <div> <select> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> 4 </option> <option> 5 </option> </select> </div> <div> </select> </div> </form>
複製写真：
6。テキストフィールドTextarea
テキストフィールドは元の使用法と同じであり、設定行はその高さを定義でき、Colsの設定は幅を設定できます。ただし、クラス名「フォームコントロール」がTextarea要素に追加された場合、Cols属性を設定する必要はありません。 Bootstrapフレームワークの「フォームコントロール」スタイルのフォームコントロールは100％またはAutoであるためです。
<form role = "form"> <div> <textarea rows = "3"> </textarea> </div> </form>
複製写真：
7.チェックボックスのチェックボックスとシングル選択ボタンラジオ
ブートストラップフレームワークのチェックボックスとラジオは少し特別です。ブートストラップは彼らのためにいくつかの特別な治療を行っています。主な理由は、チェックボックスとラジオにラベルラベルで使用すると、いくつかの小さな問題が発生することです（最も頭痛はアライメントの問題です）。 Bootstrapフレームワークを使用すると、開発者はあまり考える必要はありません。次の方法に従う必要があります。
<form role = "form"> <h3> case 1 </h3> <div> <label> <入力タイプ= "チェックボックス"値= "">パスワードを覚えてください</label> </div> <div> <label> <input type = "radio" name = "optionsradios" id = "optionsradios1" value = "love" id = "optionsradios2" value = "hate"> </label> </div> </form>が好きではありません
複製写真：
8。水平方向にチェックボックスとラジオボタンをチェックします
レイアウトの目的で、チェックボックスとラジオボタンを水平に配置する必要がある場合があります。 Bootstrapフレームワークは、この点でも考慮しました。
1.チェックボックスを水平に配置する必要がある場合は、クラス名「チェックボックスインライン」をラベルラベルに追加するだけです。
2。ラジオを水平に配置する必要がある場合は、クラス名「Radio-Inline」をラベルラベルに追加するだけです。
<form role = "form"> <div> <label> <入力タイプ= "チェックボックス"値 "値=" option1 ">ゲーム</label> <input> <input type =" checkbox "balue =" option2 "> photography </label> <label> <input type =" checkboles "balue =" option3 "> labelism </label> <input =" option "option> </label> <putip =" optionis type = "Radio" value = "option2" name = "sex">女性</label> <label> <入力タイプ= "Radio" value = "option3" name = "sex"> neutral </label> </div> </form>
複製写真：
9。ボタン
ブートストラップフレームワークのボタンはすべて実装されています
<表> <thead> <tr> <th> button </th> <th> class = "" </th> <th>説明</th> </tr> </tbody> <tr> <td> <button href = "＃"> default </button> </td> <td> <code> btn </code> </td> <td> starden勾配</td> </tr> <td> <td> <button href = "＃">プライマリ</button> </td> <td> <code> btn btn-primary </code> </td> <td> href = "＃"> info </button> </td> <td> <code> btn btn-info </code> </td> <td>デフォルトスタイルの代替として使用されます</td> </tr <td> <td> <button href = "＃"> button> </td> <td <td <td <code> <code> btn-success </code> </td> <td>は、成功または肯定的なアクションを示します</td> </tr> <tr> <td> <button href = "＃">警告</button> </td> <td> <code> btn btn-warning </code </code> </td> <td>アクション</td> </tr> <td> <td> <button href = "＃">危険</button> </td> <td> <code> btn-danger </code> </td> <td>は、危険または潜在的に否定的なアクション</td> </td> <td> <td> <td> <td> href = "＃"> inverse </button> </td> <td> <code> btn </verse </button> </td> <td> <code> btn btn-inverse </code> </td> <td>代替ダークグレーボタン。
複製写真：
10。フォームコントロールサイズ
前述のフォームコントロールは通常のサイズです。コントロールの高さ、ラインハイイト、パディング、フォントサイズのプロパティを設定することにより、コントロールの高さを設定できます。ただし、Bootstrapフレームワークは、フォームコントロールの高さを制御するための2つの異なるクラス名も提供します。これらの2つのクラス名は次のとおりです。
1。入力-SM：通常のサイズよりもコントロールを小さくします
2。入力LG：コントロールを通常のサイズよりも大きくします
これらの2つのクラスは、入力、Textarea、およびフォームの選択コントロールに適しています。
<form role = "form"> <div> <label>コントロールは大きくなります</label> <入力タイプ= "テキスト"プレイスホルダー= "add.input-lg、コントロールは大きくなります"> </div> <div> <div> <label>通常サイズ</label> <placeholder = "normal size"> </div> <div> <input = "int =" pocents小さい "> </div> </form>
複製写真：
11。フォームコントロールステータス（無効ステータス）
ブートストラップフレームワークのフォームコントロールの無効状態は、通常のフォーム無効状態実装方法と同じであり、対応するフォームコントロールに属性を「無効」します。詳細については、次のコードを参照してください
単一のフォームタグを無効にし、タグの属性に無効を追加するだけです。
<form role = "form"> <div> <div> <input id = "disabledinput" type = "placeholder =" formは無効になり、入力できません> </div> </div> </form> form>
複製写真：
Bootstrapフレームワークでは、Fieldsetがプロパティセットを無効にしている場合、ドメイン全体が無効になります。
<form role = "form"> <fieldset disabled> <div> <label for = "disabledtextinput">無効入力ボックス</label> <入力タイプ= "text" id "=" disabledtextinput "placeholder =" disabled input "> </div> <div> <div> <label for =" DisabledSelect "> Disabled Drop-down box>選択可能</option> </select> </div> <div> <label> <入力タイプ= "チェックボックス"> </label> </div> <button type = "submit"> submit </button> </fieldset> </form>
複製写真：
障害フィールド全体で、凡例に入力ボックスがある場合、この入力ボックスは無効にできないと言われています。
フォームロール= "form"> <fieldset disabled> <legent> <input inpt = "text" placeholder = "明らかに私の色は灰色に変わりましたが、私は無効になりませんか？ for = "DisabledSelect">無効化ドロップダウンボックス</label> <選択id = "disabledselect"> <option>選択不可</select> </select> </select> </select> </div> <label> <input> <入力タイプ= "チェックボックス">選択可能</label> </div> <buttonタイプ= "submit"> field> </fieldset> </film>
複製写真：
フォーム検証ステータス
フォームを作成するときは、フォーム検証を行う必要があります。また、検証ステータススタイルを提供する必要があり、これらの効果はBootstrapフレームワークでも提供されています。
1.Has Warning：警告ステータス（黄色）
2。.has-error：エラーステータス（赤）
3。.has-success：成功ステータス（緑）
多くの場合、フォームを検証すると、異なる状態がチェックサイン（√）、エラーがクロスサイン（×）などであるなど、異なるアイコンを提供します。この効果はブートストラップボックスにも提供されます。対応する状態にフォームを表示したい場合は、対応する状態にクラス名「Has-Feedback」を追加するだけです。そのような名前は、「has-error」、「has warning」、「has success」にあることに注意してください。
<form role = "form"> <div> <label for = "inputsuccess1">成功ステータス</label> <入力タイプ= "テキスト" ID = "inputsuccess1" placeholder = "success"> </div> <div> <label for = "inputwarning1">警告ステータス</label> <入力タイプ= "テキスト" for = "inputerror1">エラーステータス</label> <入力タイプ= "text" id = "interror1" placeholder = "エラーステータス"> </div> </form> <br> <br> <br> <form role = "form"> <div> <"inputsuccess1">成功ステータス</label> <入力= "Id" Id = "incondsuccess1" "Id =" inputsuccess1ステータス "> <span> </span> </div> <div> <div> <label for =" inputwarning1 ">警告ステータス</label> <入力タイプ=" ID = "inputwarning1" placeholder = "placeholder =" warning status "> <span> </div> <div> <div> <label for =" interor1 ">エラー</label> <input =" "error1"ステータス "> <span> </span> </div> </form>
複製写真：
迅速な情報を形成します
通常、フォーム検証を行うときは、異なる迅速な情報を提供する必要があります。この効果は、Bootstrapフレームワークでも提供されています。 「ヘルプブロック」スタイルが使用され、プロンプトメッセージがブロックに表示され、コントロールの下部に表示されます。
<form role = "form"> <div> <label for = "inputsuccess1">成功ステータス</label> <入力タイプ= "テキスト" ID = "inputsuccess1" placeholder = "success> <span> PlaceHolder = "警告ステータス"> <span>正しい情報を入力してください</span> <span> </span> </div> <div> <div> <div> <label for = "inputerror1">エラーステータス</label> <入力タイプ= "テキスト" ID = "inputerror1" Placeholder = "エラーステータス"> <Span>
複製写真：
上記は、編集者が紹介したブートストラップフォームスタイルの使用です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！