一、回應式開發原理

1.1 回應式開發原理

就是使用媒體查詢針對不同寬度的設備進行布局和樣式的設定，從而適配不同設備的目的，

1.2 回應式布局容器

回應式需要一個父級做為布局容器，來配合子級元素來實作變化效果，

原理就是在不同螢屏下，通過媒體查詢來改變這個布局容器的大小，再改變里面子元素的排列方式和大小，從而實作不同螢屏下，看到不同的頁面布局和樣式變化，

二、 bootstrap的介紹

2.1Bootstrap簡介

1. Bootstrap 來自 Twitter（推特），是目前最受歡迎的前端框架，Bootstrap 是基于HTML、CSS 和
   JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷，
2. 框架：顧名思義就是一套架構，它有一套比較完整的網頁功能解決方案，而且控制權在框架本身，有預制樣式庫、組件和插件，使用者要按照框架所規定的某種規范進行開發，

2.2bootstrap優點

1. 標準化的html+css編碼規范
2. 提供了一套簡潔、直觀、強悍的組件
3. 有自己的生態圈，不斷的更新迭代
4. 讓開發更簡單，提高了開發的效率

2.3bootstrap布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 或者.container-fluid 容器，它提供了兩個作此用處的類，

.container

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

• 回應式布局的容器 固定寬度
• 大屏 ( >=1200px) 寬度定為 1170px
• 中屏 ( >=992px) 寬度定為 970px
• 小屏 ( >=768px) 寬度定為 750px
• 超小屏 (100%)

例1：把 container 的左右外邊距（margin-right、margin-left）交由瀏覽器決定，

.container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
}

例2：在不同的媒體查詢閾值范圍內都為 container 設定了max-width，用以匹配網格系統，

   @media (min-width: 768px) {
         .container {
            width: 750px;
          }

.container-fluid

• 流式布局容器 百分百寬度
• 占據全部視口（viewport）的容器，

2.4bootstrap柵格系統

基本的網格結構

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

柵格系統的使用
注意：引入相關的樣式

/*  Bootstrap 核心樣式  */
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

例1：如果孩子的分數相加等于12，孩子占滿整個 container 的寬度

 <div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
</div>

例2： 如果孩子的分數相加小于12，孩子不會占滿整個 container 的寬度

<div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-1">1</div>
        </div>

例3：如果孩子的分數相加大于12，多余的那個孩子會跑到另外一行顯示

<div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-3">3</div>
        </div>

效果展示：

柵格系統列嵌套
例：

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我們嵌套串列最好加一個行 row 可以取消父元素的padding值 而且高度自動和父級一樣高-->
                <div class="row in">
                    <div class="col-md-4">內嵌串列1</div>
                    <div class="col-md-8">內嵌串列2</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

效果展示：

Bootstrap 按鈕

<!-- 標準的按鈕 -->
<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>

效果展示：

總結

以上就是今天要講的內容，本文僅僅簡單介紹了回應式布局的使用，而回應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著大螢屏移動設備的普及，用“大勢所趨”來形容也不為過，隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式，