まず第一に、私はすべての友人のサポートに感謝したいと思います。 Bootstrapの調査概要を引き続き更新します。執筆に何か問題がある場合は、私を修正してください。前の記事に関しては、固定レイアウトとストリーミングレイアウトが非常に重要です。あなたがそれについて明確でない場合、あなたは私が書いたものを見ることができます：ブートストラップ研究メモ：CSSスタイルのデザイン（1）
今回は、ブートストラップのスタイルとこれらのクラスの使用方法、クラスの違い、およびそれらをリストするときに説明される関連するクラスの違いについて、いくつかの具体的かつ重要なクラスを見てみましょう。
1。フォーム
1.FORM-CONTROLクラス：このクラスを含む<inupt> <select> <elect> <textarea>タグの幅は幅100％になり、形式では、通常、ラベルタグのあるフォームグループにコントロールが含まれます。
<form role="form"> <!-- All input, textarea, select elements with form-control class set will be defaulted to width:100% --> <div> --form-group: Generally speaking, labels and space wrapping are used in form-group <label for="exampleInputEmail">Email address</label> <input type="email" id="exampleInputEmail" placeholder="input"> </div> <div> <label for = "exampleInputemail">電子メール名</label> <textarea> 11111 </textarea> </div> <div> <label for = "select"> select form </label> <select> <option> 111 </option> <option> 222 </option> </select> </div> </form>
上記のコードによると、1つずつ見ることができます。フォームインラインクラスを追加します（コントロールを1行に置きます）| Form-Horizontalクラス（ラベルは左側にあり、コントロールは右側にあります）。これは、ラベルのヘルプを使用します。
<！ - フォームインラインクラスは、フォームを水平に存在する - > <form> - cecondlyチェックインライン、ラジオインラインなどがあります。 <div>@</div> </div> </div> <button type = "submit">検索</button> </form>
効果は次のとおりです。
追加されていない場合、ボタンは次の行に絞られます。これ以上の写真はここに投稿されていません。コードを貼り付けて自分でテストすることができます。
<！ - horilyアレージメントフォームコントロールラベル：テキストが右に調整されていることを意味します - > <フォーム> <div> <div> <div> <"inputemail"> email：</label> <div> <input type = "email id =" inputemail "placeholder =" email "> </div> </div> <div> <" "> sibsword"> "pussword" PlaceHolder = "Password"> </div> </div> </div> </form>
効果は次のとおりです。
（注：ここの入力テキストボックスは5/6を考慮する必要があります。幅を20％にカスタマイズしました）
ここでは、Form-Horizontalに関しては、Bootstrapのグリッドシステムと組み合わせて実行する必要があります。
<form>要素でクラス名「form-horizontal」を使用するには、次の機能があります。
1：フォームコントロールのパディングとマージン値を設定します。上記のコードは、デバッグコンソール、パディング左：50pxで見ることができます。
2：グリッドシステムの「行」に似た「フォームグループ」の表現を変更します。
2。ラベルの関数
<label for = "hello1"> hello </label> <入力タイプ= "text" id = "hello"> <br> ---青いハローは生成されます<ラベル= "1111"> hello </label> <入力タイプ= "テキスト" id = "jiang"> <br> --- IDはそれに対応しません、応答はありません。マウスがコントロールに配置された場合にのみ、青いハローがあります
上記のコードに基づいて、ラベルの属性の属性はコントロール内のIDに対応する必要があります。機能：マウスがラベルに配置されたときに、対応するコントロールが青いハローを生成することを確認します。
3。役割の役割
フォームやいくつかのコントロールを書くときに役割を追加する必要がある理由は奇妙だと思いますか？
機能：画面読み取りソフトウェアが認識できることを確認してください。スクリーンリーディングソフトウェアは、精神的に遅れている人々がインターネットにアクセスするのに役立つソフトウェアです。それは、声の形で精神的に遅れた人々に写真、テキストなどを伝えます。したがって、スクリーンリーディングソフトウェアを認識できるようにするために、通常、記述する必要がある特別な機能を備えたセマンティックタグやタグはありません。例えば：
<a href = "＃" role = "button"> link </a> <！ - リンクaがボタンとして使用され、現在のページの特定の関数をトリガーするために使用される場合、他のページまたは現在のページの残りの部分に接続するのではなく、[ロール]ボタンを設定するようにしてください。画面読み取りソフトウェアはそれを認識できないため、ロール= "ボタン"を追加する必要があります。画面読み取りソフトウェアにこれがボタンボタンであることを知らせる必要があります。
4。ラベル、アリア - ラベル、アリア標識の違いは何ですか？
<div> <入力タイプ= "テキスト" id = "idcard" aria-label = "aria-label =" aria-label "> <p>例ブロックレベル</p> - ヘルプブロック：説明を促すために使用されるテキスト</div> <div> <ラベル=" idcard "> id card </label> <入力タイプ="テキスト "id =" idcard> <p> <p> <p>
効果は次のとおりです。
前者には「IDカード」ビジュアルという言葉はありません。どちらも、画面読み取りソフトウェアの便利さが識別されるためです。 Aria-Labelが隠されているだけです。
Aria-Labelledの使用方法を見てみましょう。通常、ラベルテキストが特定の要素に既に存在する場合、Aria-Labelledを使用し、その値はすべての読み取り要素のIDです。次のサブを見てみましょう。
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "dropdown">次のオプションを選択<span> </span> </button> <ul chore = "aria-labelledby =" dropdownmenu1 "> <li chole =" respression "> <a role =" menuitem "tabindex =" -1 "href ="役割= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = "＃"> 22222 </a> </li> <liロール= "プレゼンテーション"> <aロール= "menuitem" tabindex = "-1" href = "＃"＃ "> 222222 </a> href = "＃"> 33333 </a> </li> </ul> </div>
この時点で、ULにはLiが含まれており、ボタンに制御されているため、この時点でAria-Labelledbyを使用する方が適切です。簡単に言えば、3つの間の使用範囲は異なり、基本的な機能は同じであり、すべてスクリーンリーディングソフトウェアの認識の便利さのためです。隠されたクラスに関しては、SRのみのクラスに言及する必要があります。見てみましょう。
<label for = "inputemail">電子メール：</label>
<label for = "inputemail">電子メール：</label>
現時点での効果は次のとおりです。上記のテキストは隠されており、この違いのみが変更されません。
5。無効クラス
この形式では、このクラスに注意を払う必要があります。ここで比較しましょう。
< id = "DisabledSelect"> <option> disable unselectable </option> </select> </div> <div> <div> <label> <input type = "checkbox"> disable </label> </div> <button type = "submit"> submit </button> </fieldset> </form>
ファイルセットに無効なクラスを追加すると、無効化されたフォームはボタン選択入力などでのみ無効になり、他のアイテムの凡例属性に対しては機能しません。それに比べて、凡例属性を追加します
<！ - 長さのプロパティの追加 - > <form role = "form"> <fieldset disabled> <legend> <入力タイプ= "テキスト"プレースホルダー= "色はグレーアウトしますが、無効になりません"> </legnesd> - ここで、マウスは入力ボックスに配置できます<div> <ラベル= "disabledtextinput"> disabled inteabled "" id = "ocabled"> <"enabled"> <"ID =" enabled "> <"> <"> <"> <"> <enabled"> <"enabled"> <"enablee </div> <div> <label for = "DisabledSelect">無効化ドロップダウンボックス</label> <選択id = "disabledselect"> <option>選択不可> </select> </div> <div> <label> <input = "checkbox">選択できない</label> </div> <ボタン> <入力などを選択し、他のアイテムには機能しない凡例 - >
6.Data-toggleデータターゲットデータスパイ属性
HTML5を使用すると、開発者はタグに属性を自由に追加でき、このカスタム属性は一般に「データ」から始まります。
データトグル：データの相互作用を示します。上記の列の[ボタン]をクリックして、ドロップダウンメニューに切り替えます。
データスパイは、監視を示しています
データトラゲット：ターゲット。
これにはJSでのイベントが含まれ、詳細について説明しません。 BootstrapでJSラーニングを入力すると、これらの問題を見てみましょう。このフォームにはまだ多くのことが関係しており、ほぼ多くの要約があります。追加もあります。以下にメッセージを残してください。
2。ボタンクラス
これは難しくありません。属性クラスを覚えておいてください。理解しやすいです。
<a href = "＃" role = "button"> link </a> <button type = "submit" "disabled =" disabled "> default </button> <button type =" shoct "> primary </button> <button type =" submit "> <button> <button type =" submit> info </button> -btn-block：100％intting < value = "input"> <input type = "button" value = "submit">
効果は次のとおりです。
3。画像カテゴリ
<！ - ピクチャセンターブロックの中心：中央のコンテンツを中央に表示するIMGラウンドを表示：丸い角でIMG-CIRCLE：RING IMG-THUMBNAIL：画像に外側の境界線を追加 - >
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
効果は次のとおりです。
要約すると、私は個人的には、フォームの役割が依然として非常に重要であると感じています。ここで他のいくつかの基本的なカテゴリを説明する方が簡単です。次の記事は、CSSコンポーネントの学習に転送されます：ブートストラップ学習ノートCSSコンポーネント（3）
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。