bootstrap自适应兼容_bootstrap4兼容bootstrap3吗 - CSDN
精华内容
参与话题
  • 最近在研究Bootstrap(官方,Github) 这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜 单、按钮组、按钮下拉菜单、导航、导航条、面包...

    最近在研究Bootstrap(官方Github) 这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜 单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等。Bootstrap他们预先定义好,等要进行正 式制作网页的时候,我们可以直接用里面的class就可以了。

    今天不多介绍Bootstrap的功能,以后有机会可以重点介绍一下,确实十分优秀。响应式布局,定制性强,组件丰富,与Jquery完美契合。

    进入主题,说说Bootstrap 3的兼容IE8问题。

    Bootstrap是一个响应式的布局,你可以在宽屏电脑、普通电脑,平板电脑,手机上都得到非常优秀的布局体验。这种响应式的布局正是通过 CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式。IE8浏览器并不支持这一优秀的Css3特性,Bootstrap在开发文档中写了如何使用 进行兼容IE8。但是笔者多次尝试没有成功,IE8的布局是乱的。直到今天忍无可忍,决定再尝试一下,最终获得成功。有些细节没有注意到,导致IE8没法 响应式布局。

    下面讲解下如何让Bootstrap 3兼容IE8浏览器,至于有人会问我如何兼容IE6 IE7,请绕道搜索bsie (bootstrap2)。

    Bootstrap在IE8中肯定不如Chrome、Firefox、IE11那么完美,部分组件不保证完全兼容,还是要Hack的。这里不谈。

    1、使用html5文档声明

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
     
    </body>
    </html>

    2、加入meta标签

    前者定义媒体查询,后者确定显示此网页的IE版本。

    展开代码
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    3、引入bootstrap文件

    这步十分重要,这里要看你是引用其他网站(CDN)的bootstrap文件还是把Bootstrap文件放本地。这里我放在本地。

    4、引入respond.js 和 html5.js

    respond.jsGithub)是用于媒体查询的,项目说明描述:要和需要进行媒体查询的文件放在同一域中。不然CDN部署的需要更改一些选项,之后再说。

    html5shiv : html5.js(Google Code)(Github)是让不(完全)支持html5的浏览器“支持”html5标签。

    <!--[if lte IE 9]>
    <script src="bootstrap/js/respond.min.js"></script>
    <script src="bootstrap/js/html5.js"></script>
    <![endif]-->

    4.1 CSS文件在CDN上(或子域名)的Respond.js部署

    详情请见:https://github.com/scottjehl/Respond#cdnx-domain-setup Github上说,这个js是通过ajax复制一份你的css文件。所以需要一个代理页面去请求文件。需要上传一些文件,步骤比较复杂,而且一般公共CDN基本没人有这种操作权限。之后再添加代码。

    <!-- Respond.js proxy on external server -->
    <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
     
    <!-- Respond.js redirect location on local server -->
    <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
     
    <!-- Respond.js proxy script on local server -->
    <script src="/path/to/respond.proxy.js"></script>

    5、添加1.X版本的Jquery库

    Jquery 2.0以上就不再支持IE 6/7/8 这三大虐心神器了。所以要想使用Bootstrap3中的一些插件效果,比如modal 弹出层对话框这类控件。我们就需要添加 2.0以下的,这里我用1.10.2的Jquery库。
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>

    6、总结

    本人非前端工程师,只是爱好者一枚,如有错误还请批评指教。大家相互学习~

    本站是采用了Powered by ASP.NET MVC4.0 + Bootstrap 3.0 但是使用了百度的公共CND、因为上面说了 没有权限所以本站IE8下的问题还存在。但是此篇博文可以帮你解决在IE8下未能自适应的问题

    主要还是在于让respond.js起效果,关键就是让bootstrap的文件和respond.js同域,不同域需要用CDN上的html做ajax。

    懒人代码总结如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Jophy" />
    <title>ie8</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/css/style.css">
    <!--[if lte IE 9]>
    <script src="bootstrap/js/respond.min.js"></script>
    <script src="bootstrap/js/html5.js"></script>
    <![endif]-->
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    </body>
    </html>
    原文链接:http://www.bianyun.net/zhanzhang/article/11034.html

    展开全文
  • 通过响应式开发使得一个网站能够兼容多种终端。 通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验,屏幕尺寸不一样展示给用户的网页内容也不一样,我们利用媒体查询可以检测到屏幕的尺寸(主要检测宽度...

          在移动终端设备起来越多的今天,如果要针对做所有屏幕去适配开发成本太大。通过响应式开发使得一个网站能够兼容多种终端。 通过响应式布局能使网站在电脑、平板和手机上有更好的阅览体验,屏幕尺寸不一样展示给用户的网页内容也不一样,我们利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。

    响应式开发的原理:媒体查询

          媒体查询,查询到当前屏幕(媒介媒体)的宽度,针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。简单说,你可以设置 不同屏幕下面的不同的样式,达到适配不同的屏幕的目的。

    实现方式:通过查询screen的宽度来指定某个宽度区间的网页布局。

    超小屏幕      (移动设备)         w<768px
    小屏设备    768px-992px          768 <= w <992
    中等屏幕    992px-1200px     992 =< w <1200
    宽屏设备    1200px以上      w>=1200
    CSS 语法:

    @media mediatype and|not|only (media feature) {
    
        CSS-Code;
    
    }
    值    描述
    device-height    定义输出设备的屏幕可见高度
    device-width     定义输出设备的屏幕可见宽度
    max-device-height     定义输出设备的屏幕可见的最大高度
    max-device-width   定义输出设备的屏幕最大可见宽度
    min-device-width   定义输出设备的屏幕最小可见宽度
    min-device-height    定义输出设备的屏幕的最小可见高度
    max-height  定义输出设备中的页面最大可见区域高度
    max-width    定义输出设备中的页面最大可见区域宽度
    min-height 定义输出设备中的页面最小可见区域高度
    min-width  定义输出设备中的页面最小可见区域宽度

    简单举例:控制不同屏幕尺寸下的屏幕背景色

    <style>
        .container{
            width:1200px;
            margin: 0 auto;
            height:1200px;
            background-color: red;
        }
        /*媒体查询:注意and后面空格的添加*/
        /*iphone: w < 768px*/
        @media screen and (max-width: 768px){
            .container{
                width:100%;
                background-color: green;
            }
        }
        /*pad: w >= 768  && w< 992*/
        @media screen and (max-width: 992px) and (min-width: 768px) {
            .container{
                width:750px;
                background-color: blue;
            }
        }
        /*中等屏幕   w >= 992  && w<1200*/
        @media screen and (max-width: 1200px) and (min-width: 992px) {
            .container{
                width:970px;
                background-color: pink;
            }
        }
    </style>

     

    展开全文
  • <!...<...<head> <title>Bootstrap 实例 - 手机、平板电脑、台式电脑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-...

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 实例 - 手机、平板电脑、台式电脑</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">

    <div class="row">

    <div class="col-xs-6 col-sm-3 col-md-6 col-lg-9"
    style="background-color: #dedef8;
    box-shadow: inset 1px -1px 1px #444,
    inset -1px 1px 1px #444;">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
    </p>

    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
    quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.
    </p>
    </div>

    <div class=" col-xs-6 col-sm-9 col-md-6 col-lg-3"
    style="background-color: #dedef8;
    box-shadow: inset 1px -1px 1px #444,
    inset -1px 1px 1px #444;">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium.
    </p>

    <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
    consectetur, adipisci velit, sed quia non numquam eius modi
    tempora incidunt ut labore et dolore magnam aliquam quaerat
    voluptatem.
    </p>

    转载于:https://www.cnblogs.com/qinglin/p/9680346.html

    展开全文
  • Bootstrap自适应导航栏(带搜索框)

    万次阅读 2019-05-06 20:43:40
    使用Bootstrap创建的导航栏,最为原始的,没有任何的自定义颜色什么的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--声明文档兼容模式,表示使用IE浏览器的...

    使用Bootstrap创建的导航栏,最为原始的,没有任何的自定义颜色什么的
    电脑版样图
    电脑版
    手机版样图
    手机版

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<!--声明文档兼容模式,表示使用IE浏览器的最新模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--Responsive layout:响应式布局-->
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>蜗壳</title>
    
    	<!-- 引入Bootstrap核心样式文件 -->
        <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <!-- 添加navbar-fixed-top可以让导航条一直固定在顶部,不会因为滚动条改变而改变,navbar-inverse让导航条黑底展示 -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">  <!-- container让导航条居中container-fluid让导航条自适应 -->  
        <div class="navbar-header">
           <!-- 代表响应式布局:当浏览器宽度小于某个值时导航栏折叠变成三道杠 -->
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">
                    <span class="sr-only navbar-left">切换导航</span>
                    <span class="icon-bar navbar-left"></span>
                    <span class="icon-bar navbar-left"></span>
                    <span class="icon-bar navbar-left"></span>
                </button>
           <!-- //代表导航栏左侧logo或者图标  -->   
           <!-- <a class="navbar-brand" href="http://www.baidu.com">浏览器博物馆</a> -->
                <span class="navbar-brand">蜗壳</span>
            </div>
        <!-- //导航条内容,为了响应式布局,点击三道杠弹出导航栏 -->
            <div>           
            <!-- //代表导航栏中的项目 -->
           <ul class="nav navbar-nav collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <li><a href="www.baidu.com"><span class="glyphicon glyphicon-home"></span>二手市场</a></li>
                    <li><a href="www.baidu.com"><span class="glyphicon glyphicon-globe"></span>活力圈子</a></li>         
                    <li><a href="www.baidu.com"><span class="glyphicon glyphicon-bell"></span>消息列表</a></li>
                    <li><a href="www.baidu.com"><span class="glyphicon glyphicon-user"></span>个人中心</a></li>
                </ul>
                <!-- 搜索框 -->
                <form class="navbar-form navbar-left" role="search">
    		       <div class="form-group">
    			        <input type="text" class="form-control" placeholder="Search">
    			        <button type="submit" class="btn btn-default">搜索</button>
    		       </div>
    		       
    	       </form>
    	       <!-- 登录注册 -->
    	       <!-- <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 登录</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
               </ul> -->
            </div>
        </div>
    </nav>
    
    <!-- 引入jQuery核心js文件 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>
    
    展开全文
  • 随着移动端市场的强势崛起,web的开发也变得愈发复杂,对于个体开发者来说,自己开发的网站,在电脑、手机、Pad...今天,我通过自己的实践,简单的探探boostrap的自适应功能,这也是众多平台中,我认为比较好的一个...
  • bootstrap-自适应企业网站demo(一)

    千次阅读 2018-05-02 14:12:11
    1.获取bootstrap文件 英文官网:http://getboostrap.com 中文官网:http://www.bootcss.xom2.开发工具 ... 将下载的bootstrap文件解压,将文件夹下的css、fronts、js文件夹拷贝到项目下。 在项目下创建index.xm...
  • 1、html布局源码: <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">...meta name="viewport"...
  • div模拟textarea文本域轻松实现高度自适应 关键词:contenteditable 亲测好用! 一、关于textarea文本域以及高度自适应 textarea标签为表单元素,一般用在多行文字的输入。在web应用上常见的是评论...
  • BootStrap中轮播图的图片自适应问题

    千次阅读 2019-05-30 20:42:20
    BootStrap中轮播图的图片自适应问题 轮播图代码如下: &lt;div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0&...
  • bootstrap适配移动端

    千次阅读 2019-01-09 01:46:48
    上次在pythonanywhere上挂上去的页面,是这个样子的 而在手机上看是这个样子的...在bootsrtap首页找到一个叫bootstrap表单构造器的玩意儿,好像能够拿来用用。。 于是在深夜我搭了一个这种玩意儿 好吧确实...
  • h5 css3自适应 兼容IE8以上

    千次阅读 2018-03-28 10:58:45
    &lt;!DOCTYPE html&gt; &lt;!--HTML5标准声明--&gt;&lt;html lang="zh-CN"&gt; &lt;!--设置语言为中文--&gt;head部分: &lt;meta http-equiv="... &am
  • 在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下。  页面html节点上要有 iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx" frameborder="0" ...
  • 栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。 1692年,新登基的法国国王路易十四感到法国的...
  • 今天有朋友问到我关于“iframe自适应高度”的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定。期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动...
  • ----------------中国加油!陕西加油!武汉加油!!!------------------------------------- 上图 上代码 <!DOCTYPE html> <html> <...meta name="viewport" content="width=...
  • 移动端适配用:rem 自使用布局用:bootstrap 转载于:https://www.cnblogs.com/theone67/p/8479075.html
  • 最近想做一个购物车,看了很多帖子和博客,发现大部分购物车要么无法适应手机端,要么缺乏一些功能,或者做的不够美观(当然我这个...bootstrap和jquery源码可官网上自行下载,这里就不贴出来了 bootstrap: jquery 废话
  • 非js实现iframe高度自适应实现

    千次阅读 2011-09-15 15:24:50
    问问题的人也非常之多,解决办法也是五花八门,但基本上都是用js获取子页面高度再设置iframe的高度来实现的,这种实现方式,维护成本比较高,而且兼容性也很难保证,此文提供兼容浏览器的非js实现iframe高度自适应的...
  • 一、作为一个之前没有真正实践项目的前端新手,这次在实践的时候就发现了一个严重的问题——兼容性。 开发者在前端开发,调试的时候,使用的基本都是谷歌、火狐这种开发者浏览器,忽略了其实我们国内主流的浏览器...
1 2 3 4 5 ... 20
收藏数 3,781
精华内容 1,512
关键字:

bootstrap自适应兼容