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 元素設置 
• 使用 @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>

轉載自：https://www.cnblogs.com/welhzh/p/10501780.html