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

在上一篇<<旺财速啃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. win10 环境 gitbash 显示中文乱码问题处理

    gitbash 是 windows 环境下非常好用的命令行终端,可以模拟一下linux下的命令如ls / mkdir 等等,如果使用过程中遇到中文显示不完整或乱码的情况,多半是因为编码问题导致的,修改 ...

  2. ImageView缩放选项

    ImageView.ScaleType 将图片边界缩放到所在view边界时的缩放选项. Options for scaling the bounds of an image to the bounds ...

  3. .NET Core中间件的注册和管道的构建（3） ---- 使用Map/MapWhen扩展方法

    .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法 0x00 为什么需要Map(MapWhen)扩展 如果业务逻辑比较简单的话,一条主管道就够了,确实用不到 ...

  4. 采用MiniProfiler监控EF与.NET MVC项目(Entity Framework 延伸系列1)

    前言 Entity Framework 延伸系列目录 今天来说说EF与MVC项目的性能检测和监控 首先,先介绍一下今天我们使用的工具吧. MiniProfiler~ 这个东西的介绍如下: MVC Mi ...

  5. 菜鸟学Struts2——零配置(Convention )

    又是周末,继续Struts2的学习,之前学习了,Struts的原理,Actions以及Results,今天对对Struts的Convention Plugin进行学习,如下图: Struts Conv ...

  6. 千呼万唤始出来，微软Power BI简体中文版官网终于上线了，中文文档也全了。。

    前几个月时间,研究微软Power BI技术,由于没有任何文档和资料,只能在英文官网瞎折腾,同时也发布了英文文档的相关文章:系列文章,刚好上周把文章发布完,结果简体中文版上线了.哈哈,心里有苦啊,早知道 ...

  7. 如何利用pt-online-schema-change进行MySQL表的主键变更

    业务运行一段时间,发现原来的主键设置并不合理,这个时候,想变更主键.这种需求在实际生产中还是蛮多的. 下面,看看pt-online-schema-change解决这类问题的处理方式. 首先,创建一张测 ...

  8. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  9. GIT笔记命令行（1）

    Git简单易用,只要输入git就可以列出他的所有参数 C:\Users\spu>git usage: git [--version] [--help] [-C <path>] [-c ...

  10. svn常用命令

    1.新建版本库 [root@localhost repos]# mkdir -p project [root@localhost repos]# svnadmin create project [ro ...