bootstrap-the global CSS style button

The button described here is just a Bootstrap design property that makes the label or element render a button style, so <a> <button> Adding a <input> button class to or from an element can use the style provided by Bootstrap.

Of course the use of bootstrap in the actual development, we may use the button anywhere, but you may also find that not all the buttons can be presented according to your ideas, so, the button to use some of the considerations we have to remember. Let's take a look at our official website.

(1) Precautions for Components

Although button classes can be applied to <a> and <button> elements, the navigation and navigation bar components only support <button> elements.

(2) Precautions when using the link as a button

If the <a> element is used as a button-and is used to trigger certain features on the current page-rather than to link other pages or links to other parts of the current page, be sure to set properties for them role="button" .

(3) cross-browser display

The best practice we've summed up is that we strongly recommend using <button> elements whenever possible to get a matching drawing effect on each browser.

In addition, we have found a bug that appears on the Firefox <30 version of the browser , which prevents us from setting properties for the <input> button created based on the element line-height , which results in a height that cannot be fully aligned with the other buttons on the Firefox browser.

I personally in use, found a very bad phenomenon, is the use of <button>, to add the id attribute for the tag, using the JS operation button, you will find that in some parts of bootstrap JS can not operate this button, but when you put <button></button> when you change to <input/>, you will find that you are using JS control. Specific what reasons I do not know, there is no time to delve into, may be bootstrap JS set some things it. Therefore, we recommend that you use the button, you need to JS operation, the use of input or a tag.

Here's a look at the predefined styles

Code<!--standard button--><button type= "Button"class="btn Btn-default> (default Style) default</button><!--provides extra visual weight and identifies the primary actioninchA set of buttons--><button type= "Button"class="btn Btn-primary> (Preferences) primary</button><!--indicates a successful or positive action--><button type= "Button"class="btn btn-success"> (Success) success</button><!--Contextual button forInformationalAlertMessages--><button type= "Button"class="btn Btn-info"> (general Information) info</button><!--indicates caution should be taken with  ThisAction--><button type= "Button"class="btn btn-warning"> (warning) warning</button><!--indicates a dangerous or potentially negative action--><button type="Button"class="btn Btn-danger"> (dangerous) danger</button><!--deemphasize a button by making it look like a link whileMaintaining button behavior--><button type= "Button"class="btn Btn-link"> (link) link</button>

The style that corresponds to the rendering

Of course, we can also adjust the button size

Code<p> <button type= "Button"class="btn btn-primary Btn-lg"> (large button) Large button</button> <button type="Button"class="btn Btn-default Btn-lg"> (large button) Large button</button></p><p> <button type="Button"class="btn Btn-primary"> (default size) button</button> <button type="Button"class="btn Btn-default"> (default size) button</button></p><p> <button type="Button"class="btn btn-primary btn-sm"> (small button) Small button</button> <button type="Button"class="btn Btn-default btn-sm"> (small button) Small button</button></p><p> <button type="Button"class="btn btn-primary Btn-xs"> (ultra-small size) Extra small button</button> <button type="Button"class="btn Btn-default Btn-xs"> (ultra-small size) Extra small button</button></p>

Rendered effect:

Also, by adding a class to a button, .btn-block you can stretch it to the width of the parent element 100%, and the button becomes a block-level element.

Code <button type= "buttonclass="btn btn-primary btn-lg btn-block"> (block Element) block level Button</button><button type= "buttonclass="btn btn-default btn-lg btn-block" > (block Element) block level button</button>

The following button activation status is described below

When the button is active, it behaves as if it is pressed down (deeper background, darker border, and cast shadow inward). For an <button> element, it is :active implemented through the state. For an <a> element, it is .active implemented through the class. However, you can also .active apply it to the <button> top (including aria-pressed="true" attributes) and programmatically make it active.

So how do we present the activation state? Because it :active is a pseudo state, you do not need to add additional, but you can add classes when you need to show them the same appearance .active .

Code <button type= "buttonclass="btn btn-primary btn-lg active">primary button</ Button><button type= "buttonclass="btn btn-default btn-lg active">button</ Button>

There is an active state, of course, there is a disabled state, in the bootstrap by setting the background of the button opacity can not be clicked effect.

Code <button type= "buttonclass="btn btn-lg btn-primary"disabled="disabled" >primary Button</button><button type= "buttonclass="btn btn-default btn-lg" disabled= "disabled" >Button</button>

Tips:

The disabled state class mentioned above simply disables the pointer-events: none <a> element as the original function of the link, but this CSS property is not standardized, and Opera 18 and earlier browsers do not fully support this property, and Internet Explorer 11 Also does not support. In addition, even in browsers so do support pointer-events: none , keyboard navigation remains unaffected, meaning that sighted keyboard Users and users of assistive technologies would still be able to activate these links. Therefore, for security reasons, it is recommended to disable the original functionality of the link through JavaScript code.

For more information on the use of bootstrap, please refer to the official documentation.

bootstrap-the global CSS style button