Bootstrap第一小节

博主： E_Page
发布时间：2021 年 10 月 23 日
377 次浏览
暂无评论
8664字数
分类： code

下载 Bootstrap

Bootstrap 安装是非常容易的，你可以从 Bootstrap官网上下载 Bootstrap 的最新版本。
为了更方便的使用，你可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。
已编译的 CSS 和 JS（bootstrap.

），以及已编译压缩的 CSS 和 JS（bootstrap.min.

）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap CDN 推荐

您也可以选择不下载Bootstrap，直接使用 Bootstrap CDN库，国内推荐使用 BootCDN 上的库。

具体使用如下：

<!-- Bootstrap核心CSS文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件，务必在bootstrap.min.js之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

此外，您还可以使用以下的 CDN 服务：

国内推荐使用 : https://www.staticfile.org/
国际推荐使用：https://cdnjs.com/

Bootstrap CSS 概览

在本节中，我们主要概述一下 Bootstrap 的一些CSS特性。

HTML 5 文档类型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要声明 HTML5 文档类型（Doctype）。

因此，请在使用 Bootstrap 项目中包含下面的代码段。

<!DOCTYPE html>
<html>
    ....
</html>

提示：使用 Bootstrap 创建网页时，如果不在开头声明 HTML5 的文档类型，则会出现一些不可预测的浏览器显示问题。

移动设备优先
Bootstrap 3 新增了移动设备优先的特性。

为了让 Bootstrap 3 开发的网页更好的兼容移动设备，确保绘制和触屏的正常使用，需要在网页的 head 中添加 viewport meta 标签。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

页面排版 - 标题

标题
Bootstrap 对 HTML 标题 (h1 ~ h6) 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class= (.h1 ~ .h6) 来实现相同的功能。

内联元素使用标题字体：

<span class="h1">Bootstrap</span>

注：使用 Bootstrap 后，网页的字体颜色、字体样式、行高均被固定了，保证其统一。

不使用 Bootstrap 时，字体样式会根据系统内置的首选字体决定。

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题,如下所示:

<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>

下表列出了一些内联文本元素：

页面排版 - 页面主体

页面主体
Bootstrap 将页面主体设置默认为：

font-size:14px；

line-height:20px

<p>标签行高:10px

颜色:#333；

通过添加 .lead 类可以让段落突出显示：

<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p class="text-left">Bootstrap 框架</p>
<p class="text-justify">Bootstrap 框架</p>

注：
text-left：向左对齐
text-right：向右对齐
text-center：居中对齐
text-justify：两端对齐

我们还可以通过以下类来设置英文文本大小写，实例如下：

<p class="text-lowercase">小写hello WORLD</p>
<p class="text-uppercase">大写hello WORLD</p>
<p class="text-capitalize">首字母大写hello WORLD</p>

页面排版 - 缩略语

缩略语：当我们把鼠标悬停在缩略语上可看到完整的内容。

这里是一个缩略语的例子：

<abbr title="World Wide Web">WWW</abbr>

鼠标放到 www 上面时会变成带有“问号”的指针，并会显示 title 中的内容。

页面排版 - 引用文本

引用文本
我们将任何HTML元素包裹在

blockquote>中即可表现为引用样式。

以

标签为例，将文本设置为引用的代码如下：

<blockquote>
    <p>Bootstrap 框架 - W3Cschool </p>
</blockquote>

添加.blockquote-reverse 类可以让引用内容呈现右对齐。

代码：

<blockquote class="blockquote-reverse">
    <p>Bootstrap 框架 - W3Cschool </p>
</blockquote>

