Bootstrop的起步使用方法php
Bootstrap 中文网 为 Bootstrap 专门构建了本身的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库css
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（通常不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 以前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
还能够经过 Bower 安装并管理 Bootstrap 的 Less、CSS、JavaScript 和字体文件。html
$ bower install bootstrap
你还能够利用 npm 工具来安装 Bootstrap：前端
$ npm install bootstrap
require('bootstrap') 代码的做用是加载 Bootstrap 的全部 jQuery 插件。其中，bootstrap 模块自身并不导出任何内容。你能够经过加载安装包顶级目录下的 /js/*.js 文件的方式手动加载单个的 Bootstrap 插件。html5
Bootstrap 的 package.json 文件包含了一些额外的元数据：node
less - Bootstrap 源码的入口 Less 文件的路径style - Bootstrap 的未压缩 CSS 文件的路径经过 Composer （中文官网：Composer 中文网）也能够安装 Bootstrap 安装包，其中包括 Less、CSS、JavaScript 和 fonts 文件：jquery
$ composer require twbs/bootstrap
Bootstrap 利用 Autoprefixer 自动为 某些 CSS 属性添加针对特定厂商的前缀。若是你是从 Less/Sass 源码编译 Bootstrap 的，而且没有使用 Bootstrap 自带的 Gruntfile 文件，那你就必须将 Autoprefixer 集成到你的编译工具和编译过程当中。若是你使用的是咱们预先编译好的 Bootstrap 文件或者使用的是咱们提供的 Gruntfile 文件，那就无需操心了，咱们已经将这些工做替你搞定了。ios
Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内能够看到如下目录和文件，这些文件按照类别放到了不一样的目录内，而且提供了压缩与未压缩两种版本。git
请注意，Bootstrap 的全部 JavaScript 插件都依赖 jQuery，所以 jQuery 必须在 Bootstrap 以前引入，就像在基本模版中所展现的同样。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。github
下载压缩包以后，将其解压缩到任意目录便可看到如下（压缩版的）目录结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
上面展现的就是 Bootstrap 的基本文件结构：预编译文件能够直接使用到任何 web 项目中。咱们提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有通过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，能够在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。
Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，而且还有 LESS、JavaScript 和文档的源码。具体来讲，主要文件组织结构以下：
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的全部文件。docs/ 包含了全部文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其余文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。
Bootstrap 使用 Grunt 做为编译系统，而且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。
安装 Grunt 前，你须要首先下载并安装 node.js （npm 已经包含在内）。npm 是 node packaged modules 的简称，它的做用是基于 node.js 管理扩展包之间的依赖关系。
而后在命令行中输入如下命令：grunt-cli ：npm install -g grunt-cli 。/bootstrap/ 根目录，而后执行 npm install 命令。npm 将读取 package.json 文件并自动安装此文件中列出的全部被依赖的扩展包。上述步骤完成后，你就能够运行 Bootstrap 所提供的各个 Grunt 命令了。
grunt dist （仅编译 CSS 和 JavaScript 文件）从新生成 /dist/ 目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。做为一名 Bootstrap 用户，大部分状况下你只须要执行这一个命令。
grunt watch （监测文件的改变，并运行指定的 Grunt 任务）监测 Less 源码文件的改变，并自动从新将其编译为 CSS 文件。
grunt test （运行测试用例）在 PhantomJS 环境中运行 JSHint 和 QUnit 自动化测试用例。
grunt docs （编译并测试文档中的资源文件）编译并测试 CSS、JavaScript 和其余资源文件。在本地环境下经过 jekyll serve 运行 Bootstrap 文档时须要用到这些资源文件。
grunt （从新构建全部内容并运行测试用例）编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档作 HTML5 校验、从新生成定制工具所需的资源文件等，都须要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。
若是你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的 /node_modules/ 目录，而后，再次运行 npm install 命令。
使用如下给出的这份超级简单的 HTML 模版，或者修改这些实例。咱们强烈建议你对这些实例按照本身的需求进行修改，而不要简单的复制、粘贴。
拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>深刻了解 Bootstrap 底层结构的关键部分，包括咱们让 web 开发变得更好、更快、更强壮的最佳实践。
Bootstrap 使用到的某些 HTML 元素和 CSS 属性须要将页面设置为 HTML5 文档类型。在你项目中的每一个页面都要参照下面的格式进行设置。
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
在 Bootstrap 2 中，咱们对框架中的某些关键部分增长了对移动设备友好的样式。而在 Bootstrap 3 中，咱们重写了整个框架，使其一开始就是对移动设备友好的。此次不是简单的增长一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每一个角落，而不是增长一个额外的文件。
为了确保适当的绘制和触屏缩放，须要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，经过为视口（viewport）设置 meta 属性为 user-scalable=no 能够禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感受。注意，这种方式咱们并不推荐全部网站使用，仍是要看你本身的状况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap 排版、连接样式设置了基本的全局样式。分别是：
body 元素设置 background-color: #fff;@font-family-base、@font-size-base 和 @line-height-base a变量做为排版的基本参数@link-color ，而且当连接处于 :hover 状态时才添加下划线这些样式都能在 scaffolding.less 文件中找到对应的源码。
为了加强跨浏览器表现的一致性，咱们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类。注意，因为 padding 等属性的缘由，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。
<div class="container-fluid"> ... </div>
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。它包含了易于使用的预约义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。下面就介绍一下 Bootstrap 栅格系统的工做原理：
.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。.row 和 .col-xs-4 这种预约义的类，能够用来快速建立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来建立语义化的布局。padding 属性，从而建立列与列之间的间隔（gutter）。经过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。.col-xs-4 来建立。.col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 而且针对小屏幕设备覆盖栅格类。 所以，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。经过研究后面的实例，能够将这些原理应用到你的代码中。
在栅格系统中，咱们在 Less 文件中使用如下媒体查询（media query）来建立关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，由于这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */ /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... }
咱们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小以内。
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }
经过下表能够详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工做的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 老是水平排列 | 开始是堆叠在一块儿的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
使用单一的一组 .col-md-* 栅格类，就能够建立一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一块儿的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。全部“列（column）必须放在 ” .row 内。
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
将最外面的布局元素 .container 修改成 .container-fluid，就能够将固定宽度的栅格布局转换为 100% 宽度的布局。
<div class="container-fluid"> <div class="row"> ... </div> </div>
是否不但愿在小屏幕设备上全部列都堆叠在一块儿？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工做的。
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
在上面案例的基础上，经过使用针对平板设备的 .col-sm-* 类，咱们来建立更加动态和强大的布局吧。
<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
若是在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将做为一个总体单元被另起一行排列。
<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>
即使有上面给出的四组栅格class，你也难免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的状况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
除了列在分界点清除响应， 您可能须要 重置偏移, 后推或前拉某个列。请看此栅格实例。
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>
使用 .col-md-offset-* 类能够将列向右侧偏移。这些类实际是经过使用 * 选择器为当前元素增长了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
为了使用内置的栅格系统将内容再次嵌套，能够经过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
经过使用 .col-md-push-* 和 .col-md-pull-* 类就能够很容易的改变列（column）的顺序。
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
除了用于快速布局的预约义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。
经过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于肯定合适让列浮动）。咱们使用这些变量生成预约义的栅格类，如上所示，还有以下所示的定制 mixin。
@grid-columns: 12; @grid-gutter-width: 30px; @grid-float-breakpoint: 768px;
mixin 用来和栅格变量一同使用，为每一个列（column）生成语义化的 CSS 代码。
// Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); @media (min-width: @screen-sm-min) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } // Negative margin nested rows out to align the content of columns .row { margin-left: (@gutter / -2); margin-right: (@gutter / -2); } } // Generate the extra small columns .make-xs-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @grid-float-breakpoint) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the small columns .make-sm-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the small column offsets .make-sm-column-offset(@columns) { @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { @media (