本篇文章給大家談談bootstrap手機端模板，以及bootstrap 手機模板對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

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

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

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

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

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

/* 超小屏幕（手機，小于 768px） */

/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優(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設計的頁面在手機端也能響應式自適應

你好

怎樣讓bootstrap設計的頁面不僅在電腦瀏覽器是響應式在手機端也是響應式呢？

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

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

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

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

為什么會這樣呢？

為什么bootstrap設計出來的頁面樣式雖然都一樣,但是在手機端

顯示的只是整個頁面都縮小而不是響應式的呢？

后來才發(fā)現(xiàn)凡是bootstrap設計的頁面都帶有標簽頭:

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

只要每個頁面都加上這樣的標簽頭,電腦端和手機端的效果就會保持一致，加了標簽頭

滿意請采納

求 懂前端的大神：如何用bootstrap框架 寫出如下的手機端頁面呢？

引入bootstrap填寫如下類名

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

bootstrap是12列柵格

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

sm小屏幕 平板 (≥768px)

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

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

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

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

以此類推

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