下面来看一份我的学习笔记:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- Bootstrap核心CSS文件 -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery文件，务必在bootstrap.min.js之前引入 -->
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <!-- Bootstrap核心JavaScript文件 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title></title>
    </head>
    <body>
        <span class="h1">MyBlog<small>时间是自称能治百病的庸医</small></span>
        <!-- <span class="h1">Bootstrap</span> -->
        <p>Bootstrap 框架</p>
        <p class="lead">lead段落突出</p>
        <p>Bootstrap 框架</p>
        <p class="text-left"><mark>左对齐 + mark标记</mark></p>
        <p class="text-right">右对齐</p>
        <p class="text-center"><s><strong>居中+s删除线+strong加粗</strong></s></p>
        <p class="text-right"><em>右对齐+em倾斜</em></p>
        <p class="text-uppercase">english-text-uppercase转换为大写</p>
        <p class="text-lowercase">English-text-lowercase转换为小写</p>
        <p class="text-lowercase">English-text-lowercase转换为小写</p>
        <abbr title="我测试一下abbr标签">测试标签</abbr>
        <blockquote class="blockquote">
            这是一个blockquote块引用标签,默认为左对齐-在blockquote标签内加上class属性为blockquote-reverse可以实现右对齐
        </blockquote>
        <ul class="list-inline">
            <li>Coffee</li>
            <li>- black hot drink</li>
        </ul>
        <dl class="dl-horizontal">
            <dt>Coffee</dt>
            <dd>- black hot drink</dd>
            <dd>- dl-horizontal经测试不会显示为一行</dd>
            <br>
        <ul>
            <li>Coffee</li>
            <li>- black hot drink</li>
            <li>- 这里是正常的li标签显示</li>
        </ul>

        <ul class="list-unstyled">
            <li>Coffee</li>
            <li>- black hot drink</li>
            <li>- 这里的ul在class添加了unstyled属性,就不再显示换行的缩进与圆点了</li>
        </ul>
        <code><section></code>
        <pre><p>Please input...</p></pre>
        <blockquote>
            <span>请确保使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 转义字符： <b><</b>和<b>></b> </span>
        </blockquote>

    </body>
</html>

他们的显示是这样的(如果看不见了也没关系,我使用了外链图片)

表格

        表格是 Bootstrap 的一个基础组件之一，

在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。

下表列出了 Bootstrap 为表格不同的样式风格提供的一些类：

类名描述
.table
基本的表格
.table-striped
条纹状表格
.table-bordered
带边框的表格
.table-hover
当指针悬停在行上时会实现背景效果的表格
.table-condensed
紧凑型表格
.table-responsive
响应式表格

条纹状表格其效果与基础表格相比，仅是在 tbody 隔行有一个浅灰色的背景色。

表格效果需要基于基本格式 .table

紧凑型表格与基础表格差别不大，只是将单元格的内距由 8px 调至 5px 。

表格效果需要基于基本格式 .table

将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格。

其会在小屏幕设备上（小于768px）水平滚动，当屏幕大于 768px 宽度时，水平滚动条消失。

<table class="table  table-bordered">

            <thead>

            <tr>

                <th>产品</th>

                <th>付款日期</th>

                <th>状态</th>

            </tr>

            </thead>

            <tbody>

            <tr>

                <td>产品1</td>

                <td>23/05/2019</td>

                <td>待发货</td>

            </tr>

            <tr>

                <td>产品2</td>

                <td>13/05/2019</td>

                <td>发货中</td>

            </tr>

            </tbody>

        </table>

状态类

Bootstrap 为表格的行元素提供了五种不同的类，每种类控制了行的不同背景颜色。

具体如下所示：

设置一行的背景样式，只需要在元素中添加上对应的类名:

<tr class="success">

按钮

多标签支持

Bootstrap 框架中的另一核心部分——按钮。

任何带有 .btn 类的元素都会继承圆角灰色按钮的默认外观。
可作为按钮使用的标签或元素

你可以在 a、button 或 input元素上添加类名 btn（如果不添加是不会有任何按钮效果）。

如下：

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

注意事项有三点：

虽然按钮类可以应用到其他标签元素上，但是导航和导航条组件只支持 button 元素。
如果 a 元素被作为按钮使用，并用于在当前页面触发某些功能而不是用于链接页面，那么请为其设置 role="button" 属性。
建议在 button 元素上使用按钮类，避免跨浏览器的不一致性问题。

预定义样式：

在基础按钮风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。

以信息样式的按钮为例，代码如下：

