フォームの一般的な要素には、主に次のものが含まれます。テキスト入力ボックス、ドロップダウン選択ボックス、ラジオボックス、チェックボックス、テキストフィールド、ボタンなど。
Less：forms.less
sass：_forms.scss
ブートストラップは、フォームのフィールドセット、凡例、ラベルタグのみをカスタマイズします
Fieldset {min-width：0; padding：0; margin：0; border：0;} legent {display：block; width：100％; padding：0; margin-bottom：20px; font-size：21px; line-height：enerenit; color：＃333; border：0; border-bottom：1px solid＃e5e5e5; magn} disply 5px; font-weight：bold;}これらの要素に加えて、入力、Select、Textarea、その他の要素もあります。 Bootstrapフレームワークでは、クラスname.form-controlをカスタマイズすることにより、効果が達成されます。
1.幅は100％になります。
2.明るい灰色（#CCC）の境界線を設定します
3。4pxの丸い角
4.シャドウエフェクトを設定すると、要素が焦点を合わせ、影と境界線の効果が変わります。
5.パルセホルダーの色を＃999に設定します
インライン形式
入力前にラベルタグを追加する場合、入力ラインブレークが表示されます。このようなラベルタグを追加する必要があり、入力ラインが切断されたくない場合は、ラベルタグをcontainer.form-groupに配置する必要があります。
<div> <label>メールアドレス</label> </div> <div> <入力タイプ= "メール" Placeholder = "メール番号を入力してください"> </div>
効果は次のとおりです。
フォームの結合の効果を実現するには、form name.form-inlineをフォーム要素に追加するだけです。実装の原則は次のとおりです。
フォームコントロールをインラインブロック要素（表示：インラインブロック）に設定して、フォームコントロールを1行に表示します。
例：
<フォーム> <div> <ラベル> email </label> <入力タイプ= "email" placeholder = ""> </div> <div> <aburtion>パスワード</lable> <入力タイプ= "パスワード"プレイスホルダー= "> </div> <label> <inputタイプ="チェックボックス ">パスワードを思い出してください</div>
効果は次のとおりです。
コードには明らかにラベルタグがあり、container.form-groupに配置されておらず、入力がラップされないことがわかりました。さらに奇妙なのは、ラベルタグのコンテンツが表示されないことです！実際、注意深く見ると、ラベルタグがクラスname.srのみを追加しました。つまり、ラベルを隠すことを意味します。ソースコードを見てみましょう。
.sr -only {position：absolute; width：1px; height：1px; padding：0; margin：-1px; hidden; clip：rect（0、0、0、0）; border：0;}ラベルタグが追加され、ラベルを非表示にするために.SRのみのクラス名が追加されたため、不要ではありませんか？ ？ ？しかし、これはまさにブートストラップフレームワークの利点の1つです。ラベルが入力コントロールに設定されていない場合、スクリーンリーダーは正しく認識されず、障害のある人にも特定の考慮事項があります。
水平形式
Bootstrapに水平方向のフォーム効果を実装するには、次の2つの条件が必要です。
1。フォーム要素でクラス名を使用します
2。ブートストラップフレームワークを備えたグリッドシステム（詳細：ブートストラップグリッドシステムの詳細な説明）
クラスname.form-horizontal in form要素を使用します。主に次の機能があります。
1.フォームコントロールのパディングとマージン値を設定します
2。グリッドシステムの行と同様に、グループからの式形式を変更します。
CSSソースコード：
.form-horizontal .control-label、.form-horizontal .radio、.form-horizontal .checkbox、.form-horizontal .radio-inline、.form-horizontal .checkbox-inline {padding-top：7px; margin-top：0; margin bottom：0;}。 {min-height：27px;}。form-horizontal .form-group {margin-right：-15px; magne-left：-15px;}。form-horizontal .form-control-static {padding-top：7px;}@media（min-width：768px）{。右;}}。form-horizontal .has-feedback .form-control-feedback {top：0; right：15px;}例：
<フォーム> <div> <label>電子メール</label> <div> <入力タイプ= "email" placeholder = "preate your email"> </div> </div> <div> <abult>パスワード</label> <div> <入力タイプ= "Placeholder =" Placeholder = "PLASTER"> </div> </div> <div> <input = oppunパスワード</label> </div> </div> <div> <div> <button>メールを入力</button> </div> </form>
効果は次のとおりです。
シングルライン入力ボックス
ブートストラップで入力を使用する場合、タイプタイプも追加する必要があります。タイプタイプを指定しない場合、ブートストラップフレームワークは入力[type = "？"]の形を介してスタイルを定義するため、正しいスタイルを取得しません。
さまざまな形式のスタイルでコントロールを良く見せるためには、クラスname.form-controlを追加する必要があります
<form role = "form"> <div> <input type = "email" placeholder = "Enter email"> </div> </form>
選択ボックスの選択
マルチライン選択は、複数の属性の値を複数に設定します
<form role = "form"> <div> <select> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> </select> </div> <div> <select複数> <オプション> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> </select> </div> </form>
テキストフィールドTextarea
テキストフィールドは、元の使用法と同じです。列の設定はその高さを定義でき、コルはその幅を定義できます。クラス名.form-controlがTextarea要素に追加されている場合、Bootstrapフレームワークの.Form-Controlスタイルターゲットのスペース幅が100％またはAUTOであるため、COLS属性を設定する必要はありません。
<form role = "form"> <div> <textarea rows = "3"> </textarea> </div> </form>
チェックボックスとラジオボックスラジオ
ラベルタグ（アラインメントの問題など）と組み合わせて、チェックボックスとラジオにいくつかの小さな問題があります
<form> <div> <abol> <入力タイプ= "チェックボックス">パスワードを覚えてください</label> </div> <div> <div> <label> <input type = "radio" name "optionsradios" id = "optionsradios1" checked>
1.チェックボックスであろうとラジオであろうと、ラベルに包まれています。
2。チェックボックスとラベルタグは、.Checkboxというコンテナに配置されています
3。ラジオとラベルは、.radioという名前の容器に入れられます。 Bootstrapは主に.Checkboxおよび.Radioスタイルを使用して、チェックボックス、ラジオボタン、ラベルのアラインメントを処理します。
.radio、.Checkbox {display：block; min-height：20px; padding-left：20px; margin-top：10px; margin-bottom：10px;}。ラジオラベル、.checkboxラベル{display：inline; font-weight：normal; cursor：pointer;}。 input [type = "checkbox"]、。チェックボックスインライン入力[type = "checkbox"] {float：float：left; margin-left：-20px;}。radio + .radio、.checkbox + .checkbox {mign-top：-5px;}チェックボックスとラジオボタンを水平にチェックします
1.チェックボックスを水平に配置する必要がある場合は、ラベルラベルにクラス名を追加するだけで済みます。Checkbox-Inline
2。ラジオが水平方向の配置が必要な場合は、ラベルラベルにクラス名を追加するだけです。
これがCSSソースコードです：
.RADIO-INLINE、.CHECKBOX-INLINE {display：inline-block; padding-left：20px; margin-bottom：0; font-weight：normal; vertical-align：middle; cursor：pointer;}。ラジオインライン + .radio-inline、.checkbox-inline + .checkbox-inline type = "radio" name = "sex" value = "option1"> male </label> <label> <input type = "radio name" name "sex" value = "option2">女性</label> <label> <input type = "radio" name = "sex" value = "option3"フォームコントロールステータス
1。フォーカスステータス：
フォーカス状態は、擬似クラス：フォーカスを通じて実装されます。ブートストラップフォームコントロールのフォーカス状態は、アウトラインのデフォルトスタイルを削除し、シャドウエフェクトを再度追加します。以下は次のとおりです
CSSソースコード：
.FORM-CONTROL：FOCUS {BORDER-COLOR：＃66AFE9;アウトライン：0; -WebKit-Box-Shadow：Inset 0 1PX 1PXRGBA（0,0,0、.075）、0 8PX RGBA（102、175、233、.6）; RGBA（102、175、233、.6）;}ソースコードからわかるように、コントロールをフォーカス状態に上記のスタイル効果を持たせるには、control.form-controlにクラス名を追加する必要があります。
<form> <div> <div> <入力タイプ= "Text" Placeholder = "フォーカスの効果はありません"> </div> <div> <input type = "placeholder =" focus in focus "> </div> </div> </form> form>
フォーカスにおけるファイル、ラジオ、およびチェックボックスコントロールの効果も、通常の入力コントロールの効果とは異なります。以下はソースコードです
input [type = "file"]：focus、input [type = "radio"]：focus、input [type = "checkbox"]：focus {outline：thin dotted; outline：5px auto -webkit-focus-ring-color; outline-offset：-2px;}2。ステータスを無効にします：
対応するフォームコントロールに無効になっているプロパティを追加するだけで、以下はCSSソースコードです。
.form-control [disabled]、。form-control [readonly]、fieldset [disabled] .form-control {cursor：not-allowed; background-color：#eee; ofacity：1;} input [type = "Radio"] [disabled]、input [type = "チェックボックス"] [無効]、。ラジオインライン[無効]、。チェックボックス[無効]、。 .radio-inline、fieldset [disabled] .ceckbox、fieldset [disabled] .ceckbox-inline {cursor：not-allowed;}例：
<input type = "text" placeholder = "form disabled" disabled>
Fieldsetが無効プロパティを設定すると、ドメイン全体が無効になります
例：
<form role = "form"> <fieldset disabled> <div> <label>入力ボックスは無効になります</label> <入力タイプ= "テキスト" Placeholder = "Disable input"> </div> <div> <label>ドロップダウンボックスは無効です> <入力タイプ= "チェックボックス">オプションボックスは無効になります</label> </div> <button type = "submit"> submit </button> </fieldset> </form>
効果は次のとおりです。（マウスが上昇したときに無効なアイコンが表示されます。ここに、表示できない直接的なスクリーンショットがあります）
3。検証ステータス
Bootstrapは次の効果を提供します。
1.Has Warning：警告ステータス黄色
2。.has-error：エラーステータスレッド
3。.has-success：成功ステータスグリーン
使用するときは、フォームグループコンテナにステータスクラス名を追加するだけです。効果は3つの状態でも同じですが、色は異なります。
例：
<form> <div> <abol> success status </label> <input type = "text" placeholder = "placeholder =" success status "> </div> <div> <abol>エラーステータス</label> <入力タイプ=" Placeholder = "エラーステータス"> </div> </div> </div> </div> </div> </div> </div> </div> </div>
効果は次のとおりです。
フォームを検証するときに、異なる状態が異なるアイコンを提供する場合があります。対応する状態にアイコンを表示する場合は、対応する状態にクラスname.has-feedbackを追加する必要があります。 .has-error、.has-success、.has warningで使用する必要があることに注意してください。
ブートストラップの小さなアイコンはすべて @font-faceを使用して作成されています。のように：
<span class =” glyphicon-warning form-control-feedback”> </span>
例：
<form> <div> <abol> success status </label> <入力タイプ= "テキスト"プレイスホルダー= "成功ステータス"> <span> </span> </div> <div> <abow>エラーステータス</label> <入力タイプ= "テキスト"プレイスホルダー= "エラーステータス"ステータス "> <span> </span> </div> </form>
効果は次のとおりです。
迅速な情報を形成します
一般に、フォーム検証を行うときは、異なる迅速な情報が必要です。 Bootstrapフレームワークで.help-blockを使用して、ブロックに迅速な情報を表示し、コントロールの下部に表示します。
これがCSSソースコードです：
.help-block {display：block; margin-top：5px; margin-bottom：10px; color：＃737373;}例：
<form> <div> <abol>成功ステータス</label> <入力タイプ= "Text" Placeholder = "成功ステータス"> <span>入力情報は正しい</span> <span> </span> </div> <div> <abour>エラーステータス</labe> <入力タイプ= "テキスト" Placeholder = "エラーステータス> <スパン> <スパン</span </<> <> <>ステータス</label> <入力タイプ= "text" placeholder = "警告ステータス"> <span>正しい情報を入力してください</span> <span> </span> </div> </form>
効果は次のとおりです。
独自のコードをBootstrap.cssに追加したくない場合、および設計に必要な場合は、Bootstrapのグリッドシステムを使用できます。たとえば
<form role = "form"> <div> <label for = "inputsuccess1">成功ステータス</label> <div> <div> <div> <input type = "text" inputsucs1 "placeholder =" success status "> </div> <span>
上記は、編集者が紹介したブートストラップフォームコンポーネントの関連コンテンツです。それがあなたに役立つことを願っています！