内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <!-- 定义导航条的部分 -->

    <!-- navbar-inverse 反色的导航条 -->

    <!-- navbar-static-top 圆角变为方角 -->

    <nav class="navbar navbar-default navbar-static-top">

        <!-- container容器，左右留有余地 -->

        <div class="container">

            <div class="navbar-header">

                <!--

                    在浏览器的宽度很小时，buttion出现。

                    图案为方框内有三道杠。

                    data-target="#TaoistsNavBar" 与 div id="TaoistsNavBar" 相对应

                    -->

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                    data-target="#TaoistsNavBar" aria-expanded="false">

                    <span class="sr-only">Toggle navigation</span>

                    <!--

                        icon-bar有一个，那个图标就有一道杠。

                        这里有三个，那么图标就有三道杠

                      -->

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

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

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

                </button>

            </div>

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

                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">谷部</a></li>

                    <li><a href="#">稻秆</a></li>

                    <li><a href="#">豆油</a></li>

                    <li><a href="#">米酒</a></li>

                    <li><a href="#">烧酒</a></li>

                    <!-- 一个下拉列表 -->

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">木部<span class="caret"></span></a>

                        <ul class="dropdown-menu">

                            <li><a href="#">松叶</a></li>

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

                            <li><a href="#">松花</a></li>

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

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

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

                            <li><a href="#">牡桂</a></li>

                        </ul>

                    </li>

                </ul>

                <!-- navbar-right:通过 CSS 设置特定方向的浮动样式。[节选自bootstrap官网]-->

                <form class="navbar-form navbar-right">

                    <div class="input-group">

                        <input type="search" name="information" class="form-control" placeholder="输入搜索的内容" />

                        <span class="input-group-btn">

                            <button class="btn btn-default">

                                <span class="glyphicon glyphicon-search"></span>

                            </button>

                        </span>

                    </div>

                </form>

            </div>

        </div>

    </nav>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 navbar 导航条 简单示例的更多相关文章

  1. Bootstrap3基础 pagination 分页按钮 简单示例

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. Python3基础 生成器推导式 简单示例

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  3. Python3基础 内嵌函数 简单示例

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  7. Bootstrap系列 -- 38. 基础导航条

    在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div), ...

  8. bootstrap学习笔记之导航条基础

    导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...

  9. 玩转Bootstrap（基础） -- （6.导航条基础）

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

随机推荐

  1. POJ 2752 Seek the Name,Seek the Fame(KMP,前缀与后缀相等)

    Seek the Name,Seek the Fame 过了个年,缓了这么多天终于开始刷题了,好颓废~(-.-)~ 我发现在家真的很难去学习,因为你还要陪父母,干活,做家务等等 但是还是不能浪费时间啊 ...

  2. Unity shader学习之Alpha Blend

    通过 ShaderLab 的 AlphaBlend 能够实现真正的半透明效果. 使用 AlphaBlend 时,需要关闭深度写入 ZWrite Off,但得非常小心物体的渲染顺序, RenderQue ...

  3. 001- CreateProcess failed with error 216 (no message available)错误详解

    问题详解 runnerw.exe: CreateProcess failed with error 216 (no message available) 看描述,创建进程失败,应该是main这个入口文 ...

  4. scrapy 参考教程及安装

    scrapy 参考教程及安装环境: win7/10 64bit, python 3.6.x教程: http://python.jobbole.com/86405/安装过程0. 预先安装 VC14 64 ...

  5. spring boot 知识点

    spring boot 好处 1. 简化配置,spring boot 提供了默认配置 例如 日志 默认logback日志  info级别 2. 简化部署,内嵌容器,tomcat,jetty,直接部署j ...

  6. .NET Core Tools for Visual Studio 2015 安装失败

    You may be blocked from installing the .NET Core Tooling Preview 2 for Visual Studio 2015 installer ...

  7. Sitecore xDB基础知识 - 识别用户，联系人，访客，客户

    体验数据库(xDB)是Sitecore平台的关键元素,特别是当您希望将解决方案提升到简单的内容管理要求之外时.它用于跟踪您的用户(即联系人,访客,客户)与您网站的互动方式.营销人员可以使用此数据来了解 ...

  8. VM VirtualBox 全屏模式 && 自动缩放模式 相互切换

    [1]自动缩放模式 热键Host + C 偶然一次机会,把虚拟机切换为了自动缩放模式,如下图: 想要再切换为全屏模式,发现不知如何操作,后来折腾了一会儿,切换成功.以此备录一下. [2]切换为全屏模式 ...

  9. c++学习笔记（八）- map

    map<key, value>是按key排好序的,key不可以重复. 1. map.lower_bound():按key查找,如果查找的key存在,返回该位置,如果不存在返回大于所查找值的 ...

  10. 为什么我们要使用HTTP Strict Transport Security？

    http://www.freebuf.com/articles/web/66827.html