<button class="btn btn-info">Button</button>
其他样式说明：
btn-default 默认样式        btn-success 成功样式     
btn-warning 警告样式      btn-danger 危险样式
btn-primary 首选项样式   btn-link 链接样式

尺寸大小
下面是尺寸从大到小的按钮：

<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度。

代码：

<button class="btn btn-block">Button</button>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度。

代码：

<button class="btn btn-block">Button</button>

激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

代码：

<button class="btn active">Button</button>

禁用状态
在 Bootstrap 框架中，要禁用按钮有两种实现方式：

在标签中添加disabled属性
在元素标签中添加类名 disabled
通过 disabled 属性禁用按钮：

<button class="btn" disabled="disabled">button</button>

通过添加类 disabled 禁用按钮:

<button class="btn disabled">button</button>

运行结果：

最后修改：2022 年 12 月 05 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Bootstrap第一小节

E_Page • 2021 年 10 月 23 日

<h2>下载 Bootstrap</h2>Bootstrap 安装是非常容易的，你可以从 <a class="wp-editor-md-post-content-link" href="https://www.bootcss.com/" title="Bootstrap官网">Bootstrap官网</a> 上下载 Bootstrap 的最新版本。 
为了更方便的使用，你可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。 
已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。<h2>Bootstrap CDN 推荐</h2>您也可以选择不下载Bootstrap，直接使用 Bootstrap CDN库，国内推荐使用 BootCDN 上的库。具体使用如下：<pre data-language=HTML><code class="language-markup line-numbers">&lt;!-- Bootstrap核心CSS文件 --&gt;
&lt;link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;!-- jQuery文件，务必在bootstrap.min.js之前引入 --&gt;
&lt;script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;!-- Bootstrap核心JavaScript文件 --&gt;
&lt;script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>此外，您还可以使用以下的 CDN 服务：国内推荐使用 : https://www.staticfile.org/ 
国际推荐使用：https://cdnjs.com/<h1>Bootstrap CSS 概览</h1>在本节中，我们主要概述一下 Bootstrap 的一些CSS特性。HTML 5 文档类型（Doctype） 
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要声明 HTML5 文档类型（Doctype）。因此，请在使用 Bootstrap 项目中包含下面的代码段。<pre data-language=HTML><code class="language-markup line-numbers">&lt;!DOCTYPE html&gt;
&lt;html&gt;
 ....
&lt;/html&gt;
</code></pre>提示：使用 Bootstrap 创建网页时，如果不在开头声明 HTML5 的文档类型，则会出现一些不可预测的浏览器显示问题。移动设备优先 
Bootstrap 3 新增了移动设备优先的特性。为了让 Bootstrap 3 开发的网页更好的兼容移动设备，确保绘制和触屏的正常使用，需要在网页的 head 中添加 viewport meta 标签。<pre data-language=HTML><code class="language-markup line-numbers">&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"&gt;
</code></pre><h2>页面排版 - 标题</h2>标题 
Bootstrap 对 HTML 标题 (h1 ~ h6) 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class= (.h1 ~ .h6) 来实现相同的功能。内联元素使用标题字体：<pre data-language=HTML><code class="language-markup line-numbers">&lt;span class="h1"&gt;Bootstrap&lt;/span&gt;
</code></pre>注：使用 Bootstrap 后，网页的字体颜色、字体样式、行高均被固定了，保证其统一。不使用 Bootstrap 时，字体样式会根据系统内置的首选字体决定。在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题,如下所示:<pre data-language=HTML><code class="language-markup line-numbers">&lt;h1&gt;Bootstrap 框架 &lt;small&gt;Bootstrap 小标题&lt;/small&gt;&lt;/h1&gt;
</code></pre>下表列出了一些内联文本元素： 
<img src="https://image.5yang.cc/uploads//uoloads2021/10/一些内联文本元素.png" alt="" style=""><h2>页面排版 - 页面主体</h2>页面主体 
Bootstrap 将页面主体设置默认为：<pre><code class="language-css line-numbers">font-size:14px；

