内容 参数
  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. DES加解密 cbc模式 的简单讲解 && C++用openssl库来实现的注意事项

    DES cbc是基于数据块加密的.数据块的长度为8字节64bit.以数据块为单位循环加密,再拼接.每个数据块加密的秘钥一样,IV向量不同.第一个数据快所需的IV向量,需要我们提供,从第二个数据块开始, ...

  2. VS2010 运行时 出现cmd窗口的设置方法

     项目 - 属性 -生成事件 --后期生成事件 ->命令行 (editbin /SUBSYSTEM:CONSOLE $(OUTDIR)\$(ProjectName).exe)        注: ...

  3. animator 新动画

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class Animator ...

  4. Some Useful Resources for the Future Usage

    并发编程 http://ifeve.com/ 美国各州 http://114.xixik.com/usa-stats/ 美国各州邮编zip code -> https://www.douban. ...

  5. MyEclipse10中文乱码

    1 进入window->preferences general->content types,可以设置Text对应的default encoding值为UTF-8或为空,然后点击updat ...

  6. html5-内联框架

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. javascript_函数式_链式编程

  8. eclipse 安装和使用AmaterasUML

    1. 安装AmaterasUML前,需要先安装GEF(Eclipse Graphical Editing Framework (GEF)) 采用eclipse在线安装方式安装就好. a. 查看ecli ...

  9. Hive使用pmod函数实现dayofweek函数功能

    dayofweek在hive2.2.0开始支持,低版本的hive原生未提供dayofweek函数(获取一个日期是星期几的方法),所以只有我们自己编写udf函数提供,udf就不说了,在这里给出了一个使用 ...

  10. c# 设置控件的前景颜色和背景颜色

    AutoSize:设置为false取消自动计算尺寸功能,控件的大小则按照设定的Size来呈现,设置为true自动计算大小 TextAlign:设置对齐方式 // // 摘要: // 用默认的所有者运行 ...