← Bootstrap 2 Wells Bootstrap 2 图片 →

Bootstrap 2 按钮

Bootstrap 2 为按钮内置了许多样式，本节我们将介绍 Bootstrap 2 的按钮和如何定制按钮

使用默认的按钮

下面的范例演示了如何通过 Bootstrap 2 快速创建按钮

<!-- 标准按钮 -->
<button type="button" class="btn btn-default">默认</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接</button>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

不同尺寸的按钮

Bootstrap 内置了三种不同尺寸的图片 .btn-large 、 .btn-smallall 、 .btn-mini

<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-primary btn-small">Large button</button>
<button type="button" class="btn btn-primary btn-mini">Large button</button>

下面的范例演示了不同类型的带有不同尺寸的按钮

<!-- 标准按钮 -->
<p>
    <button type="button" class="btn btn-default btn-small">默认小的按钮</button>
    <button type="button" class="btn btn-default btn-large">默认大的按钮</button>
    <button type="button" class="btn btn-default btn-mini">默认特别小的按钮</button>
</p>
<p>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary btn-small">小的原始按钮</button>
    <button type="button" class="btn btn-primary btn-large">大的原始按钮</button>
    <button type="button" class="btn btn-primary btn-mini">特别小的原始按钮</button>
</p>
<p>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-success btn-small">小的成功按钮</button>
    <button type="button" class="btn btn-success btn-large">大的成功按钮</button>
    <button type="button" class="btn btn-success btn-mini">特别小的成功按钮</button>
</p>
<p>
    <!-- 信息警告消息的上下文按钮 -->
    <button type="button" class="btn btn-info btn-small">小的信息按钮</button>
    <button type="button" class="btn btn-info btn-large">大的信息按钮</button>
    <button type="button" class="btn btn-info btn-mini">特别小的信息按钮</button>
</p>
<p>
    <!-- 表示应谨慎采取的动作 -->
    <button type="button" class="btn btn-warning btn-small">小的警告按钮</button>
    <button type="button" class="btn btn-warning btn-large">大的警告按钮</button>
    <button type="button" class="btn btn-warning btn-mini">特别小的警告按钮</button>
</p>
<p>
    <!-- 表示一个危险的或潜在的负面动作 -->
    <button type="button" class="btn btn-danger btn-small">小的危险按钮</button>
    <button type="button" class="btn btn-danger btn-large">大的危险按钮</button>
    <button type="button" class="btn btn-danger btn-mini">特别小的危险按钮</button>
</p>
<p>
    <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-link btn-small">小的链接按钮</button>
    <button type="button" class="btn btn-link btn-large">大的链接按钮</button>
</p>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

块级按钮

如需使用按钮所在容器的所有宽度，Bootstrap 3 提供了块级按钮选项

Bootstrap 2 .btn-block CSS 类用来创建块级按钮

<button type="button" class="btn btn-primary btn-large btn-block">Large button</button>

下面的范例演示了块级按钮的使用

<!-- 标准按钮 -->
<p>
    <button type="button" class="btn btn-primary btn-small btn-block">默认小的块级按钮</button>
    <button type="button" class="btn btn-default btn-large btn-block">默认大的块级按钮</button>
    <button type="button" class="btn btn-primary btn-mini btn-block">默认特别小的块级按钮</button>
</p>
<p>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary btn-small btn-block">小的原始块级按钮</button>
    <button type="button" class="btn btn-primary btn-large btn-block">大的原始块级按钮</button>
    <button type="button" class="btn btn-primary btn-mini btn-block">特别小的原始块级按钮</button>
</p>
<p>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-success btn-small btn-block">小的成功块级按钮</button>
    <button type="button" class="btn btn-success btn-large btn-block">大的成功块级按钮</button>
    <button type="button" class="btn btn-success btn-mini btn-block">特别小的成功块级按钮</button>
</p>
<p>
    <!-- 信息警告消息的上下文按钮 -->
    <button type="button" class="btn btn-info btn-small btn-block">小的信息块级按钮</button>
    <button type="button" class="btn btn-info btn-large btn-block">大的信息块级按钮</button>
    <button type="button" class="btn btn-info btn-mini btn-block">特别小的信息块级按钮</button>
</p>
<p>
    <!-- 表示应谨慎采取的动作 -->
    <button type="button" class="btn btn-warning btn-small btn-block">小的警告块级按钮</button>
    <button type="button" class="btn btn-warning btn-large btn-block">大的警告块级按钮</button>
    <button type="button" class="btn btn-warning btn-mini btn-block">特别小的警告块级按钮</button>
</p>
<p>
    <!-- 表示一个危险的或潜在的负面动作 -->
    <button type="button" class="btn btn-danger btn-small btn-block">小的危险块级按钮</button>
    <button type="button" class="btn btn-danger btn-large btn-block">大的危险块级按钮</button>
    <button type="button" class="btn btn-danger btn-mini btn-block">特别小的危险块级按钮</button>