line-height:20px

&lt;p&gt;标签行高:10px
</code></pre>颜色:#333；通过添加 .lead 类可以让段落突出显示：<pre data-language=HTML><code class="language-markup line-numbers">&lt;p&gt;Bootstrap 框架&lt;/p&gt;
&lt;p class="lead"&gt;Bootstrap 框架&lt;/p&gt;
&lt;p&gt;Bootstrap 框架&lt;/p&gt;
&lt;p class="text-left"&gt;Bootstrap 框架&lt;/p&gt;
&lt;p class="text-justify"&gt;Bootstrap 框架&lt;/p&gt;
</code></pre>注： 
text-left：向左对齐 
text-right：向右对齐 
text-center：居中对齐 
text-justify：两端对齐我们还可以通过以下类来设置英文文本大小写，实例如下：<pre data-language=HTML><code class="language-markup line-numbers">&lt;p class="text-lowercase"&gt;小写hello WORLD&lt;/p&gt;
&lt;p class="text-uppercase"&gt;大写hello WORLD&lt;/p&gt;
&lt;p class="text-capitalize"&gt;首字母大写hello WORLD&lt;/p&gt;
</code></pre><h2>页面排版 - 缩略语</h2>缩略语：当我们把鼠标悬停在缩略语上可看到完整的内容。这里是一个缩略语的例子：<pre data-language=HTML><code class="language-markup line-numbers">&lt;abbr title="World Wide Web"&gt;WWW&lt;/abbr&gt;
</code></pre><img src="https://image.5yang.cc/uploads//uoloads2021/10/运行结果.png" alt="" style=""> 
鼠标放到 www 上面时会变成带有“问号”的指针，并会显示 title 中的内容。<h2>页面排版 - 引用文本</h2>引用文本 
我们将任何HTML元素包裹在&lt;blockquote>中即可表现为引用样式。以标签为例，将文本设置为引用的代码如下：<pre data-language=HTML><code class="language-markup line-numbers">&lt;blockquote&gt;
 &lt;p&gt;Bootstrap 框架 - W3Cschool &lt;/p&gt;
&lt;/blockquote&gt;
</code></pre>添加.blockquote-reverse 类可以让引用内容呈现右对齐。代码：<pre data-language=HTML><code class="language-markup line-numbers">&lt;blockquote class="blockquote-reverse"&gt;
 &lt;p&gt;Bootstrap 框架 - W3Cschool &lt;/p&gt;
&lt;/blockquote&gt;
</code></pre><hr />下面来看一份我的学习笔记:<pre data-language=HTML><code class="language-markup line-numbers">&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;!-- Bootstrap核心CSS文件 --&gt;
 &lt;link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
 &lt;!-- jQuery文件，务必在bootstrap.min.js之前引入 --&gt;
 &lt;script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
 &lt;!-- Bootstrap核心JavaScript文件 --&gt;
 &lt;script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
 &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;span class="h1"&gt;MyBlog&lt;small&gt;时间是自称能治百病的庸医&lt;/small&gt;&lt;/span&gt;
 &lt;!-- &lt;span class="h1"&gt;Bootstrap&lt;/span&gt; --&gt;
 &lt;p&gt;Bootstrap 框架&lt;/p&gt;
 &lt;p class="lead"&gt;lead段落突出&lt;/p&gt;
 &lt;p&gt;Bootstrap 框架&lt;/p&gt;
 &lt;p class="text-left"&gt;&lt;mark&gt;左对齐 + mark标记&lt;/mark&gt;&lt;/p&gt;
 &lt;p class="text-right"&gt;右对齐&lt;/p&gt;
 &lt;p class="text-center"&gt;&lt;s&gt;&lt;strong&gt;居中+s删除线+strong加粗&lt;/strong&gt;&lt;/s&gt;&lt;/p&gt;
 &lt;p class="text-right"&gt;&lt;em&gt;右对齐+em倾斜&lt;/em&gt;&lt;/p&gt;
 &lt;p class="text-uppercase"&gt;english-text-uppercase转换为大写&lt;/p&gt;
 &lt;p class="text-lowercase"&gt;English-text-lowercase转换为小写&lt;/p&gt;
 &lt;p class="text-lowercase"&gt;English-text-lowercase转换为小写&lt;/p&gt;
 &lt;abbr title="我测试一下abbr标签"&gt;测试标签&lt;/abbr&gt;
 &lt;blockquote class="blockquote"&gt;
 这是一个blockquote块引用标签,默认为左对齐-在blockquote标签内加上class属性为blockquote-reverse可以实现右对齐
 &lt;/blockquote&gt;
 &lt;ul class="list-inline"&gt;
 &lt;li&gt;Coffee&lt;/li&gt;
 &lt;li&gt;- black hot drink&lt;/li&gt;
 &lt;/ul&gt;
 &lt;dl class="dl-horizontal"&gt;
 &lt;dt&gt;Coffee&lt;/dt&gt;
 &lt;dd&gt;- black hot drink&lt;/dd&gt;
 &lt;dd&gt;- dl-horizontal经测试不会显示为一行&lt;/dd&gt;
 &lt;br&gt;
 &lt;ul&gt;
 &lt;li&gt;Coffee&lt;/li&gt;
 &lt;li&gt;- black hot drink&lt;/li&gt;
 &lt;li&gt;- 这里是正常的li标签显示&lt;/li&gt;
 &lt;/ul&gt;

