上一篇<<旺财速啃H5框架之Bootstrap（三）>>已经把导航做了，接下来搭建内容框架....

对于不规整的网页，要做成自适应就有点玩大了.... 例如下面这种版式的页面....

对于这样的网站，要做成自适应，那你得多花点精力了，当然我不讲这个。。。

所以这里肯定是对那种“列很规律”的网站，例如cnblogs首页的版式，分左，中，右

由于中国传统艺术版本，或习惯什么的，很多东西都讲对称性，所以几乎所有网站都是很规律的，说多了，直接上（这里我只写主要CSS）

<div class="container">

    <div class="row" >

        <div class="col left"></div>

        <div class="col center"></div>

        <div class="col right"></div>

    </div>

</div>

Container定义了一个容器，看相关CSS定义：

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

@media (min-width: 768px) {

  .container {

    width: 750px;

  }

}

@media (min-width: 992px) {

  .container {

    width: 970px;

  }

}

@media (min-width: 1200px) {

  .container {

    width: 1170px;

  }

}

在768px以上，宽度固定750px

在992px以上，宽度固定970px

在1200px以上，宽度固定1170px

可以看出在电脑上容器宽度都是固定的

如果你不想做这种固定宽度，而是全屏的页面，那么定义container容器就不行了，外面的容器宽度就得是百分比形式。

下面我改进：

<div class="container wrap">

    <div class="row" >

        <div class="col left"></div>

        <div class="col center"></div>

        <div class="col right"></div>

    </div>

</div>

注意：采用的是CSS重写（覆盖），引入CSS的时候一定要放到bootstrap.min.css的后面

我这里就直接写在页面上了,看我写的CSS样式：

.wrap{

  width:100%;  /* 覆盖container的宽度 */

}

.wrap .left{

  width:14%;

  margin-right:1%;

}

.wrap .center{

  width:65%;

}

.wrap .right{

  margin-left:1%;

  width:19%;

}

/* 最大宽度768的设备，只显示中间，其它情况自己添加，注意先后顺序。 */

@media (max-width: 768px) {

  .wrap .center{

     width:100%;

  }

  .wrap .left,.wrap .right{

     display:none;

  }

}

这里我就不去详细考虑每一个设备情况了。

