bootstrap在響應式web設計中的應用

顏春艷 南京技師學院

一、響應式web設計概述

越來越多的人使用小屏幕設備上網，針對不同屏幕的設備開發不同頁面成本非常大，這時響應式Web設計應運而生。響應式Web設計是由Ethan Marcotte在2010 年提出的，他將媒體查詢、柵格布局和彈性圖片合并稱為響應式Web設計。

從設計理念看，響應式Web設計是一種針對任意設備對網頁內容進行完美布局的顯示方式，與原始設計方式相比有以下兩點突破。

（一）一個網頁設計，多個設備使用

隨著移動產品發展，出現了各種屏幕尺寸的手機、Pad等移動設備，而針對每一種尺寸的設備都獨立開發一個網站，成本會非常高，如果要找一個成本、設計、性能的平衡點，響應式設計是最好的選擇。它可以做到一處設計，相應多種屏幕。

（二）移動優先

以前的網站開發大多數是先開發PC端，再根據PC端的網頁及功能設計開發移動端。然而，隨著互聯網行業的發展，使用移動端上網的用戶群已經趕超PC端。由于移動設備的屏幕小、計算資源低，如果我們先開發移動端，再開發PC端，可以迫使開發人員在更小、計算資源更低的設備中設計產品功能。這樣做，一是可以使產品功能更加核心和簡潔，二是有助于設計出性能更高的程序。

二、響應式web設計特點

下面從用戶體驗和技術層面兩個方面來陳述響應式Web設計的特點。

（一）用戶體驗

用戶體驗對于網站的運營是至關重要的，網站如果沒有良好的用戶體驗，那么就算里面的內容再精彩，用戶也無心瀏覽下去。通常，網站會在移動瀏覽器上縮放，這樣雖然可以完整地給我們呈現想要瀏覽的內容，但鑒于移動設備屏幕大小的限制，用戶也能難找到自己關注的內容。而響應式Web設計并不是將整個網頁縮放給用戶，而是經過精心篩選，有選擇性地顯示頁面的內容。

例如一個網站在pc端大屏幕的頁面效果如圖1所示，而如果在移動端小屏幕上，按比例縮小的話文字就會看不清，使用響應式Web開發可以讓該界面呈現縱向排列方式，如圖2所示。

圖1

圖2

（二）技術層面

在技術層面，響應式Web設計是和HTML5+CSS3互相配合與支持的，實現響應式設計包括以下技術點。

1.HTML5+CSS3的基本網頁設計。

2.HTML5中的viewport：提供可以配置視口的屬性。

3.CSS3媒體查詢：識別媒體類型、特征（屏幕寬度、像素比等）。

4.流式布局：可以根據瀏覽器的寬度和屏幕的大小自動調整效果。

5.響應式柵格系統：依賴于媒體查詢，根據不同的屏幕大小調整布局。

6.流失圖片：隨流式布局進行相應縮放。

實現響應式Web設計，簡單說就是根據顯示屏幕大小的變化控制頁面的文檔流。用戶利用媒體查詢設計不同尺寸設備下的網頁的外觀形式，利用響應式柵格系統和彈性盒子可以方便的設計出不同尺寸設備下的網頁布局形式，從而實現針對不同終端設備顯示出最佳的效果，達到響應式的目的。

三、bootstrap的在響應式web中的應用

響應式布局雖然能夠解決不同終端設備瀏覽同一網頁的問題，也帶給了用戶很好的體驗，然后對于開發者來說，還是有很多細節需要調整，相對來說是個比較復雜的過程，這時bootstrap的出現給編程者帶來一個很好的開發工具，它提供了用戶友好、跨瀏覽器的解決方案，讓響應式變得容易實現，大大提高了前端開發的工作效率。

（一）bootstrap簡介

bootstrap是由Twitter推出的前端開源工具包，它結合了HTML、CSS和JavaScript等前端技術。

（二）CSS媒體查詢

針對不同的設備，我們需要編寫適應其特性的CSS代碼，bootstrap框架利用CSS媒體查詢有效地解決了這個問題，它首先對不同的型號媒體設備進行查詢，判斷其屬于哪種設備，然后根據判斷結果在事先寫好的多種樣式中匹配最為合適的樣式。

舉例說明：當屏幕分辨率最大寬度不超過768像素時，其背景色為綠色，當其屏幕寬度在768像素到992像素之間時，將其背景設置為紅色，具體代碼如下：

（三）柵格系統

bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口尺寸的增加，系統會自動分為最多12列，根據需要通過行列組合來創建頁面布局，開發者可以將內容放入這些建好的布局中。Bootstrap3使用了4種柵格選項來形成柵格系統，這4中柵格選項適合不同尺寸的屏幕設備。如下表所示：

超小設備手機（＜768px）小型設備平板電腦（≥768px）中型設備臺式電腦（≥992px）以折疊開始，斷點以上是水平的最大容器寬度 None (auto) 750px 970px 1170px Class 前綴 .col-xs- .col-sm- .col-md- .col-lg-列數量和 12 12 12 12最大列寬 Auto 60px 78px 95px間隙寬度 30px 30px 30px 30px大大型設備臺式電腦（≥1200px）網格行為 一直是水平的以折疊開始，斷點以上是水平的以折疊開始，斷點以上是水平的

柵格系統可以讓用戶在不同尺寸設備上看見不同的布局效果，舉例說明如下：

當屏幕是中等大小的時候運行結果如下圖3所示，當在小屏幕上顯示時效果如圖4所示，當在超小屏幕上顯示時，效果如圖5所示。

圖3

圖4

圖5

四、結束語

本文主要介紹了響應式web設計的概念、特點、bootstrap框架在響應式web開發中的應用，對其中的關鍵技術CSS媒體查詢和柵格系統，通過實例做了比較詳細的介紹。整合bootstrap編寫的網站在設備適配性、瀏覽器兼容性等方面較一般網站都有顯著的提高。另外，bootstrap的組件和插件也能在一定程度上縮短開發時間、節約人力物力成本。有關bootstrap的功能細節還需要在開發過程中進行反復不斷地嘗試。