本篇文章给大家谈谈bootstrap手机端模板，以及bootstrap 手机模板对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、用bootstrap框架能不能开发手机端页面
• 2、使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端
• 3、怎样让bootstrap设计的页面在手机端也能响应式自适应
• 4、求 懂前端的大神：如何用bootstrap框架 写出如下的手机端页面呢？

用bootstrap框架能不能开发手机端页面

不可以，bootstrap只是基于jQuery的一种JS框架属于网页开发脚本，不能做APP但是可以做移动端的网页，bootstrap有响应式布局可以再手机、平板和台式端以网页的形式显示。

使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端

可以用media query媒体查询来设置不同分辨率下的不同css样式

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

/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 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设计好页面,并在火狐浏览器上进行调试,效果图如下：

但是在手机端浏览的时候发现整个页面被缩小的很小,连文字都看不清：

为什么会这样呢？

为什么bootstrap设计出来的页面样式虽然都一样,但是在手机端

显示的只是整个页面都缩小而不是响应式的呢？

后来才发现凡是bootstrap设计的页面都带有标签头:

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

只要每个页面都加上这样的标签头,电脑端和手机端的效果就会保持一致，加了标签头

满意请采纳

求 懂前端的大神：如何用bootstrap框架 写出如下的手机端页面呢？

引入bootstrap填写如下类名

.col-xs-数字 .col-sm-数字 .col-md-数字 .col-lg-数字

bootstrap是12列栅格

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

sm小屏幕 平板 (≥768px)

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

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

一行四个数字取3就行了

一行6个数字 取2

以此类推

关于bootstrap手机端模板和bootstrap 手机模板的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。