この記事では、主にブートストラップフォームを使用するスキルを紹介します。
1.Bootstrap Basicフォーム
フォームの一般的な要素には、主に次のものが含まれます。テキスト入力ボックス、ドロップダウン選択ボックス、ラジオボタン、チェックボタン、テキストフィールド、ボタンなど。
まず基本フォームを見てみましょう。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> basic forms </title> <link rel = "styleSheet" href = "http://netdna.boottrapcdn.com/boottrap/3.1.1/cs/boottrap. <form role = "form"> <div> <label for = "emblyinputemail1">電子メール：</label> <入力タイプ= "emailinputemail1" placeholder = "> </div> <div> <ラベル=" empleatinputpassword1 ">パスワード：</lable> <" interputspuss = "plated" "platedpuspers =" platedpuspersword1 </div> <div> <label> <入力タイプ= "チェックボックス">パスワードを覚えておいてください</label> </div> <button type = "submit"> login </button> </form> </body> </html>
レンダリングは次のとおりです。
また、さまざまなクラス名を追加して形成することで、さまざまな効果を達成することもできます。フォームの特定のルールを次の表に示します。
例えば：
<form role = "form"> ... </form>
2.BootStrapフォームコントロール
1）入力ボックス入力
<form role = "form"> <div> <！ - タイプタイプを追加する必要があります。タイプタイプが指定されていない場合、正しいスタイルは取得されません - > <入力タイプ= "メール" Placeholder = "Enter Email"> </div> </form>
2）[選択]ボックスの選択
<form role = "form"> <div> <！ - シングルラインドロップダウン選択ボックス - > <select> <option> 1 </option> <option> 2 </option> </select> </div> <div> <！ - multi-line選択ボックス - >
3）テキストフィールドTextarea
テキストフィールドは元の使用法と同じであり、設定行はその高さを定義でき、Colsの設定は幅を設定できます。ただし、クラス名「フォームコントロール」がTextarea要素に追加された場合、Cols属性を設定する必要はありません。 Bootstrapフレームワークの「フォームコントロール」スタイルのフォームコントロールは100％またはAutoであるためです。
<form role = "form"> <div> <！ - rows = "3" 3行を設定します3行 - > <textarea rows = "3"> </textarea> </div> </form>
4）チェックボックス
垂直方向の配置：
<form role = "form"> <div> <label> <入力タイプ= "チェックボックス" value = "">チェックボックス</label> </div> </form>
水平方向の配置：
<form role = "form"> <div> <label> <入力タイプ= "チェックボックス"値 "value =" option1 "> checkbox1 </label> <label> <入力タイプ="値 "値"値 "option2"> checkbox2 </label> </div> </form>
5）シングル選択ボタンラジオ
垂直方向の配置：
<form role = "form"> <div> <label> <入力タイプ= "ラジオ" name = "optionsradios" id = "optionradios1" value = "love" checked> a </label> </div> <div> <！ - チェックボックスであるかラジオでも、ラベルに包まれていますか？ </div> </form>
水平方向の配置：
<form role = "form"> <div> <label> <入力タイプ= "Radio" value = "option1" name = "sex"> a </label> <label> <入力タイプ= "Radio" value = "option2" name = "sex"> b </div> </form> </form>
注：チェックボックスとラベルは、「.Checkbox」と呼ばれるコンテナに配置されています。ラジオとラベルは、「.radio」と呼ばれる容器に入れられます。
3.ブートストラップフォームコントロールステータス
1）フォーカスステータス
フォーカス状態は、クラス名フォームコントロールを入力に追加することで達成されます。ブートストラップフレームワークのフォームコントロールのフォーカス状態は、アウトラインのデフォルトスタイルを削除し、再びシャドウエフェクトを追加します。
<！ - form-horizontalは水平形式効果を達成します - > <form role = "form"> <div> <div> <入力タイプ= "placeholder =" focus status "> </div> </div> </form>
2）ステータスを無効にします
無効にする必要があるフォームコントロールに「無効」を追加するだけです。
<input type = "text" placeholder = "フォームは無効になり、入力できません" disabled>
3）検証ステータス
フォーム検証には、検証ステータススタイルも提供する必要があります。これらの効果は、ブートストラップでも提供されます。
それを使用する場合、フォームグループコンテナに対応するステータスクラス名を追加する必要があります。
<form role = "form"> <div> <label for = "inputwarning1">警告ステータス</label> <入力タイプ= "text" inputwarning1 "placeholder =" warning status "> </div> <div> <label =" inputerror1 ">エラーステータス</label> <入力タイプ="テキスト "id =" inputerror1 "erris = <<> </</</< for = "inputsuccess1">成功ステータス</label> <入力タイプ= "テキスト" id = "inputsuccess1" placeholder = "success"> </div> </form>
レンダリングは次のとおりです。
フォームに対応する状態にアイコンを表示する場合は、対応する状態にクラス名「Has-Feedback」を追加する必要があります（このクラス名には「Has-Error」、「HasWarning」、「Has-Success」を添付する必要があります）。
4.ブートストラップフォームボタン
1）カスタムスタイルのボタン
<button type="button">Basic Button</button> <button type="button">Default Button</button> <button type="button">Main Button</button> <button type="button">Success Button</button> <button type="button">Information Button</button> <button type="button">Warning Button</button> <button type="button">Danger Button</button> <button type="button">Link Button</button>
レンダリングは次のとおりです。
2）ブートストラップボタンは複数のラベルをサポートしており、他のラベルで作成されたボタンは次のとおりです。
<ボタンタイプ= "ボタン">ボタンタグボタン</button> <入力タイプ= "" value = "入力タグボタン"/> <span>スパンタグボタン</span> <div> div> <a href = "##">タグボタン</a>
3）ボタンサイズ
クラス名をベースボタン「.btn」に追加して、ボタンのサイズを制御します。
<ボタンタイプ= "ボタン">通常のボタン</button> <ボタンタイプ= "ボタン">大きなボタン</button> <ボタンタイプ= "ボタン">小さなボタン</button>
4）ブロックボタン（モバイル端子で使用される詳細）
ブロックボタン：ボタン幅は親コンテナ全体（幅：100％）を埋め、パディングとマージンの値はありません。
Bootstrapは、クラス名「BTN-Block」を提供します。このクラス名を使用してブロックボタンを実装できます（詳細については、Bootstrap.CSSファイル2340を参照して2353行を参照してください）
<ボタンタイプ= "ボタン">大きなボタン</button> <ボタンtype = "ボタン">通常のボタン</button> <ボタンタイプ= "ボタン">小さなボタン</button>
レンダリングは次のとおりです。
5.BootStrapフォームボタンステータス
ブートストラップでは、ボタンのステータス効果は、主にアクティブ状態と無効状態の2つのタイプに分割されます。
1）アクティブ状態：主にいくつかのタイプのボタンサスペンション状態（：HOVER）、クリック状態（：アクティブ）、フォーカス状態（：フォーカス）が含まれます。
2）ステータスを無効にします
ボタンを無効にする方法は2つあります。
方法1：タグに無効属性を追加します
方法2：クラス名「無効」を要素ラベルに追加する
2つの主な違いは次のとおりです。
「.Disabled」スタイルは、ボタンのデフォルト動作を禁止していません。要素ラベルに「無効」属性を追加する方法は、要素のデフォルト動作を禁止できます。
6.BootStrap画像
Bootstrapでは、次のスタイルが画像のスタイルに提供されています。
使用方法：次のように、対応するクラス名をIMGタグに追加するだけです。
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/2016072615143222225"> <img src = "http://img.blog.csdn.net/20160726151432225">
実行効果は次のとおりです。または、右側の結果ウィンドウを表示します。
7.Bootstrapアイコン
Bootstrapは、次のように200の異なるアイコンを提供します。
使用方法：次のように、対応するアイコンクラス名をタグに追加するだけです。
<span> </span>
<span> </span>
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
一連の記事：
初めて魔法のブートストラップベーシックレイアウト//www.vevb.com/article/89278.htmと接触したとき
魔法のブートストラップグリッドシステムと初めて接触したとき//www.vevb.com/article/89333.htm
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。