Bootstrap ~ Form form, bootstrap Form form Form

Bootstrap ~ Form form, bootstrap Form form Form

During the background revision, bootstrap is used for the general layout, and the rest of the forms have no reason not to use it. bootstrap is also doing a good job for form beautification and layout, with an atmospheric border, multi-functional buttons, and macro form layout, everything is so complete and perfect!

Normal Form

We need to wrap the form elementIn the form-group class, <div class = "form-group">... </div>, while the element names in the content form are generally placed in the label, and the class name of the input label isform-controlIt is worth noting that your elements such as checkbox and radio need to be written in your own div.

For example, the following form

<form>  <div class="form-group">    <label for="exampleInputEmail1">Email address</label>    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">  </div>  <div class="form-group">    <label for="exampleInputPassword1">Password</label>    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">  </div>  <div class="form-group">    <label for="exampleInputFile">File input</label>    <input type="file" id="exampleInputFile">    <p class="help-block">Example block-level help text here.</p>  </div>  <div class="checkbox">    <label>      <input type="checkbox"> Check me out    </label>  </div>  <button type="submit" class="btn btn-default">Submit</button></form>

Effect after running

Horizontal emission form

You need to horizontally discharge your form elements. You can add classes to the form..form-inlineThis form is generally applicable when there are few elements.

For example

<form class="form-inline">  <div class="form-group">    <label class="sr-only" for="exampleInputEmail3">Email address</label>    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">  </div>  <div class="form-group">    <label class="sr-only" for="exampleInputPassword3">Password</label>    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">  </div>  <div class="checkbox">    <label>      <input type="checkbox"> Remember me    </label>  </div>  <button type="submit" class="btn btn-default">Sign in</button></form>

Normal Form + element horizontal emission

This type of form is used most often. The following form effects are often seen when users register and fill in information.

This form is implemented using.form-horizontalClass, each row element is wrapped in <div class="form-group">... </Div>

form class="form-horizontal">  <div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">    </div>  </div>  <div class="form-group">    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>    <div class="col-sm-10">      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <div class="checkbox">        <label>          <input type="checkbox"> Remember me        </label>      </div>    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <button type="submit" class="btn btn-default">Sign in</button>    </div>  </div></form>

We can also see through the code that we can also use col-sm and col-sm-offset for grid layout during form layout!