ブートストラップは、垂直形式、インライン形式、および水平形式の3つのフォームレイアウトを提供します
垂直または基本フォームを作成します。
•parent <form>要素にrole = "form"を追加します。
•class.form-groupを使用して、タグとコントロールを<div>に配置します。これは、最高の間隔を取得するために必要です。
•Class.Form-Controlをすべてのテキスト要素に追加<入力>、<textarea>、<elect>
インライン形式：
インライン形式のすべての要素は左に位置付けられ、ラベルは並んでいます。インライン形式を作成するには、formタグにclass.form-inlineを追加する必要があります
水平フォーム：他の2つのフォームとは異なり、次の手順に従って水平形式を作成する必要があります。
•class .form-horizontalを親<フォーム>要素に追加します。
•クラス.Form-Groupを使用して、タグとコントロールを<div>に配置します。
•ラベルにクラス.Control-Labelを追加します。
ブートストラップフォームレイアウトスタイルは次のとおりです
実装コード：
<form role = "form"> <fieldset> <legend> configure data source </legness> <div> <label for = "ds_host"> hostname </label> <div> <入力id = "ds_host" type = "text" placeholder = " id = "ds_name" type = "text" placeholder = "msh"/> </div> </div> <div> <label for = "ds_username"> username </label> <div> <input id = "ds_username"タイプ= "テキスト" placeholder = "root"/>> </div < id = "ds_password" type = "password" placeholder = "123456"/> </div> </fieldset> <fieldset> <legend>関連するテーブル</legend> <div> <ラベル= "disabledselect">テーブル名</label> <div> <div> <select id = "DisabledSelect">名前</legend> <div> <ラベル= "disabledselect">テーブル名</label> <div> <選択id = "disabledselect"> <option> no selection </option> <option> no selection </option> </select> </div> </fieldset> </form> </form>
まだ詳細に勉強したい場合は、ここをクリックして素晴らしいトピックを学び、添付してください：Bootstrap Learningチュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。