Basic Bootstarp Tutorials: some instance code in the form, basic bootstarp tutorials

Basic Bootstarp Tutorials: some instance code in the form, basic bootstarp tutorials

Reference: forms in BootStrap

The code for the bootstrap form is as follows:

<Div class = "container"> <form action = "#" method = "post"> <fieldset> <legend> User Logon </legend> <div class = "form- group "> <label> User Name: </label> <input type = "text" class = "form-control" name = "name" placeholder = "username"> </div> <div class = "form- group "> <label> password: </label> <input type = "password" class = "form-control" name = "pwd" placeholder = "password"> <! -- Form-control indicates that the container is full --> </div> <div class = "checkbox"> <label> <input type = "checkbox"> remember the password </label> </div> <! -- Do this for multiple selection boxes. Otherwise, the selection box overlaps with the text. --> <div class = "form-group"> <button type = "submit" class = "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 Logon </legend> <div class = "form-group"> <label class = "sr-only "> User Name: </label> <! -- Sr-only hide the label --> <input type = "text" class = "form-control" name = "name" placeholder = "username"> </div> <div class = "form-group"> <label> password: </label> <input type = "password" class = "form-control" name = "pwd" placeholder = "password"> <! -- Form-control indicates that the container is full --> </div> <div class = "checkbox"> <label> <input type = "checkbox"> remember the password </label> </div> <! -- Do this for multiple selection boxes. Otherwise, the selection box overlaps with the text. --> <div class = "form-group"> <button type = "submit" class = "btn -default "> submit </button> </div> </fieldset> </form> </div>

Put label and input in the same row

<Div class = "container"> <form action = "#" method = "post" class = "form-horizontal"> <! -- Form-horizontal let form initialization --> <fieldset> <legend> User Login </legend> <div class = "form-group"> <label class = "col-xs-3 control-label "> User Name: </label> <! -- Use the raster system to set the label width --> <div class = "col-xs-9"> <input type = "text" class = "form-control" name = "name" placeholder =" username "> </div> <! -- Use div to set the grid and wrap the input --> </div> </form> </div> <! -- Note! Put the label and input in the same row at a resolution of 768, which is normal on md and lg -->

Add a small icon

<Div class = "container"> <form action = "#" method = "post" class = "form-horizontal"> <! -- Form-horizontal: Initialize the form --> <fieldset> <legend> User Logon </legend> <div class = "form-group has-feedback has-success"> <! -- Add has-feedback to the class enclosed by the Project div --> <label class = "col-xs-3 control-label"> User Name: </label> <div class = "col-xs-9"> <input type = "text" class = "form-control" name = "name" placeholder = "username"> <span class = "glyphicon-OK form-control-feedback" aria-hidden = "true"> </span> <! -- Add a span under input and add form-c-f --> </div> </form> </div>

A bunch of Button Components

<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>

Do not forcibly separate a button because it is a set of buttons in the middle, not rounded corners.

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>

The above is the form part of the basic Bootstarp tutorial. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!