每天学点bootstrap(一)

深碍√TFBOYSˉ_ 2022-07-17 02:46 173阅读 0赞

# 什么是 Bootstrap？ #

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

## 优点： ##

友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。

# Bootstrap CSS #

Bootstrap CSS主要是对CSS的一下兼容和CSS的一些模板做了很多封装。使用Bootstrap我们不必自己去编写CSS样式和排版布局， Bootstrap使得开发变得更好、更快、更强壮

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。

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

使用DOCTYPE html使得我们的浏览器可以兼容HTML5,如果不使用这个标签的话 能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。

如果想让你的浏览器兼容移动设备和IE的话可以使用下面的方式

# 基本的全局显示 #

Bootstrap 3 使用 body \{margin: 0;\} 来移除 body 的边距。

请看下面有关 body 的设置：

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; }

第一条规则设置 body 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif。

第二条规则设置文本的默认字体大小为 14 像素。

第三条规则设置默认的行高度为 1.428571429。

第四条规则设置默认的文本颜色为 \#333333。

最后一条规则设置默认的背景颜色为白色

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

# 链接样式 #

通过属性 @link-color 设置全局链接的颜色。

对于链接的默认样式，如下设置：

a:hover, a:focus { color: #2a6496; text-decoration: underline; } a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }

所以，当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为 \#2a6496。同时，会呈现一条下划线。

除此之外，点击过的链接，会呈现一个颜色码为 \#333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽，且对于基于 webkit 浏览器有一个 \-webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素。

以上所有这些样式都可以在 scaffolding.less 中找到。

# Bootstrap 网格系统 #

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。  
网格系统简单的来说就是把我们的HTML页面分成了12格，随着页面的大小而进行合并和拆分，最小的话会合成一格，最多就是12格。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

举个简单的例子， 例如，要创建三个相等的列，则使用三个  .col-xs-4。

## 偏移列 ##

什么叫偏移列，默认的列一般都是从左边开始的，这个时候我想偏离左边应该怎么做啦，可以使用col-md-offset-\*。class="col-md-offset-\*"。其中数值从1-11，不等。距离越大偏移左边的距离也就越大。

## 嵌套列 ##

顾名思义就是在一个列里面又嵌套了一个列。有点像把一个列，里面又添加了一个列，然后列里面还可以添加行。

这里只需要在<div class="row"> 里面在添加一个<div class="row"> 就好了。这里要注意的是class="col-md-\*"，如果是在第二个列里面，那么他会以第一个Row为屏幕， 12格最大也就是撑满，第一个列。

## 列排序 ##

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-\* 和 .col-md-pull-\* 类的内置网格列的顺序，其中 \* 范围是从 1 到 11。这里有点类似于HTML里面的距离，相对距离左边距和右边距离。col-md-push是相对于左边的，如果距离不够大，那么有可能会被左边的东西给遮住，从而显示不出来。如果距离太大，会把整个网格给撑大，从而出现滚动条。.col-md-pull则是相对于右边的，效果跟push一样。

# Bootstrap 排版 #

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。

## 标题 ##

标题跟HTML5差不多都是用的<h></h>来表示，其中数值越大，标题越小最大的也就是<h6>；

## 引导主体副本 ##

为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本

## 强调 ##

HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。然后还可以设置各种颜色。

## 缩写 ##

HTML  元素提供了用于缩写的标记， 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本

![Center][]

如果页面上要显示的某个字段过大的话，可以采用缩写的形式和JS结合在一起，形成动态的缩写。

## 列表 ##

列表的话跟HTML的元素一样，都是<ui><li>列表</li></ui>，但是它已经把列表的CSS样式都给设计好了，我们只需要引入一下就好了。比如：

有序列表

无序列表

</ui>

内联列表

当然其它的还有自定义列表，这些都是框架自带的，我们如果想使用的话，可以在它的基础上扩展。

#     #

# Bootstrap 代码 #

感觉用处不是很大，这里简单看一下，基本上用不到。

*  第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
 *  第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

# Bootstrap 表格 #

感觉Bootstrap的表格功能做的很好很完善，基本上的功能它都有了，而且界面很简洁。

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

<table style="border: 0px; margin: 4px 0px; padding: 0px; border-collapse: collapse; width: 729px; color: rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px;"> 
 <tbody style="border: 0px; margin: 0px; padding: 0px;"> 
  <tr style="border: 0px; margin: 0px; padding: 0px; background-color: rgb(246, 244, 240);"> 
   <th style="border: 1px solid rgb(85, 85, 85); margin: 0px; padding: 3px; color: rgb(255, 255, 255); vertical-align: top; background-color: rgb(85, 85, 85);">标签</th> 
   <th style="border: 1px solid rgb(85, 85, 85); margin: 0px; padding: 3px; color: rgb(255, 255, 255); vertical-align: top; background-color: rgb(85, 85, 85);">描述</th> 
  </tr> 
  <tr style="border: 0px; margin: 0px; padding: 0px;"> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">&lt;table&gt;</td> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">为表格添加基础样式。</td> 
  </tr> 
  <tr style="border: 0px; margin: 0px; padding: 0px; background-color: rgb(246, 244, 240);"> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">&lt;thead&gt;</td> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">表格标题行的容器元素（&lt;tr&gt;），用来标识表格列。</td> 
  </tr> 
  <tr style="border: 0px; margin: 0px; padding: 0px;"> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">&lt;tbody&gt;</td> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">表格主体中的表格行的容器元素（&lt;tr&gt;）。</td> 
  </tr> 
  <tr style="border: 0px; margin: 0px; padding: 0px; background-color: rgb(246, 244, 240);"> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">&lt;tr&gt;</td> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">一组出现在单行上的表格单元格的容器元素（&lt;td&gt; 或 &lt;th&gt;）。</td> 
  </tr> 
  <tr style="border: 0px; margin: 0px; padding: 0px;"> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">&lt;td&gt;</td> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">默认的表格单元格。</td> 
  </tr> 
  <tr style="border: 0px; margin: 0px; padding: 0px; background-color: rgb(246, 244, 240);"> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">&lt;th&gt;</td> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 &lt;thead&gt; 内使用。</td> 
  </tr> 
  <tr style="border: 0px; margin: 0px; padding: 0px;"> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">&lt;caption&gt;</td> 
   <td style="border: 1px solid rgb(212, 212, 212); margin: 0px; padding: 7px 5px; font-size: 1em; vertical-align: top;">关于表格存储内容的描述或总结。</td> 
  </tr> 
 </tbody> 
</table>

.table为table添加CSS样式，效果如下

![Center 1][]

.table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

![Center 2][]

.table-bordered 为所有表格的单元格添加边框

.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，悬停高亮变色。只要找到了该css，我们可以自己去调样式。

.table-condensed 让表格更加紧凑。

### <tr>, <th> 和 <td> 类 ###

下表的类可用于表格的行或者单元格：

感觉这些动作应该是要配合JS做动态效果的，比如操作某一个行成功，或者失败，或者某一行的数据不能随便操作，给出警告等等。

关于表格其实国外和国内有很多模板了，我们可以去扣里面的CSS样式。这个以后会说到的。

# Bootstrap 表单 #

## 表单布局 ##

Bootstrap 提供了下列类型的表单布局：

*  垂直表单（默认）
 *  内联表单
 *  水平表单

## 垂直表单也称为基础表单和默认表单，下面来仔细看一下。 ##

![Center 3][]

表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名\`form-control\`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

**1、宽度变成了100%**

**2、设置了一个浅灰色（\#ccc）的边框**

**3、具有4px的圆角**

**4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化**

**5、设置了placeholder的颜色为\#999**

## 水平表单： ##

虽然大部分我们都使用的是垂直表单，但是水平表单我们也会经常用到，垂直表单简单来说就是标签居上，表单控件居下，而水平控件则是标签居左，表单控件居右。

![Center 4][]

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：  
1、在<form>元素是使用类名**".form-horizontal”。**  
2、配合Bootstrap框架的网格系统。

在<form>元素上使用类名**".form-horizontal”**主要有以下几个作用：  
1、设置表单控件padding和margin值。  
2、改变“form-group”的表现形式，类似于网格系统的“row”。

## 内联表单 ##

![Center 5][]

在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在<form>元素中添加类名“.form-inline”即可。

如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中。

网上有一个拖拽型的表单生成器，不过只支持垂直的，有兴趣的可以去试试。

[点击打开链接][Link 1]

# Bootstrap 按钮 #

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观，以下样式可用于<a>, <button>, 或 <input> 元素上：

首先来看一下按钮的样式：

<table style="border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); text-align: center; margin-top: 10px; clear: both; font-size: 14px; widows: 1; line-height: 21px; font-family: 微软雅黑; margin-bottom: 10px; color: rgb(85, 85, 85);"> 
 <tbody> 
  <tr> 
   <th style="margin: 0px; padding: 5px 16px 5px 12px; text-align: left; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; width: 98px; height: 25px; word-break: break-all; background: rgb(243, 243, 243);"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">类</span></th> 
   <th style="margin: 0px; padding: 5px 16px 5px 12px; text-align: left; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; width: 436px; height: 25px; word-break: break-all; background: rgb(243, 243, 243);"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">描述</span></th> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">为按钮添加基本样式</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 27px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-default</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 27px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">默认/标准按钮</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 30px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-primary</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 30px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">原始按钮样式（未被操作）</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-success</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">表示成功的动作</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-info</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">该样式可用于要弹出信息的按钮</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-warning</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">表示需要谨慎操作的按钮</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-danger</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">表示一个危险动作的按钮操作</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-link</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">让按钮看起来像个链接 (仍然保留按钮行为)</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-lg</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">制作一个大按钮</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-sm</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">制作一个小按钮</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-xs</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">制作一个超小按钮</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.btn-block</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">块级按钮(拉伸至父元素100%的宽度)</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 24px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.active</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 24px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">按钮被点击</span></td> 
  </tr> 
  <tr> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">.disabled</span></td> 
   <td style="margin: 0px; padding: 5px 16px 5px 12px; border: 1px solid rgb(153, 153, 153); min-width: 25px; min-height: 25px; height: 25px; word-break: break-all;"><span style="line-height: 25.2px; font-size: 14px; font-family: &quot;Comic Sans MS&quot;;">禁用按钮<br><br></span></td> 
  </tr> 
 </tbody> 
</table>

<html lang="en"> 
    <head> 
      <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
      <meta name="Keywords" content="关键词一，关键词二"> 
      <meta name="Description" content="网站描述内容"> 
      <meta name="Author" content="Yvette Lau"> 
      <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> 
      <title>BootstrapDemo</title> 
       
      <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
    </head> 
      <body style="padding: 20px;"> 
         
        <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> 
      </body> 
    </html>

![Center 6][]

## 按钮大小 ##

下表列出了获得各种大小按钮的 class：

![Center 7][]

**按钮状态**

按钮分为active和disabled两种状态、  
激活状态：按钮呈现出被按压的外观，即背景颜色变深、深色边框和阴影。  
禁用状态：按钮颜色会变淡 50%，并失去渐变

<body style="padding: 20px;width:500px;"> 
       
      <button type="button" class="btn btn-default">默认按钮</button> 
      <button type="button" class="btn btn-default active">激活的默认按钮</button> 
      <br/><br/> 
       
      <button type="button" class="btn btn-primary">原始按钮</button> 
      <button type="button" class="btn btn-primary active">激活的原始按钮</button> 
      <br/><br/> 
       
      <button type="button" class="btn btn-success">成功按钮</button> 
      <button type="button" class="btn btn-success active">激活的成功按钮</button> 
      <br/><br/> 
       
      <button type="button" class="btn btn-info">信息按钮</button> 
      <button type="button" class="btn btn-info active">激活的信息按钮</button> 
      <br/><br/> 
      
      <button type="button" class="btn btn-default">默认按钮</button> 
      <button type="button" class="btn btn-default disabled">禁用的默认按钮</button> 
      <br/><br/> 
       
      <button type="button" class="btn btn-primary">原始按钮</button> 
      <button type="button" class="btn btn-primary disabled">禁用的原始按钮</button> 
      <br/><br/> 
       
      <button type="button" class="btn btn-success">成功按钮</button> 
      <button type="button" class="btn btn-success disabled">禁用的成功按钮</button> 
      <br/><br/> 
       
      <button type="button" class="btn btn-info">信息按钮</button> 
      <button type="button" class="btn btn-info disabled">禁用的信息按钮</button> 
    </body>

![Center 8][]

[Center]: /images/20220717/abcf2a09f4c846b49c728c454d08e8eb.png
[Center 1]: /images/20220717/2eae40cf856749bf83dea5c8d9f0cade.png
[Center 2]: /images/20220717/bd55339c2f8848988620e12ded73a1e6.png
[Center 3]: /images/20220717/deb535b0468b456c9ceb594a8a595898.png
[Center 4]: /images/20220717/2803ac536d7c4307bc62d715a89ac27f.png
[Center 5]: /images/20220717/6f11712787fe41ae9118030221ea4fce.png
[Link 1]: http://www.bootcss.com/p/bootstrap-form-builder/
[Center 6]: /images/20220717/0f695f7e825147f585116a7a972143b4.png
[Center 7]: /images/20220717/6e7ff3633d86485299116c7b35f984e3.png
[Center 8]: /images/20220717/554c1d95b37b44f8a9b48d9b752f3b08.png