Bootstrap-buttons for global css styles

Bootstrap-buttons for global css styles
The buttons mentioned here are only attributes designed by Bootstrap to render tags or elements in the button style. Therefore, they are used to add button classes for <a>, <button>, or <input> elements) you can use the style provided by Bootstrap. Of course, when using Bootstrap in actual development, we may use buttons anywhere, but you may also find that not all buttons can be presented according to your ideas, note. Let's take a look at the precautions raised on the official website. (1) Precautions for components although the button class can be applied to <a> and <button> elements, the navigation and navigation bar components only support <button> elements. (2) note: When a link is used as a button, if the <a> element is used as a button, it is used to trigger certain functions on the current page, not to link other pages or other parts of the current page., therefore, you must set the role = "button" attribute for it. (3) Best practices for cross-browser display: it is strongly recommended that you use the <button> element whenever possible to obtain matching rendering results on each browser. In addition, we also found a bug in Firefox <30 version of the browser, which shows that it prevents us from setting the line-height attribute for the button created based on the <input> element, as a result, the Firefox browser cannot maintain the same height as other buttons. In my personal use, I found a very bad phenomenon, that is, when using <button>, add the id attribute for the tag, and when using js to operate the button, you will find that, JS cannot operate this button in some Bootstrap components, but when you change <button> </button> to <input/>, you will find that you are using js control. I don't know the specific reason, and I have no time to go into it. Maybe it's because Bootstrap's js has set something. Therefore, we recommend that you use the input or a tag when using the button and js operations. Next let's take a look at the predefined Style

<! -- Standard button --> <button type = "button" class = "btn-default"> (Default style) default </button> <! -- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type = "button" class = "btn-primary"> (preference) primary </button> <! -- Indicates a successful or positive action --> <button type = "button" class = "btn-success"> (successful) Success </button> <! -- Contextual button for informational alert messages --> <button type = "button" class = "btn-info"> (General Information) Info </button> <! -- Indicates caution shocould be taken with this action --> <button type = "button" class = "btn-warning"> (Warning) warning </button> <! -- Indicates a dangerous or potentially negative action --> <button type = "button" class = "btn-danger"> (dangerous) Danger </button> <! -- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type = "button" class = "btn-link"> (link) link </button>

 

The corresponding style) EOXVKDIWCLQO % R2O ~ $ B % 6 V. Of course, we can also adjust the button size.

<P> <button type = "button" class = "btn-primary btn-lg"> (large button) large button </button> <button type = "button" class = "btn-default btn-lg"> (Large button) large button </button> </p> <button type = "button" class = "btn-primary"> (default size) default button </button> <button type = "button" class = "btn-default"> (Default size) default button </button> </p> <button type = "button" class = "btn-primary btn-sm"> (small button) small button </button> <button type = "button" class = "btn-default btn-sm"> (Small button) small button </button> </p> <button type = "button" class = "btn-primary btn-xs"> (ultra Small size) extra small button </button> <button type = "button" class = "btn-default btn-xs"> (ultra small size) extra small button </button> </p>

 

Rendering effect: 2. You can also extend the. btn-block class to the width of the parent element 100% by adding a button, and the button is also changed to a block-level element.

<Button type = "button" class = "btn-primary btn-lg btn-block"> (block-level element) block level button </button> <button type = "button" class = "btn-default btn-lg btn-block"> (Block-level element) block level button </button>

 

The following describes the activation status of a button. When the button is activated, it is pressed down (with a deeper background, deeper border, and an inner shadow ). The <button> element is implemented in the active state. The <a> element is implemented through the. active class. However, you can also apply. active to <button> (including the aria-pressed = "true" attribute) and enable it programmatically. So how do we display the activation status? Because active is a pseudo-state, you do not need to add any more, but you can add the. active class when you want it to show the same appearance.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button><button type="button" class="btn btn-default btn-lg active">Button</button>

 

The status is active and disabled. In Bootstrap, you can set the opacity attribute for the button background to display the effect that cannot be clicked.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

 

Tip: The above-mentioned disable state class only disables the <a> element as the original function of the link by setting pointer-events: none. However, this CSS attribute is not standardized, in addition, browsers of Opera 18 and earlier versions do not fully support this attribute. Similarly, Internet Explorer 11 does not. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of existing Ive technologies will still be able to activate these links. therefore, we recommend that you use JavaScript code to disable the original functions of the link for security purposes.