Sometimes it's nice to be able to give users visual feedback when they hover their mouse over an element on the page. It's easy to do, of course, with a little CSS:
#hover-demo1 p:hover { background: #ff0; }
That little style rule changes the background of any paragraph that is a descendant of an element with id="hover-demo" to a nice bright yellow & but only when you hover your mouse over it. So, if that's all there is to it, what does this have to do with jQuery?Continue Reading Below
Unfortunately, (yep, you guessed it) Internet Explorer 6 and below don't support the :hover pseudo-class on any element except &a&. Bummer!
See for yourself here:
This is a paragraph. If you're using a modern browser, my background will be yellow when you hover over me.
Move your mouse over me! Move your mouse over me! I'll turn yellow, too! But not if you're using Internet Explorer 6 or below. :(
We could just leave it alone at this point and figure that people using real browsers will be rewarded with a little extra eye candy. On the other hand, maybe the right thing to do is to have mercy on the downtrodden. After all, even IE 6 users arguably have some aesthetic sense.
Enter jQuery
With a few lines of jQuery (one line, actually, if you don't care about making it readable) we can provide the hover effect to those using IE 6 or below, as long as they have JavaScript enabled. We also might as well keep the CSS rule in the stylesheet. Now, the only people who won't see the hover state change are those using Internet Explorer 6 (or below) with JavaScript off. Well, if they're using any browser with JavaScript and CSS turned off, they won't see it either. But that sort of folk ain't hankerin' for the eye candy anyway.
First, we give a simple class the same background as the aforementioned :hover pseudo-class:
.pretty-hover, #hover-demo1 p:hover {
&&background: #ff0;
Next, we use jQuery to add class="pretty-hover" to each paragraph when the user hovers over it:
JavaScript:
$('#hover-demo2 p').(function() {
& $(this).('pretty-hover');
}, function() {
& $(this).('pretty-hover');
});
Note: We switched to a different id here so that IE 6 users can see the difference between the two hover demos, but the idea is that you would use the .hover() method on the same elements that you applied the :hover pseudo-class to.
That's it! Give it a whirl:
This is a paragraph. My background will be yellow when you hover over me & even if you're using Internet Explorer.
Move your mouse over me! Move your mouse over me! I'll turn yellow, too! Internet Explorer users welcome!
Try it with Firefox, Safari, or Internet Explorer. Try it with any browser you wish (within reason) & and you should see the yellow.
If you'd like to replicate the look of a hovered link, you can add another CSS declaration to the "pretty-hover" class:
.pretty-hover {
&&background: #
That'll work nicely for
triggered by clicking on elements other than &a&.
Scripts included in this post:
Sorry, but comments for this entry are now closed.
Recommended Book
By Karl Swedberg & Jonathan Chaffer
What Is This?
Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. We have tutorials for all skill levels, and each entry is categorized by level of difficulty.
& Copyright
Learning jQuery and participating authors. Written content on this site is under a Creative Commons License. Code examples are under your choice of MIT or GPL license.
Development by . Design by . Published with .IE8中a标签的hover属性设置background和文字的color无效，急求解决。。_百度知道
IE8中a标签的hover属性设置background和文字的color无效，急求解决。。
但是点击选中一个a链接之后，其余浏览器都是好的。我也设置了href属性的，唯独IE8在页面上有多个a标签，也就是只会显示一片白色，第一次加载时能够看到有hover的效果，我设置的是鼠标划过的时候文字显示白色,这是微软IE的一个bug吗，真心不解了，再把鼠标移到页面的其他a链接上面就只会有文字的color，每一个都是如此，背景颜色不出来，背景颜色显示蓝色
提问者采纳
a的默认有一个a:visit属性，访问后会变蓝色，你需要去设置
提问者评价
其他类似问题
为您推荐：
您可能关注的推广
background的相关知识
其他2条回答
block，希望你采纳; 即可还不错加 display
在a的css里面加多一句display:inline- 试试。
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁css幽灵按钮 请问这段代码为什么在ie8中，鼠标放在框内非文字处时没有hover效果，但在其他浏览器则正常？_百度知道
css幽灵按钮 请问这段代码为什么在ie8中，鼠标放在框内非文字处时没有hover效果，但在其他浏览器则正常？
color.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="& & font-size:0://f: 2px solid #FFFFFF:block.jpg" />a{ display:#FFFFFF.baidu: 2px solid #E04D47; font-weight. &nbsp: 100%.com/zhidao/pic/item/023b5bb5c9ea15ce53cd3aa4bb278.hiphotos:absolute:center<a href=" border:200px://f;
max-width: 16px. width:hover.hiphotos.baidu.jpg" esrc=" /zhidao/wh%3D600%2C800/sign=5f37c268e4fe/023b5bb5c9ea15ce53cd3aa4bb278:active{
& position://f, a:}a: /zhidao/wh%3D450%2C600/sign=397edb355adf8db1bc7b/023b5bb5c9ea15ce53cd3aa4bb278:#E04D47
提问者采纳
0;2px&nbsp:200px、文字以外的区域将无法触发hover事件:url(&nbsp经测试IE8下正常：为其设置一个空的背景图片;& font-size:#FFFFFF; solid&{
text-&nbsp:& position，所以IE6/7下鼠标悬停a标签内除边框;15px：a&nbsp:blank):&nbsp:& background- & 100%;&nbsp:&nbsp:&nbsp，解决的办法也很简单;&nbsp，即透明元素不响应hover事件:&nbsp，可能你的IE8开启了IE7的浏览器渲染模式; max-width:16px:&nbsp，代码如下。该问题是IE6/7的一个 right，你例子中的a标签没有任何背景颜色;#FFFFFF; font-weight，但IE7下出现了你描述的问题
提问者评价
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Bootstrap 教程
Bootstrap 按钮
按钮广泛应用于网站或应用程序中。在本教程中，我们将通过实例、实例解释来讨论如何使用 Boostrap 3 按钮，以及如何定制默认的按钮。
下面的实例将演示如何通过 Bootstrap 3 快速创建按钮。
&!DOCTYPE html&
&title&Default buttons from Bootstrap 3&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- Bootstrap --&
&link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"&
padding: 50px
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
&!-- 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="button" class="btn btn-success"&Success&/button&
&!-- Contextual button for informational alert messages --&
&button type="button" class="btn btn-info"&Info&/button&
&!-- Indicates caution should be taken with this action --&
&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&
&!-- Deemphasize a button by making it look like a link while maintaining button behavior --&
&button type="button" class="btn btn-link"&Link&/button&
&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
&script src="/jquery.js"&&/script&
&!-- Include all compiled plugins (below), or include individual files as needed --&
&script src="dist/js/bootstrap.min.js"&&/script&
以上代码输出如下。您可以。
我们将来探讨一下用来创建这些按钮的 CSS 规则。用于创建按钮的主要的 class 是 btn，如下所示。
display: inline-
padding: 6px 12
margin-bottom: 0;
font-size: 14
font-weight:
line-height: 1.;
text-align:
white-space:
vertical-align:
background-image:
border-radius: 4
-webkit-user-select:
-moz-user-select:
-ms-user-select:
-o-user-select:
user-select:
由于上面的 CSS 代码，按钮（带有 btn class）呈现为 inline-block，允许按钮与其具有共同基线的相邻元素内联呈现，但是您可以给它添加 width 和 height 属性。它的顶部填充和底部填充分别为 6 和 12 像素。底部外边距设置为 0。
字体尺寸设置为 14 像素，且字体的粗细设置为 normal。带有 btn class 的按钮行高为 1.，比默认高度 1 稍高一点。文本居中对齐。
white-space 属性设置为 nowrap，所以新行、空格和制表符将会折叠。相关的垂直居中的元素将会定位于高度的中间。当您把鼠标悬浮于相关元素之上时，光标会呈现为指针形状。这里不会显示背景图片。
这里将会呈现一个透明的，1 像素粗的实体边框。由于 border-radius: 4，相关按钮的边角将是圆角状的。通过增加或减少值 4px，您可以让圆角的圆度变得更大或更小。由于 user-select: none，相关按钮及子元素的文本将不可选。为了获得跨浏览器的一致性，相同的属性在应用时带有多个供应商的前缀。
上面实例中显示的每个按钮除了 btn 之外还有另一个 CSS class，比如 btn-default、btn-primary 等等。这些 class 用于设置按钮的 color、background-color 和 border 属性。他们是用于常规按钮及带有链接状态（即 hover、active、focus 等等）按钮的 CSS 规则。
btn-primary class 的代码如下
.btn-primary {
background-color: #428
border-color: #357
不同尺寸的按钮
这里有三种尺寸可设置。为了设置每种尺寸，需要添加一个额外的 class。
btn-lg for setting large button.
&button type="button" class="btn btn-primary btn-lg"&Large button&/button&
btn-lg class 的 CSS 代码如下
padding: 10px 16
font-size: 18
line-height: 1.33;
border-radius: 6
使用 btn-sm 和 btn-xs 设置带有不同尺寸的按钮。
&button type="button" class="btn btn-primary btn-sm"&Large button&/button&
&button type="button" class="btn btn-primary btn-xs"&Large button&/button&
btn-sm 和 btn-xs classe 的 CSS 代码如下
padding: 5px 10
font-size: 12
line-height: 1.5;
border-radius: 3
padding: 1px 5
下面的代码演示了不同类型的带有不同尺寸的按钮。您可以。下面是效果截屏及代码。
&!DOCTYPE html&
&title&Buttons of different sizes from Bootstrap 3&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- Bootstrap --&
&link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"&
padding: 50px
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
&!-- Standard button --&
&button type="button" class="btn btn-default btn-sm"&Default small button&/button&
&button type="button" class="btn btn-default btn-lg"&Default large button&/button&
&button type="button" class="btn btn-default btn-xs"&Default extra small button&/button&
&!-- Provides extra visual weight and identifies the primary action in a set of buttons --&
&button type="button" class="btn btn-primary btn-sm"&Small Primary button&/button&
&button type="button" class="btn btn-primary btn-lg"&Large Primary button&/button&
&button type="button" class="btn btn-primary btn-xs"&Extra small Primary button&/button&
&!-- Indicates a successful or positive action --&
&button type="button" class="btn btn-success btn-sm"&Small Success Button&/button&
&button type="button" class="btn btn-success btn-lg"&Large Success Button&/button&
&button type="button" class="btn btn-success btn-xs"&Extra small Success Button&/button&
&!-- Contextual button for informational alert messages --&
&button type="button" class="btn btn-info btn-sm"&Small Info Button&/button&
&button type="button" class="btn btn-info btn-lg"&Large Info Button&/button&
&button type="button" class="btn btn-info btn-xs"&Extra small Info Button&/button&
&!-- Indicates caution should be taken with this action --&
&button type="button" class="btn btn-warning btn-sm"&Small Warning Button&/button&
&button type="button" class="btn btn-warning btn-lg"&Large Warning Button&/button&
&button type="button" class="btn btn-warning btn-xs"&Extra small Warning Button&/button&
&!-- Indicates a dangerous or potentially negative action --&
&button type="button" class="btn btn-danger btn-sm"&Small Danger Button&/button&
&button type="button" class="btn btn-danger btn-lg"&Large Danger Button&/button&
&button type="button" class="btn btn-danger btn-xs"&Extra small Danger Button&/button&
&!-- Deemphasize a button by making it look like a link while maintaining button behavior --&
&button type="button" class="btn btn-link btn-sm"&Small Link with Button&/button&
&button type="button" class="btn btn-link btn-lg"&Large Link with Button&/button&
&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
&script src="/jquery.js"&&/script&
&!-- Include all compiled plugins (below), or include individual files as needed --&
&script src="dist/js/bootstrap.min.js"&&/script&
如需使用按钮所在容器的所有宽度，Bootstrap 3 提供了块级按钮选项。您需要添加 btn-block class 到上面讨论的 class 中来创建块级按钮。
&button type="button" class="btn btn-primary btn-lg btn-block"&Large button&/button&
&button type="button" class="btn btn-success btn-lg btn-block"&Large button&/button&
创建块级按钮的 CSS 定义如下
.btn-block {
width: 100%;
padding-right: 0;
padding-left: 0;
.btn-block + .btn-block {
margin-top: 5
下面显示了块级按钮的截屏和代码。您可以 。
&!DOCTYPE html&
&title&Block level buttons from Bootstrap 3&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- Bootstrap --&
&link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"&
padding: 50px
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
&div class="container"&
&div class="row"&
&div class="col-lg-12"&
&!-- Standard button --&
&button type="button" class="btn btn-primary btn-sm btn-block"&Default small block level button&/button&
&button type="button" class="btn btn-default btn-lg btn-block"&Default large block level button&/button&
&button type="button" class="btn btn-primary btn-xs btn-block"&Default extra block level button&/button&
&!-- Provides extra visual weight and identifies the primary action in a set of buttons --&
&button type="button" class="btn btn-primary btn-sm btn-block"&Small Primary block level button&/button&
&button type="button" class="btn btn-primary btn-lg btn-block"&Large Primary block level button&/button&
&button type="button" class="btn btn-primary btn-xs btn-block"&Extra Large Primary block level button&/button&
&!-- Indicates a successful or positive action --&
&button type="button" class="btn btn-success btn-sm btn-block"&Small Success block level button&/button&
&button type="button" class="btn btn-success btn-lg btn-block"&Large Success block level button&/button&
&button type="button" class="btn btn-success btn-xs btn-block"&Extra large Success block level button&/button&
&!-- Contextual button for informational alert messages --&
&button type="button" class="btn btn-info btn-sm btn-block"&Small Info block level button&/button&
&button type="button" class="btn btn-info btn-lg btn-block"&Large Info block level button&/button&
&button type="button" class="btn btn-info btn-xs btn-block"&Extra Large Info block level button&/button&
&!-- Indicates caution should be taken with this action --&
&button type="button" class="btn btn-warning btn-sm btn-block"&Small Warning block level button&/button&
&button type="button" class="btn btn-warning btn-lg btn-block"&Large Warning block level button&/button&
&button type="button" class="btn btn-warning btn-xs btn-block"&Extra Large Warning block level button&/button&
&!-- Indicates a dangerous or potentially negative action --&
&button type="button" class="btn btn-danger btn-sm btn-block"&Small Danger block level button&/button&
&button type="button" class="btn btn-danger btn-lg btn-block"&Large Danger block level button&/button&
&button type="button" class="btn btn-danger btn-xs btn-block"&Extra Large Danger block level button&/button&
&!-- Deemphasize a button by making it look like a link while maintaining button behavior --&
&button type="button" class="btn btn-link btn-sm btn-block"&Small Link with block level button&/button&
&button type="button" class="btn btn-link btn-lg btn-block"&Large Link with block level button&/button&
&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
&script src="/jquery.js"&&/script&
&!-- Include all compiled plugins (below), or include individual files as needed --&
&script src="dist/js/bootstrap.min.js"&&/script&
活动的按钮
您可以使用 active CSS class 来给按钮或链接添加不同的外观，以显示它是活动的。这里是一个 、截屏和代码。
&!DOCTYPE html&
&title&Active buttons from Bootstrap 3&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- Bootstrap --&
&link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"&
padding: 50px
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
&!-- Standard button --&
&button type="button" class="btn btn-default active"&Default&/button&
&!-- Provides extra visual weight and identifies the primary action in a set of buttons --&
&button type="button" class="btn btn-primary active"&Primary&/button&
&!-- Indicates a successful or positive action --&
&button type="button" class="btn btn-success active"&Success&/button&
&!-- Contextual button for informational alert messages --&
&button type="button" class="btn btn-info active"&Info&/button&
&!-- Indicates caution should be taken with this action --&
&button type="button" class="btn btn-warning active"&Warning&/button&
&!-- Indicates a dangerous or potentially negative action --&
&button type="button" class="btn btn-danger active"&Danger&/button&
&!-- Deemphasize a button by making it look like a link while maintaining button behavior --&
&button type="button" class="btn btn-link active"&Link&/button&
&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
&script src="/jquery.js"&&/script&
&!-- Include all compiled plugins (below), or include individual files as needed --&
&script src="dist/js/bootstrap.min.js"&&/script&
使用 Chrome 开发者工具，我们会发现当按钮被添加了 active class 时，CSS 规则生效。
Default 活动按钮
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #
border-color: #
Primary 活动按钮
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
background-color: #3276b1;
border-color: #285e8e;
Success 活动按钮
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
background-color: #47a447;
border-color: #398439;
Info 活动按钮
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
background-color: #39b3d7;
border-color: #269
Warning 活动按钮
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
background-color: #ed9c28;
border-color: #d58512;
Danger 活动按钮
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
background-color: #d2322d;
border-color: #ac2925;
Link 活动按钮
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
border-color:
所以，您可以看到这些是通过改变 color、backgound-color 和 border-color 属性来实现的。
禁用的按钮
您可以使用 disabled CSS class 来给按钮或链接添加不同的外观，以显示它是禁用的。这里是一个 、截屏和代码。
为了使按钮有点模糊，使用下面的 CSS 规则（通过 Chrome 开发者工具查找）
.btn[disabled], fieldset[disabled] .btn {
pointer-events:
cursor: not-
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow:
box-shadow:
&!DOCTYPE html&
&title&Disabled buttons from Bootstrap 3&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- Bootstrap --&
&link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"&
padding: 50px
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
&!-- Standard button --&
&button type="button" class="btn btn-default" disabled="disabled"&Default&/button&
&!-- Provides extra visual weight and identifies the primary action in a set of buttons --&
&button type="button" class="btn btn-primary" disabled="disabled"&Primary&/button&
&!-- Indicates a successful or positive action --&
&button type="button" class="btn btn-success" disabled="disabled"&Success&/button&
&!-- Contextual button for informational alert messages --&
&button type="button" class="btn btn-info" disabled="disabled"&Info&/button&
&!-- Indicates caution should be taken with this action --&
&button type="button" class="btn btn-warning" disabled="disabled"&Warning&/button&
&!-- Indicates a dangerous or potentially negative action --&
&button type="button" class="btn btn-danger" disabled="disabled"&Danger&/button&
&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
&script src="/jquery.js"&&/script&
&!-- Include all compiled plugins (below), or include individual files as needed --&
&script src="dist/js/bootstrap.min.js"&&/script&
禁用的锚元素
当带有 btn 和其他相关的 class 的锚元素呈现为禁用状态时，它与平常有点不同。首先，锚元素的链接仍然存在，只有外观和感观改变了。此外，您不能在导航栏中使用它们。
。代码如下：
&!DOCTYPE html&
&title&Disabled anchor buttons from Bootstrap 3&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- Bootstrap --&
&link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"&
padding: 50px
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
&!-- Standard button --&
&a href="" class="btn btn-default disabled" role="button"&Default&/a&
&!-- Provides extra visual weight and identifies the primary action in a set of buttons --&
&a href="" class="btn btn-primary disabled" role="button"&Primary&/a&
&!-- Indicates a successful or positive action --&
&a href="" class="btn btn-success disabled" role="button"&Success&/a&
&!-- Contextual button for informational alert messages --&
&a href="" class="btn btn-info disabled" role="button"&Info&/a&
&!-- Indicates caution should be taken with this action --&
&a href="" class="btn btn-warning disabled" role="button"&Warning&/a&
&!-- Indicates a dangerous or potentially negative action --&
&a href="" class="btn btn-danger disabled" role="button"&Danger&/a&
&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
&script src="/jquery.js"&&/script&
&!-- Include all compiled plugins (below), or include individual files as needed --&
&script src="dist/js/bootstrap.min.js"&&/script&
请注意，role="button" 是为了便于使用的目的而使用的。
您可以通过 button、a 和 input 元素使用按钮 class，来把按钮当成标签使用。但是推荐您通常是通过 button 元素来使用，否则它将引起跨浏览器不一致问题。
下面的实例演示了如何使用按钮标签
&!DOCTYPE html&
&title&Button tags example with Bootstrap 3&/title&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&!-- Bootstrap --&
&link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"&
padding: 50px
&!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&
&!-- WARNING: Respond.js doesn't work if you view the page via file:// --&
&!--[if lt IE 9]&
&script src="/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
&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"&
&a class="btn btn-primary" href="#" role="button"&Link&/a&
&button class="btn btn-primary" type="submit"&Button&/button&
&input class="btn btn-primary" type="button" value="Input"&
&input class="btn btn-primary" type="submit" value="Submit"&
&a class="btn btn-success" href="#" role="button"&Link&/a&
&button class="btn btn-success" type="submit"&Button&/button&
&input class="btn btn-success" type="button" value="Input"&
&input class="btn btn-success" type="submit" value="Submit"&
&a class="btn btn-info" href="#" role="button"&Link&/a&
&button class="btn btn-info" type="submit"&Button&/button&
&input class="btn btn-info" type="button" value="Input"&
&input class="btn btn-info" type="submit" value="Submit"&
&a class="btn btn-warning" href="#" role="button"&Link&/a&
&button class="btn btn-warning" type="submit"&Button&/button&
&input class="btn btn-warning" type="button" value="Input"&
&input class="btn btn-warning" type="submit" value="Submit"&
&a class="btn btn-danger" href="#" role="button"&Link&/a&
&button class="btn btn-danger" type="submit"&Button&/button&
&input class="btn btn-danger" type="button" value="Input"&
&input class="btn btn-danger" type="submit" value="Submit"&
&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
&script src="/jquery.js"&&/script&
&!-- Include all compiled plugins (below), or include individual files as needed --&
&script src="dist/js/bootstrap.min.js"&&/script&
现在我们将以默认按钮开始进行定制，让它拥有一个完全不同的外观和感观。
我们将按如下的按钮代码开始
&button type="button" class="btn btn-default"&Default&/button&
现在我们要创建一个 CSS class btn-w3r，并用它替换 btn-default。所以，我们将编写如下代码来取代上面的代码
&button type="button" class="btn btn-w3r"&Default&/button&
首先我们将改变背景颜色，添加如下的 CSS
.btn-w3r {
background: #cb60b3; /* Old browsers */
background: -moz-linear-gradient(top,
#cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#ad1283), color-stop(100%,#de47ac)); /
Chrome,Safari4+ */
background: -webkit-linear-gradient(top,
#cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,
#cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,
#cb60b3 0%,#ad1283 50%,#de47ac 100%); /* IE10+ */
background: linear-gradient(to bottom,
#cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 ); /* IE6-9 */
现在按钮如下所示
如需改变字体颜色，我们将在已存在的 btn-w3r class 的 CSS 代码后追加如下的 CSS
现在，为了让按钮形状看起来像圆形，我们将在已存在的 btn-w3r class 的 CSS 代码前添加如下的 CSS
width: 200
height: 200
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
如需添加一个悬停效果，我们将添加如下的 CSS 代码
.btn-w3r:hover {
background: #333;
color:#e75616;
下面是添加上述 CSS 代码后的按钮悬停效果