完整案例来一个：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 响应式的导航栏</title>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

    <link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <style type="text/css">

    .col{min-height: 580px; float: left;}

    .left,.right{background-color: #e6e6e6;}

    .center{background: #000;}

    .row{margin: 0;}

    .wrap{

      width:100%;  /* 覆盖container的宽度 */

    }

    .wrap .left{

      width:14%;

      margin-right:1%;

    }

    .wrap .center{

      width:65%;

    }

    .wrap .right{

      margin-left:1%;

      width:19%;

    }

    /* 最大宽度768的设备，只显示中间 */

    @media (max-width: 768px) {

      .wrap .center{

         width:100%;

      }

      .wrap .left,.wrap .right{

         display:none;

      }

    }

    </style>

</head>

<body>

<nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

                <span class="sr-only">切换导航</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand active" href="javascript:;">教程</a>

        </div>

        <div class="collapse navbar-collapse" id="example-navbar-collapse">

            <ul class="nav navbar-nav">

                <li class="active"><a href="javascript:;">iOS</a></li>

                <li><a href="javascript:;">SVN</a></li>

                <li class="dropdown">

                    <a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a>

                    <ul class="dropdown-menu">

                        <li><a href="javascript:;">jmeter</a></li>

                        <li><a href="javascript:;">EJB</a></li>

                        <li><a href="javascript:;">Jasper Report</a></li>

                        <li class="divider"></li>

                        <li><a href="javascript:;">分离的链接</a></li>

                        <li class="divider"></li>

                        <li><a href="javascript:;">另一个分离的链接</a></li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</nav>

<div class="container wrap">

    <div class="row" >

        <div class="col left"></div>

        <div class="col center"></div>

        <div class="col right"></div>

    </div>

</div>

</body>

</html>

查询效果：《猛点这里》

改变窗口大小看效果

如果你想做得更加到位，页面缩放后版式更加和谐，你可以更详细的针对不同设备写不现的样式，但要注意先后顺序哦~~~

OK，框架搭建好了，这些框架仅仅是“整体框架”，就好比房子的地基、梁柱之类的，那么接下来向里面插入“内容框架”，内容框架当然是直接或间接与内容有关系的框架

当大框架没有固定宽度的情况下，里面的内容框架宽度能固定宽度么？要记住，外面的框架在没有宽度的情况是会被里面的内容影响的（特别指浮动元素），块元素的话不用设置宽度，就让它默认为父容器的宽度就OK。

有的人发现上面有点问题：

缩小后，出现下拉导航会把下面给抵下去。。。   这种问题自己都能解决的吧，不是大问题，我也只能说，“你”太懒了，这样学东西可不行。。。   OK~~~ ，我稍微调整一下，看下面完整代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 响应式的导航栏</title>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

    <link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <style type="text/css">

    .col{min-height:580px; float: left;}

    .left,.right{background-color: #e6e6e6;}

    .center{background: #000;}

    .row{margin: 0;}

    .wrap{

      width:100%;  /* 覆盖container的宽度 */

    }

    .wrap .left{

      width:14%;

      margin-right:1%;

    }

    .wrap .center{

      width:65%;

    }

    .wrap .right{

      margin-left:1%;

      width:19%;

    }

    /* 最大宽度768的设备，只显示中间 */

    @media (max-width: 768px) {

      .wrap .center{

         width:100%;

      }

      .wrap .left,.wrap .right{

         display:none;

      }

      .container-fluid{

          position: relative;

      }

      .navbar-collapse{

          position: absolute;

          width: 100%;

          background-color: #FFF;

      }

    }

    </style>

</head>

<body>

<nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

                <span class="sr-only">切换导航</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand active" href="javascript:;">教程</a>

        </div>

        <div class="collapse navbar-collapse" id="example-navbar-collapse">

            <ul class="nav navbar-nav">

                <li class="active"><a href="javascript:;">iOS</a></li>

                <li><a href="javascript:;">SVN</a></li>

                <li class="dropdown">

                    <a href="javascript:;"class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a>

                    <ul class="dropdown-menu">

                        <li><a href="javascript:;">jmeter</a></li>

                        <li><a href="javascript:;">EJB</a></li>

                        <li><a href="javascript:;">Jasper Report</a></li>

                        <li class="divider"></li>

                        <li><a href="javascript:;">分离的链接</a></li>

                        <li class="divider"></li>

                        <li><a href="javascript:;">另一个分离的链接</a></li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</nav>

<div class="container wrap">

    <div class="row" >

        <div class="col left"></div>

        <div class="col center"></div>

        <div class="col right"></div>

    </div>

</div>

</body>

</html>

查询效果：《猛点这里》

相信你已经知道自适应是怎么回事了吧，是不是不用框架也能去写了呢？ 如果不行的话，接受留级吧~~~，你的问题是不是在于：不自学、不总结、不脚踏实地、只看不练、不…只ctrl+v，不查手册只度娘… ……………………………….不想说你了。。。

今天over~~~

旺财速啃H5框架之Bootstrap（四）的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  3. 旺财速啃H5框架之Bootstrap（六）

    年后太忙,一直没有更新 好,这篇结束,速啃嘛,就应该拿重点,实用点.继续之前的内容,接着来讲讲网页中常用的布局组件与插件,我喜欢用简单的直接的话或案例来说明,就是针对那些想快速能做出点东西的人而准备的 ...

  4. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  5. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  6. H5框架之Bootstrap（二）

    H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经 ...

  7. H5框架之Bootstrap（一）

    H5框架之Bootstrap(一) 接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了 ...

  8. 关于H5框架之Bootstrap的小知识

    浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 &l ...

  9. 前端（三大框架、Bootstrap，jQuery，自整理）

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

随机推荐

  1. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  2. 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  3. Microsoft Loves Linux

    微软新任CEO纳德拉提出的“Microsoft Loves Linux”,并且微软宣布.NET框架的开源,近期Microsoft不但宣布了Linux平台的SQL Server,还宣布了Microsof ...

  4. 2D、3D形变

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...

  5. mysql 7下载安装及问题解决

    mysql 7安装及问题解决 一.mysql下载 下载地址:https://www.mysql.com/downloads/ Community (GPL) Downloads MySQL Commu ...

  6. LeetCode 7. Reverse Integer

    Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 Have you ...

  7. 【开源】.net 分布式架构之监控平台

    开源地址:http://git.oschina.net/chejiangyi/Dyd.BaseService.Monitor .net 简单监控平台,用于集群的性能监控,应用耗时监控管理,统一日志管理 ...

  8. mybatis_开发篇

    一.使用mybatis的动态代理方式开发 需求:这里以crm系统中分页条件查询所有的客户信息的功能为例? 1.创建工程 2.引入所需的jar包 3.引入日志文件.数据库连接参数的配置文件等 4.创建m ...

  9. H5坦克大战之【玩家控制坦克移动】

    自从威少砍下45+11+11的大号三双之后,网上出现了各种各样的神级段子,有一条是这样的: 威少:Hey,哥们,最近过得咋样! 浓眉:对方开启了好友验证,请先添加对方为好友 威少:...... JRS ...

  10. java中if和switch哪个效率快

    首先要看一个问题,if 语句适用范围比较广,只要是 boolean 表达式都可以用 if 判断:而 switch 只能对基本类型进行数值比较.两者的可比性就仅限在两个基本类型比较的范围内.说到基本类型 ...