1.1 響應式開發原理
就是使用媒體查詢針對不同寬度的裝置進行布局和樣式的設定,進而适配不同裝置的目的。
裝置的劃分情況:
小于768的為超小螢幕(手機)
768~992之間的為小屏裝置(平闆)
992~1200的中等螢幕(桌面顯示器)
大于1200的寬屏裝置(大桌面顯示器)
1.2 響應式布局容器
響應式需要一個父級做為布局容器,來配合子級元素來實作變化效果。
原理就是在不同螢幕下,通過媒體查詢來改變這個布局容器的大小,再改變裡面子元素的排列方式和大小,進而實作不同螢幕下,看到不同的頁面布局和樣式變化。
父容器版心的尺寸劃分
超小螢幕(手機,小于 768px):設定寬度為 100%
小螢幕(平闆,大于等于 768px):設定寬度為 750px
中等螢幕(桌面顯示器,大于等于 992px):寬度設定為 970px
大螢幕(大桌面顯示器,大于等于 1200px):寬度設定為 1170px
但是我們也可以根據實際情況自己定義劃分
示例代碼。
2.1Bootstrap簡介
Bootstrap 來自 Twitter(推特),是目前最受歡迎的前端架構。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。
中文網 官網 推薦網站
架構:顧名思義就是一套架構,它有一套比較完整的網頁功能解決方案,而且控制權在架構本身,有預制樣式庫、元件和插件。使用者要按照架構所規定的某種規範進行開發。
2.2 bootstrap優點
标準化的html+css編碼規範
提供了一套簡潔、直覺、強悍的元件
有自己的生态圈,不斷的更新疊代
讓開發更簡單,提高了開發的效率
2.3 版本簡介
2.x.x:停止維護,相容性好,代碼不夠簡潔,功能不夠完善。
3.x.x:目前使用最多,穩定,但是放棄了IE6-IE7。對 IE8 支援但是界面效果不好,偏向用于開發響應式布局、移動裝置優先的WEB 項目。
4.x.x:最新版,目前還不是很流行
2.4bootstrap基本使用
在現階段我們還沒有接觸JS相關課程,是以我們隻考慮使用它的樣式庫。
Bootstrap 使用四步曲:
建立檔案夾結構
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQDOxEzX3xCZlhXam9VbsUmepNXZy9CXwJWZ3xCdh1mcvZ2Lc1zaHRGcWdUYuVzVa9GczoVdG1mWfVGc5RHLwIzX39GZhh2csATMflHLwEzX4xSZz91ZsAzMfRHLGZkRGZkRfJ3bs92YskmNhVTYykVNQJVMRhXVEF1X0hXZ0xiNx8VZ6l2cssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLyMDM1cTOwQDM0cTMmdTNzYzX4QzMyIjM1IzLcBTMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
?
建立 html 骨架結構
引入相關樣式檔案
?
書寫内容
直接拿Bootstrap 預先定義好的樣式來使用
修改Bootstrap 原來的樣式,注意權重問題
學好Bootstrap 的關鍵在于知道它定義了哪些樣式,以及這些樣式能實作什麼樣的效果
2.5 bootstrap布局容器
Bootstrap 需要為頁面内容和栅格系統包裹一個 .container 或者.container-fluid 容器,它提供了兩個作此用處的類。
.container
響應式布局的容器 固定寬度
大屏 ( >=1200px) 寬度定為 1170px
中屏 ( >=992px) 寬度定為 970px
小屏 ( >=768px) 寬度定為 750px
超小屏 (100%)
.container-fluid
流式布局容器 百分百寬度
占據全部視口(viewport)的容器。
2.6 bootstrap栅格系統
Bootstrap提供了一套響應式、移動裝置優先的流式栅格系統,随着螢幕或視口(viewport)尺寸的增加,系統會自動分為最多12列。
栅格系統用于通過一系列的行(row)與列(column)的組合來建立頁面布局,你的内容就可以放入這些建立好的布局中。
按照不同螢幕劃分為1~12 等份
行(row) 可以去除父容器作用15px的邊距
xs-extra small:超小; sm-small:小; md-medium:中等; lg-large:大;
列(column)大于 12,多餘的“列(column)”所在的元素将被作為一個整體另起一行排列
每一列預設有左右15像素的 padding
可以同時為一列指定多個裝置的類名,以便劃分不同份數 例如 class="col-md-4 col-sm-6"
栅格嵌套
栅格系統内置的栅格系統将内容再次嵌套。簡單了解就是一個列内再分成若幹份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-*
元素内。
列偏移
使用 .col-md-offset-* 類可以将列向右側偏移。這些類實際是通過使用 * 選擇器為目前元素增加了左側的邊距(margin)。
列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列(column)的順序。
響應式工具
為了加快對移動裝置友好的頁面開發工作,利用媒體查詢功能,并使用這些工具類可以友善的針對不同裝置展示或隐藏頁面内容。
3.1 技術選型
方案:我們采取響應式頁面開發方案
技術:bootstrap架構
設計圖: 本設計圖采用 1280px 設計尺寸
項目結構搭建
Bootstrap 使用四步曲:
建立檔案夾結構
建立 html 骨架結構
引入相關樣式檔案
書寫内容
重要的說明