内容 参数
  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. MyBatis基础入门《十二》删除数据 - @Param参数

    MyBatis基础入门<十二>删除数据 - @Param参数 描述: 删除数据,这里使用了@Param这个注解,其实在代码中,不使用这个注解也可以的.只是为了学习这个@Param注解,为此 ...

  2. JavaScript 函数声明与函数表达式的区别 函数声明提升（function declaration hoisting）

    解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问).至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真的被 ...

  3. STL容器vector应用注意事项

    [1]提前分配足够空间以免不必要的重新分配和复制代价 关于vector容器重新分配和复制及析构释放的代价,请参见随笔<STL容器之vector>. 应用示例对比代码如下: #include ...

  4. python 某个目录下的所有文件列表

    使用os.listdir() 函数来获取某个目录中的文件列表 import os names = os.listdir('somedir') 结果会返回目录中所有文件列表,包括所有文件,子目录,符号链 ...

  5. Linux服务器---流量监控MRTG

    MRTG MRTG可以分析网络流量,但是它必须依赖SNMP协议.将收集到的数据生成HTML文件,以图片的形式展示出来 1.安装一些依赖软件 [root@localhost bandwidthd-2.0 ...

  6. @Transactional noRollbackFor

    网上查资料看的也是云里雾里的. 比如说: @Transactional(noRollbackFor=ProcessException.class) 那他是什么意思呢? 一句话,在你声明的这个事物里如果 ...

  7. window、linux安装jdk,excel 导入oracle,WebService，window 端口查看，svn服务安装，oracle用户解锁

    内存泄露分析插件http://download.eclipse.org/mat/1.3/update-site/birt插件http://download.eclipse.org//birt/upda ...

  8. 洛谷 P1015 回文数

    #include<iostream> #include<cstdio> #include<cmath> #include<string> #includ ...

  9. storm的trident编程模型

    storm的基本概念别人总结的, https://blog.csdn.net/pickinfo/article/details/50488226 编程模型最关键最难就是实现局部聚合的业务逻辑聚合类实现 ...

  10. 使用jwt

    jwt:json web token 使用jwt的好处1,无状态2解耦3,更适合于移动端Android,ios4,性能更好5,能够不考虑csrf攻击 ①,客户端请求 Date date = new D ...