&lt;ul class="list-unstyled"&gt;
            &lt;li&gt;Coffee&lt;/li&gt;
            &lt;li&gt;- black hot drink&lt;/li&gt;
            &lt;li&gt;- 这里的ul在class添加了unstyled属性,就不再显示换行的缩进与圆点了&lt;/li&gt;
        &lt;/ul&gt;
        &lt;code&gt;&lt;section&gt;&lt;/code&gt;
        &lt;pre&gt;&lt;p&gt;Please input...&lt;/p&gt;&lt;/pre&gt;
        &lt;blockquote&gt;
            &lt;span&gt;请确保使用 &lt;pre&gt; 和 &lt;code&gt; 标签时，开始和结束标签使用了 unicode 转义字符： &lt;b&gt;&lt;&lt;/b&gt;和&lt;b&gt;&gt;&lt;/b&gt; &lt;/span&gt;
        &lt;/blockquote&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>他们的显示是这样的(如果看不见了也没关系,我使用了外链图片) 
<img src="https://i.loli.net/2021/10/23/x9CWzchdPTi2oaf.jpg" alt="" style=""><h1>表格</h1><pre><code> 表格是 Bootstrap 的一个基础组件之一， 
</code></pre>在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。下表列出了 Bootstrap 为表格不同的样式风格提供的一些类：类名 描述 
.table 
基本的表格 
.table-striped 
条纹状表格 
.table-bordered 
带边框的表格 
.table-hover 
当指针悬停在行上时会实现背景效果的表格 
.table-condensed 
紧凑型表格 
.table-responsive 
响应式表格条纹状表格其效果与基础表格相比，仅是在 tbody 隔行有一个浅灰色的背景色。表格效果需要基于基本格式 .table紧凑型表格与基础表格差别不大，只是将单元格的内距由 8px 调至 5px 。表格效果需要基于基本格式 .table将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格。其会在小屏幕设备上（小于768px）水平滚动，当屏幕大于 768px 宽度时，水平滚动条消失。<pre data-language=HTML><code class="language-markup line-numbers">&lt;table class="table table-bordered"&gt;

&lt;thead&gt;

&lt;tr&gt;

&lt;th&gt;产品&lt;/th&gt;

&lt;th&gt;付款日期&lt;/th&gt;

&lt;th&gt;状态&lt;/th&gt;

&lt;/tr&gt;

&lt;/thead&gt;

&lt;tbody&gt;

&lt;tr&gt;

&lt;td&gt;产品1&lt;/td&gt;

&lt;td&gt;23/05/2019&lt;/td&gt;

&lt;td&gt;待发货&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td&gt;产品2&lt;/td&gt;

