bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)


Posted in Javascript onNovember 17, 2017

本文实例为大家分享了bootstrap响应式导航条模板展示的具体代码,供大家参考,具体内容如下

<!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">×</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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 #Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 #Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 #Javascript
JS实现的数组去除重复数据算法小结
Nov 17 #Javascript
bootstrap轮播模板使用方法详解
Nov 17 #Javascript
浅谈Node模块系统及其模式
Nov 17 #Javascript
基于Bootstrap表单验证功能
Nov 17 #Javascript
You might like
php操作redis缓存方法分享
2015/06/03 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
vue中监听路由参数的变化及方法
2019/12/06 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Python脚本完成post接口测试的实例
2018/12/17 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
火车的故事教学反思
2014/02/11 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
加班费申请报告
2015/05/15 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
成绩单家长意见
2015/06/03 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL