<!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. NSMutable属性声明时为什么不能使用copy

    在iOS开发里面我们经常会进行NSMutable(可变类型的类,常用的如NSMutableString,NSMutableArray,NSMutableDictionary,NSMutableData ...

  2. Nhibernate学习教程（2）-- 第一个NHibernate程序

    NHibernate之旅(2):第一个NHibernate程序 本节内容 开始使用NHibernate 1.获取NHibernate 2.建立数据库表 3.创建C#类库项目 4.设计Domain 4- ...

  3. mac环境下安装mysql

    一,下载mysql 官网"Community " 下会看到"MySQL Community Server"下方有一个"download"点击 ...

  4. MITNIK ATTACK

    Https 443 http 80 TCP/IP 协议栈:将数据封装包头 传输层报头 Ack回复确认位 FIN结束位 SIN 开始位 RST 重置位 Seq 序号位 网络层报头 目的地址 原地址 报文 ...

  5. 部署自己的GitLab

    先说明一下自己的想法:无论怎么样,个人确实先不想升级到centos7上面,因为我觉得centos6还是比较占用资源少的,而且作为生产环境,centos6完全够用了. 实验测试环境: * centos ...

  6. 201521123067 《Java程序设计》第8周学习总结

    201521123067 <Java程序设计>第8周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 Q1.List中指定 ...

  7. 201521123092《java程序设计》第六周学习总结

    1.本周学习总结 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2.书面作业 1.clone方法 1.1 Object对象中的clo ...

  8. python数据分析panda库

    panda内有两种数据结构,Series()和DataFrame() >>> a=pd.Series([1,2],index=['a','b']) >>> a a ...

  9. 【概率论与数理统计】小结4 - 一维连续型随机变量及其Python实现

    注:上一小节总结了离散型随机变量,这个小节总结连续型随机变量.离散型随机变量的可能取值只有有限多个或是无限可数的(可以与自然数一一对应),连续型随机变量的可能取值则是一段连续的区域或是整个实数轴,是不 ...

  10. GCD之Apply

    dispatch_apply函数是dispatch_sync函数和dispatch_group的结合体.该函数将按指定的次数将指定的block追加到指定的dispatch queue中,并等待全部处理 ...