ブートストラップは、私たちにとってシンプルで使いやすいスタイルを定義します。シンプルでエレガントなページディスプレイを完成させるために、スタイル仕様はほとんど必要ありません。
この記事では、主に次の基本的なコントロールを紹介します。
1。テーブル
2。フォーム
3。ボタン
1。テーブルは、<table> <thead> <tbody> <tthe> <ttr> <th> <td>を使用してテーブルを表すために使用されます。テーブルのプロパティを制御するための次のクラスがあります。テーブルスタイルは、デフォルトで親コンテナを埋めます。
<div> <div> <div> <table> <tr> <th>タイトル1 </th> <th>タイトル2 </th> <th>タイトル3 </th> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <td> 4 </td </td </td </td </td </td> </td> </td> </td> </td </td> </td> </tr> </table> </div> </div> </div> </div> </table> </div> </div> </div> </table> </div> </div> </tv> </tr> </table> </div> </div> </tv> </tr> </table> </div> </div> </tv> </tr>
.table-responsiveで任意の.tableをラップすると、小さな画面デバイス（768px未満）で水平方向にスクロールする応答性のあるテーブルが作成されます。画面が幅768pxを超えると、水平スクロールバーが消えます。
2。形式、いくつかのスタイルで定義されています
LACとコントロールは、Form-Group Divに包まれている必要があります。デフォルトのフォームは次のとおりです
<div> <form> <div> <label for="exampleInputEmail1">Email address</label> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label> <input type = "チェックボックス">チェックアウト</label> </div> <button type = "submit"> submit </button> </form> </div>
インラインの形式、ラベルのSRのみのカテゴリを指定し、ラベルを非表示にできますが、ラーブルを省略してはなりません。
<div> <form> <div> <label for="exampleInputEmail1">Email address</label> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label> <input type = "チェックボックス">チェックアウト</label> </div> <button type = "submit"> submit </button> </form> </div>
Horizontal Typeの形式では、Latableグループとタググループの長さを指定し、グリッドシステムのレイアウトを使用する必要があります。ラベルは右に配置され、ラベルグループは左に位置付けられます。
<div> <form> <div> <label for = "emblesinputemail1">電子メールアドレス</label> <div> <入力タイプ= "email" id = "exampleinputemail1" placeholder = "Enter email"> </div> </div> <div> </div> </div> <div> <label> <入力タイプ= "チェックボックス">チェックアウト</label> </div> <button type = "submit"> submit </button> </form> </div>
フォームの検証、 bootstrap3は、フォームのカスタム検証をサポートしています。 req uiredを追加すると、フォームが必要であることを意味し、node.setcustomvalityがフォームのカスタム検証を設定できます
<div> <form> <div> <label for = "emblyinputemail1">電子メールアドレス</label> <div> <入力タイプ= "email" id = "exampleinputemail1" placeholder = "Enter email"必須> </div> </div> <div> <label = "password1">パスワード</ラベル> <入力= "Placehold1" Placehold1 onchange = "checkpassword（）"> </div> </div> <div> <label for = "password2" onchange = "checkpassword（）"> password2 </label> <div> <入力タイプ= "password" id = "password2" placeholder = "password2" reburing> </div> </div> <div> </label </</</</</</< type = "submit"> submit </button> </form> </div> <script> function checkpassword（）{var pwd1 = $（ "＃password1"）。val（）; var pwd2 = $（ "＃password2"）。val（）; if（pwd1！= pwd2）{document.getElementById（ "password1"）。set customvalidity（ "2回入力されたパスワードは一貫性がありません"）; } else {document.getElementById（ "password1"）。setcustomvalidity（ ""）; }} </script>3。ボタンのスタイル
.btn-lg、.btn-sm、および.btn-xsを使用して、さまざまなサイズのボタンを取得します。ボタンに.btn-blockを追加すると、親ノードの幅の100％を埋めることができ、ボタンもブロックレベルの要素になり、<a>、<butth>、または<inupt>要素にボタンクラスを追加します。
<div> <ボタンタイプ= "ボタン">デフォルト</button> <ボタンタイプ= "ボタン">プライマリ</button> <ボタンタイプ= "ボタン"> success </button> <ボタンタイプ= "ボタン"> info </button> <ボタンタイプ= "ボタン">警告</button> <ボタンタイプ= "ボタン"> button </button> <ボタンタイプ= "> <ボタン</<ボタン</<ボタン</<ボタン</<ボタン< type = "submit"> button </button> <入力型= "button" value = "input"> <入力タイプ= "submit" value = "submit"> </div>
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。