Bootstrap frame---CSS global style button style

Pre-defined Styles

First, we want to link CSS styles and JQ files first

		<link rel= "stylesheet" type= "Text/css" href= "Css/bootstrap.css"/>
		<script src= "Js/jquery.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
		<script src= "js/bootstrap.js" type= "Text/javascript" charset= "Utf-8" ></script>

Use the classes listed below to quickly create a button with a predefined style.

<!--standard button--<button type= "button" class= "btn Btn-default" >Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons--<button type= "button" class= " BTN btn-primary ">Primary</button> <!--indicates a successful or positive action--<button type=" butt On "class=" btn btn-success ">Success</button> <!--contextual button for informational alert messages-- Lt;button type= "button" class= "btn btn-info" >Info</button> <!--indicates caution should is taken with this a  Ction--<button type= "button" class= "btn btn-warning" >Warning</button> <!--indicates a dangerous or Potentially negative action--<button type= "button" class= "btn Btn-danger" >Danger</button> <!--Dee Mphasize a button by making it look like a link while maintaining button behavior--<button type= "button" class= "b TN Btn-link "&GT;LINK&LT;/BUTTON&GT
 

DimensionsDo you want the buttons to have different sizes? You can get buttons of different sizes using the. Btn-lg,. Btn-sm, or. Btn-xs.

<p>
  <button type= "button" class= "btn btn-primary btn-lg" >large button</button>
  <button Type= "button" class= "btn btn-default btn-lg" >large button</button>
</p>
<p>
  < Button type= "button" class= "btn btn-primary" >default button</button>
  <button type= "button" class= " BTN Btn-default ">default button</button>
</p>
<p>
  <button type=" button "class= "Btn btn-primary btn-sm" >small button</button>
  <button type= "button" class= "Btn btn-default btn-sm" >small button</button>
</p>
<p>
  <button type= "button" class= "btn Btn-primary btn-xs ">extra small button</button>
  <button type=" button "class=" Btn btn-default btn-xs " >extra Small button</button>
</p>

By adding the. Btn-block class to the button, you can stretch it to the width of the parent element 100%, and the button becomes a block-level (block) element.

activation state When the button is active, it behaves as if it is pressed (deeper background, darker edge of the border, casts shadows inward). For the <button> element, it is implemented by: the active state. For the <a> element, it is implemented through the. Active class. However, you can also apply. Active to <button> and make it active in a programmatic way.

The button element because: Active is pseudo state, so there is no need to add extra, but you can add it when you need to show the same appearance. Active class

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

Link (<a>) elementsYou can add an. Active class for a button that is created based on the <a> element.

<a href= "#" class= "btn btn-primary btn-lg Active" role= "button" >primary link</a> <a
href= "#" class= " BTN Btn-default btn-lg Active "role=" button >Link</a>

Disable state You can render an opacity effect by setting the property of the button's background

The button element adds the disabled property to the <button> element to show the disabled state.

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

cross-browser compatibility

If you add the Disabled property to the <button> element, Internet Explorer 9 and earlier browsers will draw the text in the button gray, with a nasty shadow, and we don't have a workaround yet. Link (<a>) elements

Add the. Disabled class for the button created based on the <a> element.

<a href= "#" class= "btn btn-primary btn-lg Disabled" role= "button" >primary link</a> <a
href= "#" Class = "BTN btn-default btn-lg Disabled" role= "button" >Link</a>

We use the. Disabled as a tool class, just like the. Active class, so you don't need to add a prefix.

the original functionality of the link is unaffected

The classes mentioned above simply disable the <a> element as the original function of the link by setting Pointer-events:none, but this CSS property is not standardized, and Opera 18 and earlier browsers do not fully support this property, as well, Internet Explorer 11 is not supported either. Therefore, for security reasons, it is recommended to disable the original functionality of the link through JavaScript code. context-specific Usage

Although button classes can be applied to <a> and <button> elements, the navigation and navigation bars only support <button> elements. button Classes apply button classes for <a>, <button>, or <input> elements.

<a class= "btn Btn-default" href= "#" role= "button" >Link</a>
<button class= "btn btn-default" type= " Submit ">Button</button>
<input class=" btn btn-default "type=" button "value=" input ">
< Input class= "btn Btn-default" type= "Submit" value= "Submit" >

cross-Browser presentation

The best practice we summarize is that we strongly recommend that you use the <button> element as much as possible to get a matching drawing effect on each browser.

In addition, we also found a bug in the Firefox <30 version of the browser, a bug that prevented us from setting the Line-height property for a button created based on the <input> element, which caused the Firefox browser to not fully He kept the button at a consistent height.