原理:使用**查詢針對不同寬度的裝置進行布局和樣式的設定,從而適配不同的裝置
超小螢幕(手機) <768px
小屏裝置(平板) >=768px~<992px
中等螢幕(桌面顯示器) >=992px~<1200px
寬屏裝置(大桌面顯示器) >=1200px
響應式布局容器
響應式需要乙個父集作為布局容器,來配合子集元素來實現變化效果。
原理就是在不同螢幕下,通過**查詢來改變這個容器的大小,再改變裡面子元素的排列方式和大小,從而實現不同螢幕下,看到不同的頁面布局和樣式變化
尺寸的劃分
超小螢幕(手機) <768px :設定寬度為100%
小屏裝置(平板) >=768px~<992px :設定寬度為750px
中等螢幕(桌面顯示器) >=992px~<1200px :設定寬度為970px
寬屏裝置(大桌面顯示器) >=1200px :設定寬度為1170px
bootstrap使用(只考慮樣式)
1、首先建立資料夾結構
2、建立html骨架結構
3、引入相關樣式檔案
4、書寫內容
布局容器
bootstrap 需要為頁面內容和柵格系統包裹乙個 .container 容器。
.container 類用於固定寬度並支援響應式布局的容器。不同尺寸的劃分見上文
.container-fluid 類用於 100% 寬度,佔據全部視口(viewport)的容器。(它適合於單獨做移動端開發)
柵格系統
柵格系統用於通過一系列的行(row)與列(column)的組合來建立頁面布局,內容可以放入這些建立好的布局中。
柵格系統分為了12列
行(row)必須放到 .container 布局容器裡面
要實現列的劃分,需要給列新增類字首
xs-extra small :超小
sm-small :小
md-medium :中等
lg-large :大
每一列缺省有左右15px的padding
可以同時為一列指定多個類名,以便劃分不同份數。例如:class=「col-md-4 col-sm-6」
class
="container"
>
class
="row"
>
class
="col-lg-6"
>
1div
>
class
="col-lg-2"
>
2div
>
class
="col-lg-2"
>
3div
>
class
="col-lg-2"
>
4div
>
div>
div>
如果份數相加小於12會有空白
如果大於,多的那一列會在下一行顯示
列巢狀
class
="container"
>
class
="row"
>
class
="col-lg-6"
>
class
="row"
>
class
="col-lg-6"
>
22div
>
class
="col-lg-6"
>
33div
>
div>
div>
class
="col-lg-2"
>
2div
>
class
="col-lg-2"
>
3div
>
class
="col-lg-2"
>
4div
>
div>
div>
列偏移
使用 .col-md-offset- 類可以將列向右偏移
原理是在右側的盒子的左邊加了乙個margin值
class
="container"
>
class
="row"
>
class
="col-md-3"
>
zuodiv
>
class
="col-md-3 col-md-offset-6"
>
youdiv
>
div>
div>
列排序
通過使用 .col-md-push- 和 .col-md-pull- 類就可以很容易的改變列(column)的順序。
class
="container"
>
class
="row"
>
class
="row"
>
class
="col-md-9 col-md-push-3"
>
右推div
>
class
="col-md-3 col-md-pull-9"
>
左拉div
>
div>
div>
div>
響應式工具
利用**查詢,並使用這些工具類能方便的針對不同裝置顯示或隱藏
.hidden-xs 超小屏下隱藏
.hidden-sm 小屏下隱藏
.hidden-md 中屏下隱藏
.hidden-lg 大屏下隱藏
與之相反的是visible-xs等等,代表的是顯示
ios頁面間傳遞引數四種方式
2 使用檔案,或者nsuserdefault來傳遞 3 通過乙個單例的class來傳遞 4 通過delegate來傳遞。ios開發使用委託delegate在不同視窗之間傳遞資料是本文要介紹的內容,主要是來講解如何使用委託delegate在不同視窗之間傳遞資料,具體內容來看詳細內容。在ios開發裡兩個...
nocache的四種方式
nocache的四種方式 1.cdn的推方式 2.客戶端url方式 css需加a.css?2010.css 3.html cache meta 4.服務端cache 6.iis http頭式,建立虛擬目錄 以下 在asp頁面首部加入 複製內容到剪貼簿 response.buffer true res...
棧的四種方式
按棧指標指向有滿 full 空 empty 滿 sp指向最後乙個壓入的資料 即先修改sp到指向下一目標位置,再存入相應的值 如 push rx sp rx 空 sp指向下乙個空的位置,即先存入相應的值,再修改sp到指向下一目標位置 如 push rx pop rx sp rx 根據壓棧向棧指標的變數...