今天给各位分享bootstrap手机端模板的知识，其中也会对bootstrap 手机模板进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、怎样让bootstrap设计的页面在手机端也能响应式自适应
• 2、bootstrap pc端显示成手机端的样式 样式都乱了，我看了一下加载的是col-xm-12
• 3、用bootstrap框架能不能开发手机端页面
• 4、dedecms做的网站怎么生成移动端页面
• 5、Bootstrap模板下载后怎么使用.(网上别人做好的模板)？
• 6、使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端

怎样让bootstrap设计的页面在手机端也能响应式自适应

默认就是可以在手机端自适应的。

注意一下它的栅栏布局里的介绍：

手机上一般是用-xs

比如：

div class="row"

div class="col-xs-12 col-md-6"在电脑上，这是半行，在手机上，这里是一行/div

div class="col-xs-12 col-md-6"/div

/div

bootstrap pc端显示成手机端的样式 样式都乱了，我看了一下加载的是col-xm-12

你打错了，应该是col-xs-12。没有xm的。

补全吧：

col-xs-N

超小屏幕 手机

(768px)

col-sm-N

小屏幕 平板

(≥768px)

col-md-N

中等屏幕 桌面显示器

(≥992px)

col-lg-N

大屏幕 大桌面显示器

(≥1200px)

用力的采纳吧~~

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

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

dedecms做的网站怎么生成移动端页面

dedecms建站移动化问题，从6.18织梦更新手机站后问题就解决了，下面是对网站系统做的一些升级记录（记得升级之前一定要备份，切记）以网站为例：

第一步：下载官方升级文件v57sp1-20150618.zip （记得升级之前一定要备份，切记）

第二步：解压覆盖原来的文件。上传到服务覆盖之前的文件。

第三步：对模板文件的修改。复制以前的老模板文件，分别加上一下代码：

首页：

meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/index.html"

script type="text/javascript"if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/index.html";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}/script

栏目页

meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}"

script type="text/javascript"if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}/script

文章页面

meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}"

script type="text/javascript"if(window.location.toString().indexOf('pref=padindex') != -1){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}/script

建议把其中的{dede:global.cfg_mobileurl/} 修改为手机站网站，例如修改成 。这代码的主要含义是手机跳转到手机页面。

对手机端模板修改，主要是添加统计代码，对css的一些调整，手机模板也存在于默认模板下.主要的有：

header_m 顶部

index_m   首页

footer_m  底部

index_default_m  列表页

修改之后覆盖。解决验证码失效问题：

直接取消验证码

1、打开 login.php 找到：

if($validate==” || $validate != $svali)

替换为：if( false )

2、在模板文件dede/templets/login.htm里去掉以下验证码的具体HTML代码：

lispan验证码：/span

   input name=”validate” type=”text” id=”vdcode” style=’width:50px;text-transform:uppercase;’ /

   img id=”vdimgck” src=”../include/vdimgck.php” alt=”看不清？点击更换” align=”absmiddle” style=”cursor:pointer” onclick=”this.src=this.src+’?'” /

/li

第四步：把二级目录变为二级域名，就可以方位手机站了。网址： 为了更友好，可以把二级目录变为二级域名。

1、解析二级域名到服务器IP。

2、解决图片不显示的问题。

把图片变成绝对地址

改目录include下的文件extend.func.php，在最后面添加一个函数方法

function replaceurl($newurl)

{

$newurl=str_replace('src="/uploads/allimg/','src="http://你的域名/uploads/allimg/',$newurl);

return $newurl;

}

另外调用文章正文内容的标签{dede:field.body/}

需要改成： {dede:field.body function='replaceurl(@me)'/}

此方法可以适用于任何调用绝对路径图片的页面。

手机访问网站时就会自动跳转到手机站网址了。其他问题可以去DEDECMS官方论坛看看，或者百度搜索基本上都能找到答案。

Bootstrap模板下载后怎么使用.(网上别人做好的模板)？

模板使用首先要看你后台使用是什么程序，如果是php，python等，你可能需要修改html代码，进行一些变量的替换。

如果是前后端分离架构，你可能需要根据接口情况，适当修改html代码，将一部分代码数据通过ajax进行请求获取。

模板嵌套最重要的就是通过控制台查看路径是否正确，如果不正确，页面加载的时候css，图片等样式就会出现问题。

使用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手机端模板的信息别忘了在本站进行查找喔。