2019-05-01 20:39:13 weixin_43751710 阅读数 3467

使用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>
2019-01-18 00:09:41 weixin_42354735 阅读数 8170

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

 

2019-03-18 16:34:33 weixin_44794651 阅读数 30

1、Bootstrap简介:
Bootstrap是由美国Twitter公司开发的简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
Bootstrap是HTML5, CSS3.0组件, JavaScript插件的集合、Bootstrap用于开发响应式布局、移动设备优先的 WEB 项目:
2、Bootstrap的特点:
Bootstrap是基于jQuery的,它浏览器兼容性好,自适应,移动设备优先,广泛的插件支持,还有最重要的一点:开放源码,就是说我们可以研究它的源码。
3、Bootstrap的官方网站:
官方中文网: http://www.bootcss.com
官方英文网: http://getbootstrap.com/
GitHub地址: https://github.com/twbs/bootstrap
4、Bootstrap的下载地址:
下载地址: https://v3.bootcss.com/getting-started/#support

2016-06-25 14:38:41 hunannanhu 阅读数 3514

最近在研究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

2013-08-22 10:55:16 tigerlgf 阅读数 1912

bootstrap是一个很好的前端UI开发框架,特别在开发自适应网页应用盛广.我们项目在开发中碰到一小问题:bootstrap在windows phone 8整个屏幕变得很小.原因是:

bootstrap.css文件中有这样一行代码:

@-ms-viewport {
  width: device-width;
}

这行代码作用是:页面宽度被设置成设备的宽度.而在实际中,我并不是我想要的结果,我们需要根据我的网页内容自动适应.

下面的解决方案代码(放在header里脚本中):


if (navigator.userAgent.match(/IEMobile\/10\.0/)) {

  var msViewportStyle = document.createElement("style");
  msViewportStyle.appendChild(
    document.createTextNode(
      "@-ms-viewport{width:auto!important}"
    )
  );
  document.getElementsByTagName("head")[0].
    appendChild(msViewportStyle);
}

Bootstrap 框架-排版

阅读数 875

Bootstrap使用心得

阅读数 309

Bootstrap

阅读数 12

没有更多推荐了,返回首页