Bootstrap3.0 learning Round 7 (button)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the button style.

 

You can use the class listed above to quickly create a button with a style.

<Button type => Default </button> <button type => Primary </button> <button type => Success </button> <button type => Info </button> <button type => Warning </button> <button type => Danger </button> <button type => link </button>

Do I need to make the buttons have different sizes? Use.btn-lg,.btn-sm,.btn-xsButtons of different sizes can be obtained.

<p>  <button type= =>Large button</button>  <button type= =>Large button</button></p><p>  <button type= =>Default button</button>  <button type= =>Default button</button></p><p>  <button type= =>Small button</button>  <button type= =>Small button</button></p><p>  <button type= =>Extra small button</button>  <button type= =>Extra small button</button></p>

Add by button.btn-blockIt can be filled with 100% of the width of the parent node, and the button is changed to a block element.

<button type= =>Block level button</button><button type= =>Block level button</button>

When the button is active, it is pressed (the background is deeper, the border is deeper, and the built-in shadow ). For B<button>Element, through:active. For<a>Element, through.active. However, you can also use.active <button>And make it active by programming.

Button Element

Because:activeIt is a pseudo State, so you do not need to add it, but you can add it when you need to show the same appearance.active.

<button type= =>Primary button</button><button type= =>Button</button>

Link Element

Can be<a>Add.activeClass.

a href= = role=>Primary link</a><a href= = role=>Link</a>

It can be compared with the button above.

By fading the background color of the button to 50%, the unclickable effect can be displayed.

Button Element

Is<button>AdddisabledAttribute.

<button type= = disabled=>Primary button</button><button type= = disabled=>Button</button>

You can place the cursor over the button and click to view the effect.

Cross-browser compatibility

If<button>AdddisabledInternet Explorer 9 and earlier browsers will render the text in the button as gray and have a disgusting shadow. There is no solution yet.

Link Element

Is<a>Add.disabledClass.

<a href= = role=>Primary link</a><a href= = role=>Link</a>

This is a comparison with the above button.

We set.disabledUsed as a tool class, just like.activeClass, so you do not need to add a prefix.

The link function is not affected.

The class mentioned above only changes<a>Does not affect the function. In this document, we use JavaScript code to disable the default function of the link.

 

Context-specific usage

While button classes can be used on<a>And<button>Elements, only<button>Elements are supported within our nav and navbar components.

 

Can be<a>,<button>Or<input>Add element button class.

    <a = href= role=>Link</a>    <button = type=>Button</button>    <input = type= value=>    <input = type= value=>

Cross-browser Performance

As a best practice,We strongly recommend that you use<button>ElementTo ensure consistent style across browsers.

For other reasons, this Firefox bug makes us unable<input>Tag button settingsline-heightAs a result, they are highly different from other buttons in Firefox.

 

This section describes the button style. It is mainly to flexibly run these styles for control.

This article also updates to the Bootstrap3.0 getting started learning series navigation http://www.cnblogs.com/aehyok/p/3404867.html