Learn to use bootstrap basic controls (table, form, button) _javascript tips

Bootstrap defines the simplicity and ease of use of the style, we only need a few style designation, we can complete the simple and elegant page display.
This article mainly introduces the following basic controls:
1. Table
2. Form
3. button

1. The form (table) still uses <table><thead><tbody><tr><th><td> to represent the form. Class to control the properties of the table, the table style will be filled with the parent container by default

 <div class= "Container" >
 <div class= "Row" >
  <div class= "col-md-8 col-md-offset-2" >
  <table class= "Table table-bordered table-striped table-hover" >
  <tr>
  <th> Title I </th>
  <th> title two </th>
  <th> title three </th>
  </tr>
  <tr>
  <td>1 </td>
  <td>2</td>
  <td>3</td>
  </tr>
  <tr>
  < td>4</td>
  <td>5</td>
  <td>6</td>
  </tr>
 </table >
  </div>
 </div>
 </div>

Wrapping any. Table in. table-responsive creates a responsive table that scrolls horizontally on a small screen device (less than 768px). When the screen is large 768px wide, the horizontal scroll bar disappears.

2. Form form, like a few style definitions

Lable and controls are wrapped with a form-group type of div, the default form is as follows

 <div class= "Container" >
 <form>
  <div class= "Form-group" >
  <label for= " ExampleInputEmail1 ">email address</label>
  <input type=" Email "class=" Form-control "id=" ExampleInputEmail1 "
   placeholder=" "Enter Email" >
  </div>
  <div class= "Form-group" >
  <label for= "ExampleInputPassword1" >Password</label>
  <input type= "Password" class= "Form-control" "
   id=" ExampleInputPassword1 "placeholder=" Password ">
  </div>
  <div class=" checkbox ">
  <label> <input type= "checkbox" > Check me Out
  </label>
  </div>
  < Button type= "Submit" class= "btn btn-default" >Submit</button>
 </form>
 </div>

Inline form, specify sr-only category for label, hide label, but must not omit lable.

 <div class= "Container" >
 <form class= "Form-inline" >
  <div class= "Form-group" >
  < Label for= "ExampleInputEmail1" class= "sr-only" >email address</label> <input type=
  "Email" class= " Form-control "id=" ExampleInputEmail1 "
   placeholder=" Enter Email ">
  </div>
  <div class=" Form-group ">
  <label for=" ExampleInputPassword1 ">Password</label>
  <input type=" Password "Class=" Form-control "id=" ExampleInputPassword1 "placeholder=" Password "
   >
  </div>
  <div class= "checkbox" >
  <label> <input type= "checkbox" > Check me Out
  </label>
  </ div>
  <button type= "Submit" class= "btn btn-default" >Submit</button>
 </form>
 </div>

A horizontal type of form that specifies the length for the lable and label groups, using the layout of the grid system. Label is right-aligned, and the tab group is left-aligned.

 <div class= "container" > <form class= "form-horizontal" > <div class= "F Orm-group "> <label for=" exampleInputEmail1 "class=" col-md-2 control-label ">email address</label> &L T;div class= "Col-md-8" > <input type= "email" class= "Form-control" id= "ExampleInputEmail1" placeholder= "Enter em Ail "> </div> </div> <div class=" Form-group "> <label for=" exampleInputPassword1 "class=" C Ol-md-2 Control-label ">Password</label> <div class=" col-md-8 "> <input type=" Password "class=" form- Control "id=" ExampleInputPassword1 "placeholder=" Password "> </div> </div> <div class=" checkbox Col-md-offset-2 "> <label> <input type= checkbox" > Check me Out </label> </div> <butt On type= "Submit" class= "btn btn-default col-md-offset-2" >Submit</button> </form> </div> 

Form form validation, BOOTSTRAP3 supports custom validation of forms. Adding req    uired indicates that form is required, node.setcustomvalidity can set custom validation for the form

<div class= "Container" > <form class= "form-horizontal" > <div class= "Form-group" > <label for= "Exa MpleInputEmail1 "class=" col-md-2 control-label ">email address</label> <div class=" col-md-8 "> <in Put type= "email" class= "Form-control" id= "ExampleInputEmail1" placeholder= "Enter Email" required> </div> & lt;/div> <div class= "Form-group" > <label for= "password1" class= "col-md-2 Control-label" >password</ label> <div class= "col-md-8" > <input type= "password" class= "Form-control" id= "Password1" placeholder= "  Password "Required onchange=" Checkpassword () "> </div> </div> <div class=" Form-group "> <label For= "Password2" class= "col-md-2 Control-label" onchange= "Checkpassword ()" > Password2</label> <div class=
  "Col-md-8" > <input type= "password" class= "Form-control" id= "Password2" placeholder= "Password2" required>
 </div> </div> <div class= "checkbox col-md-offset-2" > <label> <input type= "checkbox" > Check me Out </label> 
 </div> <button type= "Submit" class= "btn btn-default col-md-offset-2" >Submit</button> </form>
  </div> <script> function Checkpassword () {var pwd1 = $ ("#password1"). Val ();
  var pwd2 = $ ("#password2"). Val ();
  if (pwd1!= pwd2) {document.getElementById ("Password1"). Setcustomvalidity ("Two input passwords inconsistent");
  else {document.getElementById ("Password1"). Setcustomvalidity ("");
 }} </script>

3. Style of button

Use. BTN-LG,. Btn-sm,. Btn-xs can get buttons of different sizes, add to buttons. Btn-block can make it full of the width of the parent node 100%, and the button becomes a block element, <a>, <button > or <input> Element Add button class.

 <div class= "Container" >
 <button type= "button" class= "btn btn-default btn-block" >default</button >
 <button type= "button" class= "btn btn-primary btn-block" >Primary</button>
 <button type= " Button "class=" btn btn-success ">Success</button>
 <button type=" button "class=" Btn Btn-info ">info </button>
 <button type= "button" class= "btn btn-warning" >Warning</button>
 <button type = "button" class= "btn Btn-danger" >Danger</button>
 <button type= "button" class= "btn Btn-link" > link </button>
 <a class= "btn Btn-default" href= "#" role= "button" >Link</a>
 <button class= " BTN Btn-default "type=" Submit ">Button</button> <input class=" btn btn-default "type="
 button "value=" Input ">
 <input class=" btn Btn-default "type=" Submit "value=" Submit ">
 </div>

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn.