本篇文章給大家談?wù)刡ootstrap手機(jī)端模板，以及bootstrap 手機(jī)模板對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、用bootstrap框架能不能開發(fā)手機(jī)端頁(yè)面
• 2、使用bootstrap 如何做自適應(yīng)的網(wǎng)頁(yè)，比如一個(gè)大圖如何適應(yīng)手機(jī)端和pc端
• 3、怎樣讓bootstrap設(shè)計(jì)的頁(yè)面在手機(jī)端也能響應(yīng)式自適應(yīng)
• 4、求 懂前端的大神：如何用bootstrap框架 寫出如下的手機(jī)端頁(yè)面呢？

用bootstrap框架能不能開發(fā)手機(jī)端頁(yè)面

不可以，bootstrap只是基于jQuery的一種JS框架屬于網(wǎng)頁(yè)開發(fā)腳本，不能做APP但是可以做移動(dòng)端的網(wǎng)頁(yè)，bootstrap有響應(yīng)式布局可以再手機(jī)、平板和臺(tái)式端以網(wǎng)頁(yè)的形式顯示。

使用bootstrap 如何做自適應(yīng)的網(wǎng)頁(yè)，比如一個(gè)大圖如何適應(yīng)手機(jī)端和pc端

可以用media query媒體查詢來設(shè)置不同分辨率下的不同css樣式

/* 超小屏幕（手機(jī)，小于 768px） */

/* 沒有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） */

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { ... }

給你來一段樣例，你看看

@media(min-width:?768px)?{

?.ipad

?{

????display:?none;

?}

?.mobile

?{

???display:?none;

?}

?.pc

?{

???display:?block;

?}

?.row?{

???margin-left:?0;

???margin-right:?0;

?}

?.home-bg?{

???//margin:?0;

???background:?url(asset-path("common/home_big3.jpg"))?center?no-repeat;

???width:?100%;

???height:?500px;

???background-size:?cover;

?}

}

@media?(max-width:?767px)?{

??.ipad

??{

????display:?block;

??}

??.mobile

??{

????display:?none;

??}

??.pc

??{

????display:?none;

??}

??.home-bg?{

????background:?url(asset_path("common/home_1024.jpg"));

????background-position:?center?center;

????background-repeat:?no-repeat;

????background-size:?cover;

????//height:?100%;

??}

?}

@media(max-width:?480px)?{

??.ipad

??{

????display:?none;

??}

??.pc

??{

????display:none;

??}

??.mobile

??{

????display:?block;

??}

??.home-bg?{

????background:?url(asset_path("common/home_640.jpg"));

????background-position:?center?center;

????background-repeat:?no-repeat;

????background-size:?cover;

????height:?600px;

??}

?}

想必你能理解我的意思

怎樣讓bootstrap設(shè)計(jì)的頁(yè)面在手機(jī)端也能響應(yīng)式自適應(yīng)

你好

怎樣讓bootstrap設(shè)計(jì)的頁(yè)面不僅在電腦瀏覽器是響應(yīng)式在手機(jī)端也是響應(yīng)式呢？

也就是電腦端不同分辨率下的瀏覽效果跟相應(yīng)分辨率下的手機(jī)端瀏覽效果是一樣的呢？

閑話少說，直接上圖看效果：

在用bootstrap設(shè)計(jì)好頁(yè)面,并在火狐瀏覽器上進(jìn)行調(diào)試,效果圖如下：

但是在手機(jī)端瀏覽的時(shí)候發(fā)現(xiàn)整個(gè)頁(yè)面被縮小的很小,連文字都看不清：

為什么會(huì)這樣呢？

為什么bootstrap設(shè)計(jì)出來的頁(yè)面樣式雖然都一樣,但是在手機(jī)端

顯示的只是整個(gè)頁(yè)面都縮小而不是響應(yīng)式的呢？

后來才發(fā)現(xiàn)凡是bootstrap設(shè)計(jì)的頁(yè)面都帶有標(biāo)簽頭:

meta name="viewport" content="width=device-width, initial-scale=1"

只要每個(gè)頁(yè)面都加上這樣的標(biāo)簽頭,電腦端和手機(jī)端的效果就會(huì)保持一致，加了標(biāo)簽頭

滿意請(qǐng)采納

求 懂前端的大神：如何用bootstrap框架 寫出如下的手機(jī)端頁(yè)面呢？

引入bootstrap填寫如下類名

.col-xs-數(shù)字 .col-sm-數(shù)字 .col-md-數(shù)字 .col-lg-數(shù)字

bootstrap是12列柵格

xs代表超小屏幕 手機(jī) (768px)

sm小屏幕 平板 (≥768px)

md中等屏幕 桌面顯示器 (≥992px)

lg大屏幕 大桌面顯示器 (≥1200px)

一行四個(gè)數(shù)字取3就行了

一行6個(gè)數(shù)字 取2

以此類推

關(guān)于bootstrap手機(jī)端模板和bootstrap 手機(jī)模板的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。