Comprehensive analysis of how to use Bootstrap forms (form buttons)_javascript skills

1. Multi-tag support

In addition to using the tag element when making buttons, you can also use and tags.

Similarly, when making buttons in the Bootstrap framework, in addition to the label elements just mentioned, you can also use them on other label elements. The only thing you need to pay attention to is to add a class to the label element when making the button. Name ".btn".

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

2. Customized style

Different button styles in the Bootstrap framework are implemented through different class names.

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

3. Button size

In the Bootstrap framework, the size of buttons can also be customized. ​

Three class names are provided in the Bootstrap framework to control button size:

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

4. Block buttons

The Bootstrap framework provides a class name ".btn-block". Using this class name for a button allows the button to fill the entire container, and the button will not have any padding or margin values. In practice, this kind of button is often called a block button.

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

5. Button disabled state

In the Bootstrap framework, there are two ways to disable buttons:

　Method 1: Add the disabled attribute in the tag

　Method 2: Add the class name "disabled" in the element tag

　The main difference between the two is:

The ".disabled" style will not disable the button's default behavior, such as submit and reset behaviors.

Adding the "disabled" attribute to the element tag can disable the element's default behavior.

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

Today I will add some new knowledge for you: Bootstrap form prompt information

Usually when making form verification, different prompt information should be provided. This effect is also provided in the Bootstrap framework. A "help-block" style is used to display the prompt information in a block and at the bottom of the control.

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

The above is a detailed introduction to Bootstrap form buttons. More content will be updated in the future. I hope you will continue to pay attention.