bootstrap 自适应和响应式布局的区别

自适应：  无论屏幕多大，都尽可能不换行，而只是横向缩放。

响应式： 屏幕变小了以后，属于同一行的元素受到挤压后，行的右边元素自动换行显式； 屏幕大了后，本属于同一行的元素尽量的排在同一行内；

 

bootstrap是依赖jquery的，使用时先装上jquery。

 

Boostrap的“栅栏”模式

Boostrap自适应功能的基础就是“栅栏"模式，它是将浏览器以行列形式去划分：一共12列，行数自定义，根据你所要显示的元素，肯定每一个元素显示的大小即须要的列数，若是超过范围，就会自动转行。每列的大小是Boostrap根据当前浏览器的大小自动平均分配。

Boostrap的自适应功能

其实理解栅栏模式以后，自适应功能就简单不少了，根据浏览器的大小，Boostrap有四种栅栏类名提供使用，用法与Css样式表类名选择器样式调用是同样的：

xs：col-xs-1 ~ col-xs-12，多列始终在一行内。

sm：col-sm-1 ~ col-sm-12，多列在浏览器像素宽度大于等于768px时才在一行内。

md：col-md-1 ~ col-md-12，多列在浏览器像素宽度大于等于992px时才在一行内。

lg：col-lg-1 ~ col-lg-12，多列在浏览器像素宽度大于等于1200px时才在一行内。

我贴一段伪代码：

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>

    <div class="col-sm-4  col-md-10"></div>
</div>

这段的意思是当浏览器的宽度在768——992之间时，采起4：4:4的模式呈现，当浏览器宽度大于992时，就按1：1:10的模式呈现。固然你也能够四种都是用，细分的在仔细点，无论怎么样，Boostrap会根据浏览器的宽度自动分配列宽度，从而匹配你所想要的呈现模式。至于它怎么作到的，你不用关心，你只须要考虑你在手机上的网页呈现样式，或者PC上的呈现样式的设计就好了，接下来，就交给Boostrap吧。

移动设备优先

在 Bootstrap 2 中，咱们对框架中的某些关键部分增长了对移动设备友好的样式。而在 Bootstrap 3 中，咱们重写了整个框架，使其一开始就是对移动设备友好的。此次不是简单的增长一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每一个角落，而不是增长一个额外的文件。

排版与连接

Bootstrap 排版、连接样式设置了基本的全局样式。分别是：

• 为 body 元素设置 background-color: #fff;
• 使用 @font-family-base、@font-size-base 和 @line-height-base 变量做为排版的基本参数
• 为全部连接设置了基本颜色 @link-color ，而且当连接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。

布局容器

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类。注意，因为 padding 等属性的缘由，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。它包含了易于使用的预约义类，还有强大的mixin 用于生成更具语义的布局。

简介

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。下面就介绍一下 Bootstrap 栅格系统的工做原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 经过“行（row）”在水平方向建立一组“列（column）”。
• 你的内容应当放置于“列（column）”内，而且，只有“列（column）”能够做为行（row）”的直接子元素。
• 相似 .row 和 .col-xs-4 这种预约义的类，能够用来快速建立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来建立语义化的布局。
• 经过为“列（column）”设置 padding 属性，从而建立列与列之间的间隔（gutter）。经过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为何是向外突出的缘由。在栅格列中的内容排成一行。
• 栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可使用三个 .col-xs-4 来建立。
• 若是一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被做为一个总体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 而且针对小屏幕设备覆盖栅格类。 所以，在元素上应用任何 .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 内。

列偏移

使用 .col-md-offset-* 类能够将列向右侧偏移。这些类实际是经过使用 * 选择器为当前元素增长了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<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>

You can also override offsets from lower grid tiers with .col-*-offset-0 classes.

<div class="row"> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"> </div> </div>

嵌套列

为了使用内置的栅格系统将内容再次嵌套，能够经过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

<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）的顺序。

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<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>