</p>
<p>
    <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-link btn-small btn-block">小的链接块级按钮</button>
    <button type="button" class="btn btn-link btn-large btn-block">大的链接块级按钮</button>
</p>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

活动的按钮

Bootstrap 2 .active CSS 类用来给按钮或链接添加不同的外观，以显示它是活动的

<!-- 标准按钮 -->
<button type="button" class="btn btn-default active">默认</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary active">原始</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success active">成功</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info active">信息</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning active">警告</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger active">危险</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link active">链接</button>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

禁用的按钮

Bootstrap .disabled CSS 类用来给按钮或链接添加不同的外观，以显示它是禁用的

<!-- 标准按钮 -->
<button type="button" class="btn btn-default" disabled="disabled">默认</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary" disabled="disabled">原始</button>

<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success" disabled="disabled">成功</button>

<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info" disabled="disabled">信息</button>

<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning" disabled="disabled">警告</button>

<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger" disabled="disabled">危险</button>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

禁用的锚元素

当带有 btn 和其它相关的 class 的锚元素呈现为禁用状态时，它与平常有点不同

首先，锚元素的链接仍然存在，只有外观和感观改变了

此外，不能在导航栏中使用它们

<!-- 标准按钮 -->
<a href="http://www.example.com" class="btn btn-default disabled" role="button">默认</a>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<a href="http://www.example.com" class="btn btn-primary disabled" role="button">原始</a>

<!-- 表示一个成功的或积极的动作 -->
<a href="http://www.example.com" class="btn btn-success disabled" role="button">成功</a>

<!-- 信息警告消息的上下文按钮 -->
<a href="http://www.example.com" class="btn btn-info disabled" role="button">信息</a>

<!-- 表示应谨慎采取的动作 -->
<a href="http://www.example.com" class="btn btn-warning disabled" role="button">警告</a>

<!-- 表示一个危险的或潜在的负面动作 -->
<a href="http://www.example.com" class="btn btn-danger disabled" role="button">危险</a>

请注意， role="button" 是为了便于使用的目的而使用的

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

按钮标签

我们可以对 button、a 和 input 元素使用 .btn CSS 类来把按钮当成标签使用

不过建议你一般情况下还是通过 button 元素来使用，否则它将引起跨浏览器不一致问题

<p>
    <a class="btn btn-default" href="#" role="button">链接</a>
    <button class="btn btn-default" type="submit">按钮</button>
    <input class="btn btn-default" type="button" value="输入">
    <input class="btn btn-default" type="submit" value="提交">
</p>
<p>
    <a class="btn btn-primary" href="#" role="button">链接</a>
    <button class="btn btn-primary" type="submit">按钮</button>
    <input class="btn btn-primary" type="button" value="输入">
    <input class="btn btn-primary" type="submit" value="提交">
</p>
<p>
    <a class="btn btn-success" href="#" role="button">链接</a>
    <button class="btn btn-success" type="submit">按钮</button>
    <input class="btn btn-success" type="button" value="输入">
    <input class="btn btn-success" type="submit" value="提交">
</p>
<p>
    <a class="btn btn-info" href="#" role="button">链接</a>
    <button class="btn btn-info" type="submit">按钮</button>
    <input class="btn btn-info" type="button" value="输入">
    <input class="btn btn-info" type="submit" value="提交">
</p>
<p>
    <a class="btn btn-warning" href="#" role="button">链接</a>
    <button class="btn btn-warning" type="submit">按钮</button>
    <input class="btn btn-warning" type="button" value="输入">
    <input class="btn btn-warning" type="submit" value="提交">
</p>
<p>
    <a class="btn btn-danger" href="#" role="button">链接</a>
    <button class="btn btn-danger" type="submit">按钮</button>
    <input class="btn btn-danger" type="button" value="输入">
    <input class="btn btn-danger" type="submit" value="提交">
</p>

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

定制按钮

我们可以对默认按钮开始进行定制，让它拥有一个完全不同的外观和感观

我们将按如下的按钮代码开始

<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 */
}

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

如需改变字体颜色，我们将在已存在的 btn-w3r class 的 CSS 代码后追加如下的 CSS

color:#fff;

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

现在，为了让按钮形状看起来像圆形，我们将在已存在的 btn-w3r class 添加如下代码

width: 200px;
height: 200px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

如需添加一个悬停效果，可以添加如下的 CSS 代码

.btn-w3r:hover {
    background: #333; 
    color:#e75616;
}

运行范例 »

运行以上范例，输出结果如下

Bootstrap 2 button demo

← Bootstrap 2 Wells Bootstrap 2 图片 →

Bootstrap 2 基础教程

♥ 简单教程，简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.