2. 程式人生 > >bootstrap入門-3.響應式原理

bootstrap入門-3.響應式原理

阿新 • • 發佈：2017-08-20
pos copy arc uip 邊距 ... 串行 psu 獲得

Bootstrap網格系統（Grid System）

　　響應式網格系統隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

1

1

1

1

1

1

1

1

1

1

1

1

4

4

4

4

8

6

6

12

工作原理

　　· 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。

　　· 使用行來創建列的水平組。

　　· 內容應該放置在列內，且唯有列可以是行的直接子元素。

　　· 預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格布局。LESS 混合類可用於更多語義布局。

　　· 列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。

　　· 網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4。

媒體查詢

技術分享 
/* 超小設備（手機，小於 768px） */

/* Bootstrap 中默認情況下沒有媒體查詢 */

/* 小型設備（平板電腦，768px 起） */

@media (min-width: @screen-sm-min) { ... }

/* 中型設備（臺式電腦，992px 起） */

@media (min-width: @screen-md-min) { ... }

/* 大型設備（大臺式電腦，1200px 起） */

@media (min-width: @screen-lg-min) { ... }
技術分享

跨設備工作

超小設備手機（<768px）

小型設備平板電腦（≥768px）

中型設備臺式電腦（≥992px）

大型設備臺式電腦（≥1200px）

網格行為

一直是水平的

以折疊開始，斷點以上是水平的

以折疊開始，斷點以上是水平的

以折疊開始，斷點以上是水平的

最大容器寬度

None (auto)

750px

970px

1170px

Class 前綴

.col-xs-

.col-sm-

.col-md-

.col-lg-

列數量和

12

12

12

12

最大列寬

Auto

60px

78px

95px

間隙寬度

30px
（一個列的每邊分別 15px）

30px
（一個列的每邊分別 15px）

30px
（一個列的每邊分別 15px）

30px
（一個列的每邊分別 15px）

可嵌套

Yes

Yes

Yes

Yes

偏移量

Yes

Yes

Yes

Yes

列排序

Yes

Yes

Yes

Yes

網格的基本結構

技術分享 
<div class="container">

   <div class="row">

      <div class="col-*-*"></div>

      <div class="col-*-*"></div>      

   </div>

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

</div>

<div class="container">....
技術分享

示例一：水平堆疊

　　代碼如下：

技術分享 
<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 實例 - 堆疊的水平</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

   <h1>Hello, world!</h1>

 

   <div class="row">

 

      <div class="col-md-6"  style=" box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

         </p>

 

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

            quae ab illo inventore veritatis et quasi architecto beatae vitae

            dicta sunt explicabo.

         </p>

      </div>

 

      <div class="col-md-6" style="box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium.

         </p>

 

         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

            consectetur, adipisci velit, sed quia non numquam eius modi

            tempora incidunt ut labore et dolore magnam aliquam quaerat

            voluptatem.

         </p>

   </div>

</div>

</body>

</html>
技術分享

　　效果：

技術分享

　　確保單元的總數為12以保障顯示效果比較和諧。超過12就串行了。如果單個行的單元數超過12呢：

技術分享

　　如上圖所示，單個行的單元數超過12會失去內邊距。

示例二：中型和大型設備

　　睡得晚起得早還多夢，也是沒治了。

　　中型設備是50%/50%，大型設備是33%/66%，那麽可以這樣寫：

<div class="col-md-6 col-lg-4">....</div>

<div class="col-md-6 col-lg-8">....</div>

　　源碼如下：

技術分享 
<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 實例 - 中型和大型設備</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

   <h1>Hello, world!</h1>

 

   <div class="row">

 

      <div class="col-md-6 col-lg-4"  style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

         </p>

 

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

            quae ab illo inventore veritatis et quasi architecto beatae vitae

            dicta sunt explicabo.

         </p>

      </div>

 

      <div class="col-md-6 col-lg-8" style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium.

         </p>

 

         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

            consectetur, adipisci velit, sed quia non numquam eius modi

            tempora incidunt ut labore et dolore magnam aliquam quaerat

            voluptatem.

         </p>

   </div>

</div>

</body>

</html>
技術分享

　　若如此，中型設備的顯示是50%/50%：

技術分享

　　大型設備的顯示是33%/66%：

技術分享

　　同理移動設備也可進行類似設置：

<div class="col-sm-3 col-md-6 col-lg-4">....</div>

<div class="col-sm-9 col-md-6 col-lg-8">....</div>

　　源碼及效果略。

響應式的列重置

　　小設備時無法確定網格顯示的位置。

　　解決方法是添加一個響應式的塊（描述未必準確），使用.clearfix class和響應式實用工具：

技術分享 
<div class="container">

    <div class="row" >

        <div class="col-xs-6 col-sm-3"

            style="

            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        <div class="col-xs-6 col-sm-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

            </p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut.

            </p>

        </div>

 

        <div class="clearfix visible-xs"></div>

 

        <div class="col-xs-6 col-sm-3"

        style="

        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco

            laboris nisi ut aliquip ex ea commodo consequat.

            </p>

        </div>

        <div class="col-xs-6 col-sm-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim

            </p>

        </div>

    </div>

