Example code of form part of Bootstarp basic tutorial

Reference: Form Encyclopedia in BootStrap

bootstrap form section, the specific code is as follows:

<div class="container">
  <form action="#" method="post">
    <fieldset>
      <legend> User login </legend>
      <div class="form-group">
        <label> User name: </label>
        <input type="text" class="form-control" name="name" placeholder=" User name ">
      </div>
      <div class="form-group">
        <label> Password: </label>
        <input type="password" class="form-control" name="pwd" placeholder=" Password ">
        <!--form-control Represents a full container -->
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember the password </label>
      </div>
      <!-- Multiple check boxes must be written like this   Otherwise, it will cause the problem that the check box overlaps with the text -->
      <div class="form-group">
        <button type="submit" class="btn btn-default"> Submit </button>
      </div>
    </fieldset>
  </form>
</div>

inline Form and label Hide

<div class="container">
  <form action="#" method="post" class="form-inline">
    <!--form-inline Place the form horizontally -->
    <fieldset>
      <legend> User login </legend>
      <div class="form-group">
        <label class="sr-only"> User name: </label>
        <!--sr-only Jean label Hide -->
        <input type="text" class="form-control" name="name" placeholder=" User name ">
      </div>
      <div class="form-group">
        <label> Password: </label>
        <input type="password" class="form-control" name="pwd" placeholder=" Password ">
        <!--form-control Represents a full container -->
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember the password </label>
      </div>
      <!-- Multiple check boxes must be written like this   Otherwise, it will cause the problem that the check box overlaps with the text -->
      <div class="form-group">
        <button type="submit" class="btn btn-default"> Submit </button>
      </div>
    </fieldset>
  </form>
</div>

The method of putting label and input in the same row

<div class="container">
  <form action="#" method="post" class="form-horizontal">
    <!--form-horizontal To initialize a form -->
    <fieldset>
      <legend> User login </legend>
      <div class="form-group">
        <label class="col-xs-3 control-label"> User name: </label>
        <!-- Set with grid system label Width of -->
        <div class="col-xs-9">
          <input type="text" class="form-control" name="name" placeholder=" User name ">
        </div>
        <!-- Use div Set up the grid and wrap it input-->
      </div>
  </form>
</div>
<!-- Attention! Put label And input Put in the same place 1 Line in 768 Resolution 1 There is something wrong with the next   In md And lg Upper normal -->

Adding small icons

<div class="container">
  <form action="#" method="post" class="form-horizontal">
    <!--form-horizontal To initialize a form -->
    <fieldset>
      <legend> User login </legend>
      <div class="form-group has-feedback has-success">
        <!-- In the project's div Outer encirclement class Plus has-feedback-->
        <label class="col-xs-3 control-label"> User name: </label>
        <div class="col-xs-9">
          <input type="text" class="form-control" name="name" placeholder=" User name ">
          <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
          <!-- In input Add under 1 A span  Remember to add form-c-f-->
        </div>
      </div>
  </form>
</div>

1 heap button assembly

<div class="container">
  <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn btn-success"><span class="glyphicon glyphicon-star"></span></button>
      <button class="btn btn-info"><span class="glyphicon glyphicon-star"></span></button>
      <button class="btn btn-danger"><span class="glyphicon glyphicon-star"></span></button>
      <button class="btn btn-default"><span class="glyphicon glyphicon-star"></span></button>
    </div>
  </div>
</div>

Don't force a button separation because this is a group of buttons in the middle, not rounded

Search box

<div class="col-md-4 col-md-offset-2">
  <div class="input-group input-lg">
    <div class="input-group-addon">
      <a href=""><span class="glyphicon glyphicon-star"></span></a>
    </div>
      <input type="text" class="form-control input-xs">
    </div>
  </div>
</div>