フォームの一般的な要素には、主に次のものが含まれます。テキスト入力ボックス、ドロップダウン選択ボックス、ラジオボックス、チェックボックス、テキストフィールド、ボタンなど。
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>
上記は、編集者が紹介したブートストラップフォームコンポーネントの関連コンテンツです。それがあなたに役立つことを願っています!