</div>
技術分享

　　解釋一下中間這句：

<div class="clearfix visible-xs"></div>

　　響應式實用工具目前適用於塊和表切換。看下面兩個表格就知道了。

超小屏幕
手機 (<768px)

小屏幕
平板 (≥768px)

中等屏幕
桌面 (≥992px)

大屏幕
桌面 (≥1200px)

.visible-xs-*

可見

隱藏

隱藏

隱藏

.visible-sm-*

隱藏

可見

隱藏

隱藏

.visible-md-*

隱藏

隱藏

可見

隱藏

.visible-lg-*

隱藏

隱藏

隱藏

可見

.hidden-xs

隱藏

可見

可見

可見

.hidden-sm

可見

隱藏

可見

可見

.hidden-md

可見

可見

隱藏

可見

.hidden-lg

可見

可見

可見

隱藏

類組

CSS display

.visible-*-block

display: block;

.visible-*-inline

display: inline;

.visible-*-inline-block

display: inline-block;

實例三：響應式實用工具

　　源碼：

技術分享 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 實例 - 響應式實用工具</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="padding: 40px;">
    <div class="row visible-on">
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-xs">特別小型</span>
            <span class="visible-xs">? 在特別小型設備上可見</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-sm">小型</span>
            <span class="visible-sm">? 在小型設備上可見</span>
        </div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-md">中型</span>
            <span class="visible-md">? 在中型設備上可見</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-lg">大型</span>
            <span class="visible-lg">? 在大型設備上可見</span>
        </div>
    </div>
</div>

</body>
</html>
技術分享

　　效果如下：

　　大型設備時：

技術分享

　　其他設備略。

偏移列

　　.col-xs=*類不支持偏移，可以通過使用一個空的單元格來實現該效果。

　　使用.col-md-offset-*類可以把一個列的左外邊距增加*列，其中*的範圍是從1到11。

技術分享 
<div class="container">

    <h1>Hello, world!</h1>

    <div class="row" >

        <div class="col-xs-6 col-md-offset-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing

            elit.

            </p>

        </div>

    </div>

</div>
技術分享

　　效果：

技術分享

嵌套列

　　嵌套需要添加一個新的.row，然後在這個嵌套的.row裏添加一組.col-md-*列。這組列的個數不能超過12。

技術分享 
<div class="container">

    <h1>Hello, world!</h1>

    <div class="row">

        <div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <h4>第一列</h4>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit.

            </p>

        </div>

        <div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <h4>第二列 - 分為四個盒子</h4>

            <div class="row">

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        Consectetur art party Tonx culpa semiotics. Pinterest

        assumenda minim organic quis.

                    </p>

                </div>

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                         sed do eiusmod tempor incididunt ut labore et dolore magna

        aliqua. Ut enim ad minim veniam, quis nostrud exercitation

        ullamco laboris nisi ut aliquip ex ea commodo consequat.

                    </p>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        quis nostrud exercitation ullamco laboris nisi ut

        aliquip ex ea commodo consequat.

                    </p>

                </div>

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna

        aliqua. Ut enim ad minim.

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>
技術分享

　　效果：

技術分享

列排序

　　有一點像定位。.col-md-push-*相當於left；.col-md-pull-*類似於right。其中*的範圍是從1到11。標簽在後面的層級高一些。

技術分享 
<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <p>排序前</p>

      <div class="col-md-4" style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         我在左邊

      </div>

      <div class="col-md-8" style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         我在右邊

      </div>

   </div><br>

   <div class="row">

      <p>排序後</p>

      <div class="col-md-4 col-md-push-1"

         style="

         box-shadow: inset 1px -1px 1px #444,

         inset -1px 1px 1px #444;">

         我在左邊

      </div>

      <div class="col-md-8 col-md-pull-2"

         style="

         box-shadow: inset 1px -1px 1px #444,

         inset -1px 1px 1px #444;">

         我在右邊

      </div>

   </div>

</div>
技術分享

　　效果：

技術分享

　　參考：http://www.runoob.com/bootstrap/bootstrap-grid-system.html

分類: css,HTML5 標簽: bootstrap

bootstrap入門-3.響應式原理

相關推薦

bootstrap入門-3.響應式原理

pos copy arc uip 邊距 ... 串行 psu 獲得 Bootstrap網格系統（Grid System） 　　響應式網格系統隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。 1 1 1 1 1 1 1

jQuery入門和響應式佈局3種方法

jQuery是一個js庫。裡面封裝了各種各樣的js方法。 使用者在使用jQuery的時候，只需要呼叫jQuery裡的方法， 即可完成相對複雜的功能，沒有必要自己去定義相關的方法。 jQuery語法 $

Vue響應式原理

允許 clas 沒有 改變 $set 開發 轉化 閱讀 提前 前面的話 　　Vue最顯著的特性之一便是不太引人註意的響應式系統(reactivity system)。模型層(model)只是普通JS對象，修改它則更新視圖(view)。這會讓狀態管理變得非常簡單且直觀，不過

