好多天没有写了，继续走起

在上一篇<<旺财速啃H5框架之Bootstrap（二）>>中已经把CSS引入到页面中，接下来开始写页面。

首先有些问题要先处理了，问什么你要学bootstrap？ 流行？写网页快？还是其它什么的？说实话，如果写页面很熟练的人（牛人），根本不会用任何框架写，为什么呢，它们太臃肿了，谁写一个页面能把它所有的CSS都应该用上，所有的类都定义上呢？所以很多代码对于页面来说都是多余的，还好上线后，引入的都是资源库，如果你有代码精简强迫症，那估计你要重写（覆盖）一些东西了（注明：其实我大部分时间都在搞后台，前台也只是略懂，高手勿喷，有讲得不对的地方，大胆指正，虚心学习。）

什么是自适应？

我相信这也是你的目的，要做一个自适应的网站，手机（微小设备）、平板（小设备）、一般电脑（中型设备）、大显示器（大型设置）等都能很好的显示，现在一般都是如下两种方式

第一种：不同设备各一套

第一想到的是麻烦，没办法，像有的网站（比如商城），网站跟手机显示的样式或内容有很大区别，做一套？行吗？... 想到这里，你肯定很只能屈服了，好吧，这种我不多说。

第二种：所有设备全一套

这种你肯定看到就高兴了，但这种网站要看页面数据来，不是所有类型的网站都适合，现在CMS系统这样做的比较多。

想到是自适应，所先在写CSS容器的时候不能把宽度固定死，那怎么办？肯定百分比呀。

我怎么觉得废话有点多了，打了这么多字....开干，这里肯定只说第二种情况的

做一个自适应的导航，直接看代码：

<!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>

</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>

</body>

</html>

查看效果，《猛点这里》

说明：

Nav标签定义导航，role="navigation" 告诉浏览器这是一个导航容器。然后在里面定义一个container-fluid，名义上为不固定（会变化）容器，1411行代码：

.container-fluid {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

只定义了内边距，外边距自动，说明它的宽度是父容器的100%，自然会随浏览器窗口大小变化而变化了。

缩小窗口看看效果：

左边栏目图标缩小到一定大小后就会显示，看关键代码4022行：

@media (min-width: 768px) {

  .navbar-toggle {

    display: none;

  }

}

如果它的宽度大于768就隐藏了，反之显示。

点击图标显示下拉子导航功能，这个当然是js的效果了。

澄清一下：自适应其实就是在改变浏览器（设备）大小的情况下，应用不同的CSS样式，把范围大的写上面，特殊的写下面，后面的样式覆盖前面的，看CSS源码里面也有大量的层级关系的定义（比如.navbar-nav .open .dropdown-menu），这就意味着dropdown-menu类父级里面必须得有open类，open父级里面必须得有navbar-nav才行，要不然并卵。也就意味着很多写法要按要求来。

上面的案例去看一下它的应用样式，不是好多呀，看得头都晕，哈哈，这就是框架，把不同的设备考虑进去了，自然代码就多啦。

有没有人想到说麻烦，自己写得了，对呀，高手都是自己写的~~~，但框架那时给我们的好处就只体现在速度上了，写网页快。

回头我有空从0写一个自适应的CSS，只写部分，让某些童鞋知道是怎么回事就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>

</head>

<body>

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

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">教程</a>

        </div>

    <div>

    <ul class="nav navbar-nav">

      <li class="active"><a href="#">iOS</a></li>

      <li><a href="#">SVN</a></li>

      <li class="dropdown">

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">

          Java <b class="caret"></b>

        </a>

        <ul class="dropdown-menu">

          <li><a href="#">jmeter</a></li>

          <li><a href="#">EJB</a></li>

          <li><a href="#">Jasper Report</a></li>

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

          <li><a href="#">分离的链接</a></li>

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

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

        </ul>

      </li>

    </ul>

  </div>

  </div>

</nav>

</body>

</html>

查询效果：《猛点这里》

固定功能关键代码3956行：

.navbar-fixed-top,

.navbar-fixed-bottom {

  position: fixed;

  right:;

  left:;

  z-index:;

}

position: fixed;      // 相对浏览器进行绝对定位

如果你对定位不熟悉，点这里看看。

Bootstrap框架导航栏就写这么点，想看更多详细的导航栏效果，请看：http://noob.d8jd.com/noob/5/123.html

导航栏有了，接下来的部分我将介绍如何写主体部分。

有问题大胆留言，虚心学习~~~

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

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

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

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

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

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

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

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

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

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

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

  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. Npm包的开发

    个人开发包的目录结构 ├── coverage //istanbul测试覆盖率生成的文件 ├── index.js //入口文件 ├── introduce.md //说明文件 ├── lib │   ...

  2. 从Membership 到 .NET4.5 之 ASP.NET Identity

    我们前面已经讨论过了如何在一个网站中集成最基本的Membership功能,然后深入学习了Membership的架构设计.正所谓从实践从来,到实践从去,在我们把Membership的结构吃透之后,我们要 ...

  3. SSH实战 · 唯唯乐购项目（上）

    前台需求分析 一:用户模块 注册 前台JS校验 使用AJAX完成对用户名(邮箱)的异步校验 后台Struts2校验 验证码 发送激活邮件 将用户信息存入到数据库 激活 点击激活邮件中的链接完成激活 根 ...

  4. C# 利用性能计数器监控网络状态

    本例是利用C#中的性能计数器(PerformanceCounter)监控网络的状态.并能够直观的展现出来 涉及到的知识点: PerformanceCounter,表示 Windows NT 性能计数器 ...

  5. 通过 floating IP 访问 VIP - 每天5分钟玩转 OpenStack（126）

    前面我们是直接用 curl 测试 VIP,在更为真实的场景中通常会使用 floating IP 访问 VIP. 下面我们给 VIP 关联一个 floating IP,再进行测试. 访问 Project ...

  6. CRL快速开发框架系列教程三(更新数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  7. ASP.NET Core 中文文档 第四章 MVC（4.5）测试控制器逻辑

    原文: Testing Controller Logic 作者: Steve Smith 翻译: 姚阿勇(Dr.Yao) 校对: 高嵩(Jack) ASP.NET MVC 应用程序的控制器应当小巧并专 ...

  8. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  9. ajax请求和aspx返回数据

    ajax请求: $(function () {            $.ajax({                url: "index.aspx?method=send",  ...

  10. Create a Team in RHEL7

    SOLUTION VERIFIED September 13 2016 KB2620131 Environment Red Hat Enterprise Linux 7 NetworkManager ...