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>