Boostrap Getting Started + style learning--three--

11. Basic Forms

• Class name form-control
  1, the width becomes 100%
  2. A light gray (#ccc) border is set
  3, with 4px rounded corners
  4. Shadow and border effects change when the shadow effect is set and the element gets focus
  5, set the color of the placeholder for #999

• Class name form-horizontal
  Horizontal form style (label left, form control right)

• Class name form-inline
  Display the form's controls in one line

• Form control (input box inputs)
  A single-line input box, a common text input box, that is, the Type property value of input is text. You must also add a type when using input in bootstrap, and if you do not specify a type, you will not get the correct style because the bootstrap frame is passed input[type=“?”] (where the symbol represents the type, for example, the text type, which corresponds input[type=“text”] to the form to define the style. To make the control style error-prone in various form styles, you need to add the class name "Form-control"

• Form control (drop-down selection box Select)
  Multiline selection Setting the value of the Multiple property is multiple<select multiple class="form-control">

• Form controls (text field textarea)
  The text field, like the original use method, sets rows to define its height, and the setting cols can set its width. However, if the class name "Form-control" class name is added to the TEXTAREA element, you do not need to set the Cols property. Because the "Form-control" style in the bootstrap frame has a form control width of 100% or auto.

<form  role  = "form" ;  <div  class  =  "Form-group" ;  < TextArea  class  = "Form-control"  rows  = "3" ;  </< Span class= "Hljs-title" >textarea ;  </div ;  </form ;   

• Form control (check box checkbox and Single-select button radio)
  1, either a checkbox or a radio is wrapped with a label
  2, a checkbox with a label label placed in a named ". CheckBox "Within the container
  3, radio with label label placed in a container named". Radio "
  in the bootstrap framework, the". CheckBox "and". Radio "styles are used to handle check boxes, The alignment of the radio button to the label.

• Form controls (check boxes and radio buttons are arranged horizontally)
  1, if the checkbox needs to be arranged horizontally, simply add the class name "Checkbox-inline"
  2 on the label label, and if radio needs to be arranged horizontally, Just add the class name "Radio-inline"

• Form Control (button) on the label label
  

• Form Control size
  1, INPUT-SM: Make the control smaller than normal
  2 , INPUT-LG: Make the control larger than normal
  These two classes apply to Input,textarea and select controls in a form, using the following:

<input class  = "Form-control input-lg"  type  =   "text"  placeholder= "Add. Input-lg, control becomes larger"  ><input class  = "Form-control"  Span class= "Hljs-class" >type  =   "text"  Placeholder= "normal size"  ><input class  = "Form-control input-sm"  type  =   "text"  placeholder= "Add. input-sm, control becomes smaller" ;  

• Form control state (focus state)
  The focus state is implemented by pseudo-class ": Focus"

• Form control state (disabled state)
  Just add "disabled" to the form control you want to disable.

class="form-control"type="text" placeholder="表单已禁用，不能输入" disabled>

In the bootstrap framework, if fieldset sets the disabled property, the entire domain is disabled. This input box cannot be disabled if there is an input box in the legend.

• Form control state (validation status)
  1. Has-warning: Warning Status (yellow)
  2. Has-error: Error status (red)
  3. Has-success: Success status (Green)
  You only need to add the State class name on the Form-group container when you use it.
  Many times, when the form is validated, different states provide different icons, such as success is a checkmark (√), the error is a fork (x), and so on. This effect is also provided in the Bootstrap box. If you want the form to show the icon in its corresponding state, simply add the class name "Has-feedback" in the corresponding state. Note that this class name is to be combined with "Has-error", "has-warning", and "has-success":

<form role="Form"> <Div class="Form-group has-success has-feedback"> <labelclass="Control-label"  for="InputSuccess1"> Success Status </label> <input type="Text" class="Form-control" ID="InputSuccess1"Placeholder="Success Status"> <spanclass="Glyphicon glyphicon-ok form-control-feedback"></span> </Div> <Div class="Form-group has-warning has-feedback"> <labelclass="Control-label"  for="InputWarning1"> Warning Status </label> <input type="Text" class="Form-control" ID="InputWarning1"Placeholder="Warning Status"> <spanclass="Glyphicon glyphicon-warning-sign form-control-feedback"></span> </Div> <Div class="Form-group has-error has-feedback"> <labelclass="Control-label"  for="InputError1"> Error status </label> <input type="Text" class="Form-control" ID="InputError1"Placeholder="Error Status"> <spanclass="Glyphicon glyphicon-remove form-control-feedback"></span> </Div> <Div class="Form-group has-error has-feedback"> <labelclass="Control-label"  for="InputError1">email address </label> <input type="Text" class="Form-control" ID="InputError1"Placeholder="Error Status"> <spanclass="Glyphicon glyphicon-remove form-control-feedback"></span> </Div></form>

The small icons in Bootstrap are made using @font-face (the following will focus on a section of content). And you must add a SPAN element to the form

• form hint Information
  It is common to provide different tips when making forms validation. This effect is also provided in the bootstrap framework. A style is used to help-block display the cue information in chunks and at the bottom of the control. help-inlinemake the cue message appear behind the control, which is the same level of display

  12. Button

<buttonclass="BTN"  Type="button"> Base button .btn</button> <buttonclass="Btn Btn-default"  Type="button"> Default button. btn-default</button> <buttonclass="Btn btn-primary"  Type="button"> main button .btn-primary</button> <buttonclass="Btn btn-success"  Type="button"> Success Button .btn-success</button> <buttonclass="Btn Btn-info"  Type="button"> Information button .btn-info</button> <buttonclass="Btn btn-warning"  Type="button"> Warning Button .btn-warning</button> <buttonclass="Btn Btn-danger"  Type="button"> Danger button .btn-danger</button> <buttonclass="Btn Btn-link"  Type="button"> Link button .btn-link</button>

-Button Size

• Block button
  A class name of "Btn-block" is provided in the bootstrap framework. The button uses this class name to fill the container with the button, and the button will not have any padding and margin values. In practice, this button is often called a block button.

• Button state-disabled state
  Method 1: Add the disabled attribute to the label
  Method 2: Add the class name "disabled" to the element tag

class="btnbtn-primary btn-lgbtn-block"type="button" disabled="disabled"class="btnbtn-primary btn-block disabled"type="button"class="btnbtn-primary btn-smbtn-block"type="button">未禁用的按钮</button>

Copyright NOTICE: This article for Bo Master original article, thank you for reference! Where there is a problem, you are welcome to correct and progress together.

Boostrap Get started + style learning--three---