Application Example bootstrap Grid System - Operation Form

First, the use of labels lable

Code

<div class = "Container"> 
   <form Action = "#"> 
       <-! form Form Structure <form method = "post" action = "result.html"> </ form> method to transmit mode, action is to where to send the form data -> 
       <label for = "name"> name: </ label> 
       <the iNPUT of the type = "text" the above mentioned id = "name" placeholder = "Please enter your name" /> 
   </ form> 
< / div>

result:

Description: The name plus lable label, while "for" attribute value to the value of input id tag, so when you click on the name of the word when behind the text box will be triggered, the cursor blink

Second, the name input box, and bundled, and may vary with the size of the screen

Code:

<div class="container">
   <form action="#">
       <div 

class="form-group

">
           <label for="name">姓名：</label>
           <input 

class="form-control"

type = "text" id = " name" placeholder = " Please enter your name" /> 
       </ div> 
   </ form> 
</ div>

result:

Screen after narrowing effect

May vary with the size of the browser window

Plus a mailbox div

<div class="container">
   <form action="#">
       <div class="form-group">
           <label for="name">姓名：</label>
           <input class="form-control" type="text" id="name" placeholder="请输入你的姓名"/>
       </div>
  

<div class="form-group">
<label for="name">邮箱：</label>
<input class="form-control" type="email" id="email" placeholder="请输入你的邮箱"/>
</div>

   </form>
</div>

Third, how to name and input boxes lined

<div class="container">
   <form action="#" class="form-horizontal">
       <div class="form-group">
           <label for="name" class="col-md-2">姓名：</label>
           <div class="col-md-6">
               <input class="form-control" type="text" id="name" placeholder="请输入你的姓名"/>
           </div>
       </div>
       <div class="form-group">
           <label for="email" class="col-md-2">邮箱：</label>
           <div class="col-md-6">
               <input class="form-control" type="email "id =" email "placeholder =" Please enter your email "/> </ div>   </ form>       </ div>
           </ div>

四、调整姓名和输入框之间的距离

<div class="container">
   <form action="#" class="form-horizontal">
       <div class="form-group">
           <label for="name" class="col-md-1 text-center">姓名：</label>
           <div class="col-md-6">
               <input class="form-control" type="text" id="name" placeholder="请输入你的姓名"/>
           </div>
       </div>
       <div class="form-group">
           <label for="email" class="col-md-1 text-center">邮箱：</label>
           <!-- text-center居中，同时姓名只占一份-->
           <div class="col-md-6">
               <input class="form-control" type="email" id="email" placeholder="请输入你的邮箱"/>
           </div>
       </div>
       <div class="form-group">
           <div class = "COL-MD. 6-col-md-offset-1"> 
               <-! input boxes and radio buttons for alignment, due to the need to move all the left has a col-md-offset-1 to the right a -> 
               <the INPUT of the type = "the CheckBox" /> cheack Me 
           </ div> 
       </ div> 
   </ form> 
</ div>