<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

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

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

     <title>Document</title>

     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >

     <!--[if lt IE 9]>

     <script src="js/html5shiv.js"></script>

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

     <![endif]-->

     <!-- 设置距离顶部的距离，固定定位会挡住内容区 -->

     <style type="text/css">

         body{

             margin-top: 50px;

         }

     </style>

 </head>

 <body>

     <div class="navbar navbar-inverse navbar-fixed-top" id="menu-nav">

         <div class="container">

             <div class="navbar-header">

                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                     <!-- sr-only仅阅读器能见实际不会呈现在页面上 -->

                     <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" href="#">浏览器</a>

             </div>

             <div class="navbar-collapse collapse">

                 <ul class="nav navbar-nav">

                     <li class="active"><a href="#ad-carousel">综述</a></li>

                     <li><a href="#summary-container">简述</a></li>

                     <!-- 下拉菜单 -->

                     <li class="dropdown">

                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>

                         <ul class="dropdown-menu">

                             <!-- href="#feature-tab"绑定详情页ID可定位 data-tab可以使用TAB切换选项 -->

                             <li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>

                             <li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>

                             <li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>

                             <li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>

                             <li><a href="#feature-tab" data-tab="tab-ie">IE</a></li>

                         </ul>

                     </li>

                     <li>

                         <a href="#" data-toggle="modal" data-target="#about-modal">关于</a>

                     </li>

                 </ul>

             </div>

         </div>

     </div>

     <!-- 弹出框 放在body下保证层级最高-->

     <div class="modal fade" id="about-modal">

         <div class="modal-dialog">

             <div class="modal-content">

                 <div class="modal-header">

                     <button type="button" class="close" data-dismiss="modal">&times;</button>

                     <h4 class="modal-title" id="myModalLabel">标题</h4>

                 </div>

                 <div class="modal-body">文本</div>

                 <div class="modal-footer">

                     <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                     <button type="button" class="btn btn-primary">提交</button>

                 </div>

             </div>

         </div>

     </div>

     <h1 class="text-center">你好</h1>

 </body>

 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

 </html>

请引用最新的文件，请使用更高的浏览器。

bootstrap 响应式导航条模板（含下拉菜单，弹出框）的更多相关文章

  1. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  2. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  3. 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  4. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  5. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  6. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  7. css+html+js实现多级下拉和弹出菜单

    本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...

  8. yii框架中的下拉菜单和单选框

    yii中的下拉菜单: 第一种: <?= $form->field($model, 'parent_id')->dropDownList(ArrayHelper::map($data, ...

  9. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

随机推荐

  1. python爬虫-抓取acg12动漫壁纸排行设置为桌面壁纸

    ACG-wallpaper 初学python,之前想抓取P站的一些图片来着,然后发现acg12这里有专门的壁纸榜单,就写了个抓取壁纸作为mac桌面壁纸玩玩. 功能:抓取acg12壁纸榜单的动漫壁纸,并 ...

  2. JavaScript中你所不知道的Object（一）

    Object实在是JavaScript中很基础的东西了,在工作中,它只有那么贫瘠的几个用法,让人感觉不过尔尔,但是我们真的了解它吗? 1. 当我们习惯用 var a = { name: 'tarol' ...

  3. cmake命令收集

    cmake中一些预定义变量 PROJECT_SOURCE_DIR 工程的根目录 PROJECT_BINARY_DIR 运行cmake命令的目录,通常是${PROJECT_SOURCE_DIR}/bui ...

  4. 个人作业3——（Alpha阶段）

    一.alpha 过程总结 1.这学期的软件工程作业,由于各种事情冲突和时间安排问题,前期并没有太多时间去好好应对,中途有很多次都想放弃.但最后还是咬咬牙在同学的帮助下完成了一些基本任务,在这门课程开始 ...

  5. 杨晨露 Java 第一周总结

    1.学习内容总结 (1)Integer类在对象中包装了一个基本类型int的值.Integer类型的对象包含一个int类型的字段.该类提供了多个方法,能在int类型和String类型之间互相转换,还提供 ...

  6. 201521123019 《Java程序设计》第12周学习总结

    1. 本章学习总结 2. 书面作业 Q1.字符流与文本文件:使用 PrintWriter(写),BufferedReader(读) 1.1 生成的三个学生对象,使用PrintWriter的printl ...

  7. JAVA课程设计 刘舒婷 201521123096

    1.团队课程设计博客链接 2.个人负责模块说明 2.1 界面菜单的设计: 2.2 录入学生信息: 2.3 对已录入的学生信息进行修改: 3.个人代码提交记录截图 4.自己负责模块或任务详细说明 4.1 ...

  8. 201521123085 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问,还有 ...

  9. java课程设计-表达式运算(团队博客)

    1 团队课程设计博客 1 团队名称.团队成员介绍 团队名称 奔跑吧土拨鼠 团队成员 洪亚文 201521123065 网络1513 郑晓丽 201521123066 网络1513 2 项目git地址 ...

  10. request.getParameter()获取URL中文参数乱码的解决办法

    这个问题耽误好长时间,URL传中文参数出现乱码,就算首次使用request接收就添加 request.setCharacterEncoding("UTf-8"); 依然报错不误. ...