BootStrap實現簡單響應式導航菜單

bar query alt str content doctype bootstra inf ini 　　　用BootStrap實現響應式導航欄，我會對其中的一些樣式進行說明。 　　 先上代碼，是一個很簡單的Demo。 　　　 <!doctype html>

bootstrap 圖片：響應式與外形樣式

col 元素 spa .com shee 圖片大小 pre boot init 響應式是指一個網站能兼容多個終端，響應式圖片即是，圖片大小能自適應屏幕（比例不變） <!doctype html> <html lang="en"> <head&

深入響應式原理--Vue

執行 ide 格式 dev fun 添加屬性 類型 即使 develop Vue 最顯著的特性之一便是不太引人註意的響應式系統(reactivity system)。模型層(model)只是普通 JavaScript 對象，修改它則更新視圖(view)。這會讓狀態管理變

關於vue的響應式原理

define fin data vue 轉化 數據 收集 get() 不支持 Vue 是基於Object.defineProperty()來實現數據響應的，而Object.defineProperty()是ES5無法 shim（修復） 的特性 這也就是Vue不支持 IE8以

vue.js響應式原理解析與實現

github 遞歸 val 實現 mode 最新 中比 ava 新頁面 從很久之前就已經接觸過了angularjs了，當時就已經了解到，angularjs是通過臟檢查來實現數據監測以及頁面更新渲染。之後，再接觸了vue.js，當時也一度很好奇vue.js是如何監測數據更新並

vue 響應式原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

深入淺出Vue基於“依賴收集”的響應式原理

原文地址： https://zhuanlan.zhihu.com/p/29318017 每當問到VueJS響應式原理，大家可能都會脫口而出“Vue通過Object.defineProperty方法把data物件的全部屬性轉化成getter/setter，當屬性被訪問或修改時

Vue 資料響應式原理

Vue 資料響應式原理 Vue.js 的核心包括一套“響應式系統”。“響應式”，是指當資料改變後，Vue 會通知到使用該資料的程式碼。例如，檢視渲染中使用了資料，資料改變後，檢視也會自動更新。 舉個簡單的例子，對於模板： {{ name }} 建立一個 Vue 元件： var vm = new

vue.js響應式原理解析與實現—實現v-model與{{}}指令

只需要 spl foreach 形式 pen for 元素節點 目標 @param 離線瀏覽器軟件 服務器遠程連接 1、可多站同時下載、多站同時扒 2、可單頁扒 3、可自定義， 重寫JS\圖片\CSS路徑 4、執行全站下載後，會下載到本程序根目錄下的html文件夾下。

vue響應式原理(雙向繫結)-1

首先將該任務分為幾個子任務： 輸入框以及文字節點與data中的資料繫結 輸入框內容變化時，data中的資料同步變化。即view=>model的變化 data中的資料變化時，文字節點的內容同步變化。即model=>view的變化。 任務一：資料

深入淺出 - vue之深入響應式原理

高質量文章 談，前端框架的『御劍之道』 2018你應該知道的Web效能資訊採集指南 嗨，送你一張Web效能優化地圖 為什麼Vue使用非同步更新佇列？ 聊聊我對現代前端框架的認知 深入淺出 - vue變化偵測原理 Vue 專案架構設計與工程化實踐 深

vue 資料劫持 響應式原理 Observer Dep Watcher

1、vue響應式原理流程圖概覽   2、具體流程 （1）vue示例初始化(原始碼位於instance/index.js） import { initMixin } from './init' import { stateMixin } from './state' import

Vue.js 深入響應式原理

深入響應式原理 現在是時候深入一下了！Vue 最獨特的特性之一，是其非侵入性的響應式系統。資料模型僅僅是普通的 JavaScript 物件。而當你修改它們時，檢視會進行更新。這使得狀態管理非常簡單直接，不過理解其工作原理同樣重要，這樣你可以迴避一些常見的問題。在這個章節，我們將進入一些 Vue

深入解析vue.js響應式原理與實現

vue.js響應式原理解析與實現。angularjs是通過髒檢查來實現資料監測以及頁面更新渲染。之後，再接觸了vue.js，當時也一度很好奇vue.js是如何監測資料更新並且重新渲染頁面。vue.js響應式原理解析與實現 Object.defineProperty es5新增了

Vue 原始碼(一)：響應式原理

相關文章網上已經很多了，趁 3.0 沒出跟風打個卡 前言 本文只做簡單介紹，結合程式碼食用更佳：github/vue-learn-source-code 效果預覽：github pages Object.defineProperty defineProperty 讓我們可以劫持某個屬性的 g

Bootstrap框架和響應式佈局

彈性佈局 1.浮動+百分比佈局 2.FIex佈局 Flex佈局對於設計比較複雜的頁面非常有用,實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變 響應式佈局 Responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在

Bootstrap樣式外掛/響應式佈局/旅遊網案例

旅遊精選 <div class="row paddtop"> <div class="col-md-3"> <div class="thumbnai