&lt;td&gt;13/05/2019&lt;/td&gt;

&lt;td&gt;发货中&lt;/td&gt;

&lt;/tr&gt;

&lt;/tbody&gt;

&lt;/table&gt;
</code></pre><h2>状态类</h2>Bootstrap 为表格的行元素 <tr> 提供了五种不同的类，每种类控制了行的不同背景颜色。具体如下所示： 
<img src="https://image.5yang.cc/uploads//uoloads2021/10/Bootstrap表格的行元素.png" alt="" style=""> 
设置一行的背景样式，只需要在<tr>元素中添加上对应的类名:<pre data-language=HTML><code class="language-markup line-numbers">&lt;tr class="success"&gt;
</code></pre><h1>按钮</h1><h2>多标签支持</h2>Bootstrap 框架中的另一核心部分——按钮。任何带有 .btn 类的元素都会继承圆角灰色按钮的默认外观。 
可作为按钮使用的标签或元素你可以在 a、button 或 input元素上添加类名 btn（如果不添加是不会有任何按钮效果）。如下：<pre data-language=HTML><code class="language-markup line-numbers">&lt;a href="###" class="btn btn-default"&gt;Link&lt;/a&gt;
&lt;button class="btn btn-default"&gt;Button&lt;/button&gt;
&lt;input type="button" class="btn btn-default" value="input"&gt;
</code></pre>注意事项有三点：虽然按钮类可以应用到其他标签元素上，但是导航和导航条组件只支持 button 元素。 
如果 a 元素被作为按钮使用，并用于在当前页面触发某些功能 而不是用于链接页面，那么请为其设置 role="button" 属性。 
建议在 button 元素上使用按钮类，避免跨浏览器的不一致性问题。<hr /><h2>预定义样式：</h2>在基础按钮风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。以信息样式的按钮为例，代码如下：<pre data-language=HTML><code class="language-markup line-numbers">&lt;button class="btn btn-info"&gt;Button&lt;/button&gt;
其他样式说明：
btn-default 默认样式 btn-success 成功样式 
btn-warning 警告样式 btn-danger 危险样式
btn-primary 首选项样式 btn-link 链接样式
</code></pre><hr />尺寸大小 
下面是尺寸从大到小的按钮：<pre data-language=HTML><code class="language-markup line-numbers">&lt;button class="btn btn-lg"&gt;Button&lt;/button&gt;
&lt;button class="btn"&gt;Button&lt;/button&gt;
&lt;button class="btn btn-sm"&gt;Button&lt;/button&gt;
&lt;button class="btn btn-xs"&gt;Button&lt;/button&gt;
</code></pre>通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度。代码：<pre data-language=HTML><code class="language-markup line-numbers">&lt;button class="btn btn-block"&gt;Button&lt;/button&gt;
</code></pre>通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度。代码：<pre data-language=HTML><code class="language-markup line-numbers">&lt;button class="btn btn-block"&gt;Button&lt;/button&gt;
</code></pre><hr /><h2>激活状态</h2>按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。代码：<pre data-language=HTML><code class="language-markup line-numbers">&lt;button class="btn active"&gt;Button&lt;/button&gt;
</code></pre>禁用状态 
在 Bootstrap 框架中，要禁用按钮有两种实现方式：在标签中添加disabled属性 
在元素标签中添加类名 disabled 
通过 disabled 属性禁用按钮：<pre data-language=HTML><code class="language-markup line-numbers">&lt;button class="btn" disabled="disabled"&gt;button&lt;/button&gt;
</code></pre>通过添加类 disabled 禁用按钮:<pre data-language=HTML><code class="language-markup line-numbers">&lt;button class="btn disabled"&gt;button&lt;/button&gt;
</code></pre>运行结果：

下载 Bootstrap

Bootstrap CDN 推荐

Bootstrap CSS 概览

页面排版 - 标题

页面排版 - 页面主体

页面排版 - 缩略语

页面排版 - 引用文本

表格

状态类

按钮

多标签支持

预定义样式：

激活状态

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Bootstrap第一小节

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款