内容 参数
  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. JavaScript 创建和浅析自定义对象

    在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式:对象直接量.new 构造函数.Objec ...

  2. dp入门 石子相邻合并 详细带图讲解

    题目: 有N堆石子,现要将石子有序的合并成一堆,规定如下: 1.每次只能移动相邻的2堆石子合并  2.合并花费为新合成的一堆石子的数量. 求将这N堆石子合并成一堆的总花费最小(或最大). 样例: 输入 ...

  3. 大话设计模式C++ 备忘录模式

    备忘录(Memento):在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将对象恢复到原先保存的状态. 角色: (1)Originator(发起人):创建盒子, ...

  4. redis 知识点

    默认端口  6379 单个value 最大可以保存1G 默认RDB(异步刷盘方式) 禁用持久化修改redis.conf,找到save配置,改为save "" 即可 1. 特点 Re ...

  5. Error resolving version for plugin 'org.codehaus.mojo:tomcat-maven-plugin'

    从 SNV 导入新工程后,启动工程,但 Maven 报错: Error resolving version for plugin 'org.codehaus.mojo:tomcat-maven-plu ...

  6. 20165316 预备作业3 Linux安装及学习

    Linux安装 我下载的是VirtualBox 5.2.6和Ubuntu 17.10.1,感觉这两个版本的兼容性不是太好,因为我在Oracle的官网社区中看到不少新版本的问题没有得到解决,而老版本(V ...

  7. 以太坊智能合约开发，Web3.js API 中文文档 ethereum web3.js入门说明

    以太坊智能合约开发,Web3.js API 中文文档 ethereum web3.js入门说明 为了让你的Ðapp运行上以太坊,一种选择是使用web3.js library提供的web3.对象.底层实 ...

  8. Shell变量相关

    li@ubuntu:~/test$ vi test.sh li@ubuntu:~/test$ cat test.sh #!/bin/bash #shell变量不加引号;加单引号;加双引号都行 url= ...

  9. 一起学习在 Ubuntu 上授予和移除 sudo 权限

    如你所知,用户可以在 Ubuntu 系统上使用 sudo 权限执行任何管理任务.在 Linux 机器上创建新用户时,他们无法执行任何管理任务,直到你将其加入 sudo 组的成员.在这个简短的教程中,我 ...

  10. 关于mapreducer 读取hbase数据 存入mysql的实现过程

    mapreducer编程模型是一种八股文的代码逻辑,就以用户行为分析求流存率的作为例子 1.map端来说:必须继承hadoop规定好的mapper类:在读取hbase数据时,已经有现成的接口 Tabl ...