需求:
創建一套頁面,可以根據上網設備的不同自動調節顯示的效果.
技術分析:
bootstrap
bootstrap:
webcss框架,
集合了html/css/jquery爲一家
創建響應式的頁面
響應式:適配不同的上網設備
bootstarp的入門
1.下載bootstarp
網站:http://www.bootcss.com/
下載:用於生產環境的 Bootstrap
2.導入bootstarp.css
3.導入jquery.js
4.導入bootstrap.js
5.添加一個meta標籤 支持移動設備
<meta name="viewport" content="width=device-width, initial-scale=1">
6.將所有的內容放入到佈局容器中.
Bootstrap 需要爲頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類
方式1:
<div class="container"></div>
方式1:
<div class="container-fluid"></div>
注意:
bootstrap將每一行分成12份
媒體查詢:
假如大屏幕,每行顯示6個
超大電腦,屏幕分辨率>1200 使用: col-lg-2
假如屏幕小點,每行顯示4個
992<屏幕分辨率<1200 使用: col-md-3
再小點,每行顯示2個
768<屏幕分辨率<992 使用: col-sm-6
繼續小,每行顯示1個
屏幕分辨率<768 使用:col-xs-12
////////////////////////////
bootstrap組成部分:
全局css樣式--定義了一套css樣式
組件--定義了很多可以直接使用的組件 例如:字體圖標 導航條
js插件--例如:輪播圖 選項卡
/////////////////////////////
步驟分析:
1.先有一個模版頁面 0.html
2.先創建一個導航條
3.下面創建一個輪播圖
4.下面再創建3個div
中等屏幕的時候 3個在一行
小屏幕的時候 2個一行
最小屏幕的時候1個一行
/////////////////////
案例3-佈局首頁
需求:
當屏幕爲小屏幕的時候和超小屏幕的時候隱藏熱門商品中的左邊那張圖片
當屏幕爲超小屏幕隱藏middle圖片
技術分析:
hidden-xxxx
步驟分析:
1.佈局頁面
2.創建8個div
3.第一個:logo
3個div
小屏幕 2個一行
超小屏幕一個一行
4.第二個div:導航條
5.第三個div:輪播圖
6.第四個div:最新商品
先分成左右兩個div
左邊的div 放一張圖片
屏幕爲小屏幕的時候和超小屏幕的時候 隱藏
中等屏幕 佔2份
右邊的div
中等屏幕 佔10份
屏幕爲小屏幕的時候和超小屏幕的時候 佔12份
middle
中等屏幕 6份
小屏幕 12份
超小屏幕 隱藏
商品:
中等屏幕 2份
小屏幕 4份
超小屏幕 12份
=================
bootstrap:編寫一套頁面,適應不同的設備(響應式)
使用步驟:
1.導入bootstarp.css
2.導入jquery.js
3.導入bootstarp.js
4.在head標籤添加一個meta標籤 支持移動設備
5.必須將所有的內容防止一個佈局容器中
方式1:
放入一個class爲.container容器中
方式1:
放入一個class爲.container-fluid容器中
/////////////////
柵格系統:
屏幕分辨率>1200px 樣式:col-lg-x
992<屏幕分辨率<1200px 樣式:col-md-x 中等屏幕
768<屏幕分辨率<992px 樣式:col-sm-x 小屏幕
屏幕分辨率<768px 樣式:col-xs-x 最小屏幕
隱藏:
hidden-xs 在最小屏幕時候隱藏
將一個超鏈接僞裝成一個按鈕
class="btn btn-primary"
浮動到右邊
class="pull-right"