html支持移动端吗,bootstrap支持手机端吗?
bootstrap支持手機(jī)端。Bootstrap的響應(yīng)式CSS能夠自適應(yīng)于臺式機(jī)、平板電腦和手機(jī);且自Bootstrap3起,框架包含了貫穿于整個(gè)庫的移動設(shè)備優(yōu)先的樣式。
bootstrap響應(yīng)式布局
Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng),隨著屏幕或視口(viewport)尺寸的增加,系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義類,還有強(qiáng)大的mixin 用于生成更具語義的布局。
首先柵格系統(tǒng)用于通過一系列的行(row)與列(column)的組合來創(chuàng)建頁面布局。bootstrap根據(jù)不同屏幕尺寸,選擇不同的柵格選項(xiàng)。一共有四種柵格選項(xiàng),超小屏(手機(jī))、小屏(平板)、中屏(桌面)、大屏(超大桌面)。柵格系統(tǒng)分為12列,即每行最多可容納12列。若里,一個(gè).row內(nèi)包含的列(column)大于12個(gè)(即,一行中的柵格單元超過12個(gè)單元),則會自動排版,總之,一行只能最多12列,具體分析往后閱讀。
原理:
通過CSS3 Media Queries(媒體(設(shè)備)查詢),媒體查詢是讓頁面內(nèi)容在不同的媒體環(huán)境下運(yùn)行時(shí)可以展示不同的樣式(這個(gè)樣式當(dāng)然是由我們來書寫規(guī)定的)。
@media是CSS3中規(guī)定的屬性,它可以實(shí)現(xiàn)針對不同媒體設(shè)備來設(shè)置不同的樣式的目的。而且就算是在同一設(shè)備中它也可以在你重置瀏覽器大小的過程中,頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
應(yīng)用:
Bootstrap主要用到min-width、max-width,以及and語法,用于在不同的分辨率下設(shè)置不同的CSS樣式。
@media的語法@media mediatype and|not|only (media feature) {
CSS-Code;
}
其中mediatype有print(打印設(shè)備)、screen(用于電腦屏幕,平板電腦,智能手機(jī)等)、speech(應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備);media feature則是用來規(guī)定如最大寬度或者最小寬度。
我們來看看bootstrap中布局容器的例子:
Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container 容器。
如下固定寬度布局
...
或者 流式布局
...
在bootstrap的css文檔中@media屬性1591~1605行
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
……
以上代碼實(shí)現(xiàn)了隨瀏覽器寬度的變化container容器的寬度也進(jìn)行變化。
更多web前端知識,請查閱 HTML中文網(wǎng) !!
總結(jié)
以上是生活随笔為你收集整理的html支持移动端吗,bootstrap支持手机端吗?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: AngularJS中的过滤器(filte
- 下一篇: iOS CAGradientLayer颜