bootstrap 响应式导航条模板（含下拉菜单，弹出框）

时间：2022-12-24 23:58:28
 <!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&plus;Js制作的一款响应式导航条

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. HTTP长连接和短连接原理浅析

    原文出自:HTTP长连接和短连接原理浅析

  2. electron开发&lpar;一&rpar;

    0. 简介 http://electron.atom.io/ 官网 https://www.v2ex.com/t/277623   基于 Electron 的 Linux 下的网易云音乐 https: ...

  3. 【Java】XML解析之DOM4J

    DOM4J介绍 dom4j是一个简单的开源库,用于处理XML. XPath和XSLT,它基于Java平台,使用Java的集合框架,全面集成了DOM,SAX和JAXP,使用需要引用dom4j.jar包 ...

  4. ligureUI 刷新列求和

    dataGrid=$("#dataGrid").ligerGrid({ columns: [ {display:, align:'left' }, {display:, align ...

  5. PHP——字符串处理部分

    PHP——字符串处理 下面我们来讲一下我们经常使用的一些字符串处理的函数 1.string(变量);——取这个变量里面的字符串的长度 2.var_dump(变量a,变量b);——判断两个变量里面的字符 ...

  6. javascript之url转义escape&lpar;&rpar;、encodeURI&lpar;&rpar;和decodeURI&lpar;&rpar;

    我们可以知道:escape()除了 ASCII 字母.数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法.而encodeURI() 用于编码整个URI,因 ...

  7. vue&period;cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  8. &lbrack;UE4&rsqb;利用取模运算达到循环遍历数组的目的

    X mod Y: 1.X<Y: X mod Y = X.计算记过永远都是等于X 2.X=Y:X mod Y = 0.重新回到数组第一个索引位置

  9. CO文件升级

    当在Process Designer文件中导入旧版本CO模型时,拖入Graphic View后会出现如下错误.升级CO文件可解决该错误.   使用开始菜单中Tecnomatix下的Update to ...

  10. VS2017写的exe调用Delphi 7写的DLL

    公司有个很古老的系统,代码量很大,并且稳定线上运行10几年,这系统是公司的核心,公司收入基本靠它,系统几乎都是Delphi 7写的,要重写是不可能的.因为Delphi 7编译出来的DLL默认的导出符号 ...

相关文章