<!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. Linux-grep 命令和find 命令 (6)

    grep与find区别: grep:查找指定目录下过滤文本文件中行数据 find:查找指定目录下文件 grep使用 格式:   grep "text"   *  [选项] 选项: ...

  2. NHibernate教程(11)--多对多关联查询

    本节内容 多对多关系引入 多对多映射关系 多对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 多对多关系引入 让我们再次回顾在第二篇中建立的数据模型 ...

  3. OSX 10.8+下开启Web 共享 的方法

    MENU Home Archives About SUBSCRIBE ☰MENU OSX 10.8+ Mountain Lion 下开启 Web Sharing(Web 共享)的方法 JUL 28, ...

  4. 转： 【Java并发编程】之二十：并发新特性—Lock锁和条件变量（含代码）

    简单使用Lock锁 Java5中引入了新的锁机制--Java.util.concurrent.locks中的显式的互斥锁:Lock接口,它提供了比synchronized更加广泛的锁定操作.Lock接 ...

  5. css预处理器less和scss之less介绍（一）

    第一次发的标题有误,重发一遍,抱歉了 一.less基础语法 1.声明变量:@变量名:变量值 使用变量:@变量名 例如 @color : #ff0000; @length : 100px; #div1{ ...

  6. 结对实验---基于GUI的四则运算

    详细代码:https://git.coding.net/wangluo24/NO.2.git 结对伙伴:吕志哲(201421123021) &本人.许明涛 201421123024 一.题目要 ...

  7. 团队作业4——第一次项目冲刺（Alpha版本）4.23

    ·本次会议为第二次Scrum Meeting会议~ ·本次会议项目经理召开时间为17:00,在教学楼教室召开,召开时长约30分钟,探讨了昨日任务的进展.查重功能.今日要做的任务以及后续所要开展的工作. ...

  8. 201521123017 《Java程序设计》第1周学习总结

    1. 本章学习总结 (1)对JAVA的历史发展的了解 (2)JAVA运行环境的搭建和JVM,JDK,JRE的相关的JAVA开发工具的认识及其掌握 (3)写法的不同,开头public class 文件名 ...

  9. Servlet的生命周期与运行原理

    Servlet的生命周期:    1 加载classLoader    2 实例化 new    3 初始化 init(ServletConfig)    4 处理请求 service doGet d ...

  10. 《JAVA程序设计》第9周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现 ...