本文详细介绍了Bootstrap框架的功能特性，包括响应式网格系统、排版、表格、表单布局及按钮样式等，帮助读者快速掌握Bootstrap的基本使用。
什么是 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>如果想让你的浏览器兼容移动设备和IE的话可以使用下面的方式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IE 运行最新的渲染模式
<meta name="viewport" content="width=device-width,initial-scale=1">
初始化移动浏览显示 content="width=device-width宽度等于设备宽度
基本的全局显示
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列。
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
偏移列
什么叫偏移列，默认的列一般都是从左边开始的，这个时候我想偏离左边应该怎么做啦，可以使用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> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本
<abbr title="World Wide Web">WWW</abbr><br> 
如果页面上要显示的某个字段过大的话，可以采用缩写的形式和JS结合在一起，形成动态的缩写。
列表
列表的话跟HTML的元素一样，都是<ui><li>列表</li></ui>，但是它已经把列表的CSS样式都给设计好了，我们只需要引入一下就好了。比如：有序列表
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol> <ul>
<li>Item 1</li>
</ui>
内联列表
<ul class="list-inline">
当然其它的还有自定义列表，这些都是框架自带的，我们如果想使用的话，可以在它的基础上扩展。
Bootstrap 代码
- 第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
- 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。
Bootstrap 表格
感觉Bootstrap的表格功能做的很好很完善，基本上的功能它都有了，而且界面很简洁。
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 标签 | 描述 |
|---|---|
| <table> | 为表格添加基础样式。 |
| <thead> | 表格标题行的容器元素（<tr>），用来标识表格列。 |
| <tbody> | 表格主体中的表格行的容器元素（<tr>）。 |
| <tr> | 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。 |
| <td> | 默认的表格单元格。 |
| <th> | 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。 |
| <caption> | 关于表格存储内容的描述或总结。 |
.table为table添加CSS样式，效果如下
.table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，悬停高亮变色。只要找到了该css，我们可以自己去调样式。
.table-condensed 让表格更加紧凑。
<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格：
| 类 | 描述 |
|---|
| .active | 将悬停的颜色应用在行或者单元格上 |
| .success | 表示成功的操作 |
| .info | 表示信息变化的操作 |
| .warning | 表示一个警告的操作 |
| .danger | 表示一个危险的操作 |
关于表格其实国外和国内有很多模板了，我们可以去扣里面的CSS样式。这个以后会说到的。
Bootstrap 表单
表单布局
Bootstrap 提供了下列类型的表单布局：
- 垂直表单（默认）
- 内联表单
- 水平表单
垂直表单也称为基础表单和默认表单，下面来仔细看一下。
<form >
<div class="form-group">
<label>邮箱：</label>
<input type="email" class="form-control" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label >密码</label>
<input type="password" class="form-control" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
水平表单：
虽然大部分我们都使用的是垂直表单，但是水平表单我们也会经常用到，垂直表单简单来说就是标签居上，表单控件居下，而水平控件则是标签居左，表单控件居右。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
</div>
</div>
</form>
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在<form>元素是使用类名".form-horizontal”。
2、配合Bootstrap框架的网格系统。
在<form>元素上使用类名".form-horizontal”主要有以下几个作用：
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式，类似于网格系统的“row”。
内联表单
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">密码</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在<form>元素中添加类名“.form-inline”即可。
如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中。
网上有一个拖拽型的表单生成器，不过只支持垂直的，有兴趣的可以去试试。
Bootstrap 按钮
| 类 | 描述 |
|---|---|
| .btn | 为按钮添加基本样式 |
| .btn-default | 默认/标准按钮 |
| .btn-primary | 原始按钮样式（未被操作） |
| .btn-success | 表示成功的动作 |
| .btn-info | 该样式可用于要弹出信息的按钮 |
| .btn-warning | 表示需要谨慎操作的按钮 |
| .btn-danger | 表示一个危险动作的按钮操作 |
| .btn-link | 让按钮看起来像个链接 (仍然保留按钮行为) |
| .btn-lg | 制作一个大按钮 |
| .btn-sm | 制作一个小按钮 |
| .btn-xs | 制作一个超小按钮 |
| .btn-block | 块级按钮(拉伸至父元素100%的宽度) |
| .active | 按钮被点击 |
| .disabled | 禁用按钮 |
<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>
<!--css js 文件的引入-->
<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>
按钮大小
下表列出了获得各种大小按钮的 class：
| Class | 描述 |
|---|---|
| .btn-lg | 这会让按钮看起来比较大。 |
| .btn-sm | 这会让按钮看起来比较小。 |
| .btn-xs | 这会让按钮看起来特别小。 |
| .btn-block | 这会创建块级的按钮，会横跨父元素的全部宽度。 |
按钮状态
按钮分为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>
扫一扫
1594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
