Bootstrapは、次の種類のフォームレイアウトを提供します。
•垂直フォーム（デフォルト） - >これは見栄えが良くなく、すべてモバイルバージョンであり、PCバージョンは列を並べ、見栄えが良くありません。
•インラインの形式 - >これはあなたが望むものであり、PCバージョンは水平行に応答し、モバイルバージョンは垂直の行に応答します。
•水平フォーム - >グリッドシステムを使用した制御ディスプレイ
1。垂直形式
垂直形式の使用のための標準ステップ
1。<form>要素に役割= "form"を追加します。
2。「フォームグループ」を使用してタグとコントロールを<div>に配置して、最適な間隔を取得します。
3.すべてのテキスト要素に「フォームコントロール」スタイルを追加<inupt>、<textarea>、<elect>に追加します。
<form role = "form"> <div> <ラベル= "name"> name </label> <input = "text" name "placeholder =" "> div> <div> <div> <label for =" name "> age> <入力タイプ="テキスト "id =" name placeholder = "
2。インラインレイアウト
インラインレイアウトは垂直レイアウトとまったく同じですが、<フォームロール= "form">にclass = form-inlineを追加する必要があります。
<form role = "form">
このようなインラインレイアウトを使用した後、大きな画面が水平に表示され、小さな画面が垂直に表示されます。
小さな画面：
大画面：
3。水平形式
水平方向のフォームとは、ラベルタグとコントロール（入力、ボタン）のレベルを指します。
それを使用するための手順は次のとおりです。
•class .form-horizontalを親<フォーム>要素に追加します。
•クラス.Form-Groupを使用して、タグとコントロールを<div>に配置します。
•ラベルにクラス.Control-Labelを追加します。
<form role = "form"> <div> <label for = "name"> name </label> <div> <input = "text" id = "name" placeholder = ""> </div> </div> <div> <label = "name"> age </label> <div> <input type = "text" id = "placeholder =" "
Form-Horizontalを使用した後にのみ、入力制御をDIVに設定でき、DIVはグリッドシステムを使用できます。フォームホリゾントスタイルは、ラスター内の行のように機能する.form-groupの動作を変更します。
4。チェックボックスとラジオ
これらの2つのコントロールは、ブートストラップで特別です。時には水平に配置する必要があり、時には垂直に配置する必要があります。
また、フォームのようなものであり、インラインドされています。
•インライン表示が必要な場合は、外側の層に囲まれたラベルのクラスをチェックボックスインラインに設定します。
•デフォルトの垂直ディスプレイが必要な場合は、外側の層に囲まれたラベルのクラスをHeckboxに設定します。
<form role = "form"> <！ - check-> <div> <abole> <input type = "checkbox" value = "" "> banana </label> </div> <div> <label> <入力タイプ="チェックボックス "value =" "> apple> </div> <div> <label> <inputタイプ="チェックボックス "値=" value = ""> banana </label> </div> <div> <label> <input type = "checkbox" value = ""> apple </label> </div> <div> <label> <入力タイプ= "チェックボックス"値= ""> watermelon </label> </div> <！ - sine choice-> <div> <input = "options" options "options1"男性</label> </div> <div> <label> <入力タイプ= "ラジオ" name = "optionradios" value = "option2" checked> quecked> queme </label> </div> <div> <label> <input type = "radio" name "optionsradios" options1 "checked> checked> male </label> </div> <in <input"> <"option"女性</label> </div> </form>
ディスプレイ効果は次のとおりです。
5。静的コントロール
静的コントロールは、値を変更できないものを指します。ブートストラップでは、水平形式内のフォームタグの後ろにプレーンテキストを配置する必要がある場合は、<p>でclass = "form-control-static"を使用します。
<form role = "form"> <div> <label> name </label> <div> <p> liu xuande </p> </div> </div> </form>
ディスプレイ効果は次のとおりです。
6。フォームヘルプテキスト
ブートストラップフォームヘルプテキストは、一般に入力プロンプトを指し、通常は.helpブロックのHTML要素が続きます。
<フォームロール= "form"> <div> <入力タイプ= "テキスト"> <span>特別なリマインダー、何も持っていない場合は、入力しないでください。 </span> </div> </form>
ディスプレイ効果は次のとおりです。
これらに加えて、Bootstrapには、入力の高さを制御するために使用されるスタイルの多くの列があります。入力が成功しているかどうかなどがあります。これらを確認して、対応するキーワードを見つけて後で記録します。
上記は、エディターが導入したブートストラップフォームレイアウトです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！