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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
Javascript与flash交互通信基础教程
Aug 07 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
ie 调试javascript的工具
Apr 29 Javascript
Javascript Global对象
Aug 13 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
在vue项目中使用sass语法问题
Jul 18 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使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python机器学习库常用汇总
2017/11/15 Python
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
销售找工作求职信
2013/12/20 职场文书
服务员岗位责任制
2014/02/11 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
小学生学习感言
2014/03/10 职场文书
通用自荐信范文
2014/03/14 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
购房委托书范本
2014/09/18 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
致接力运动员加油稿
2015/07/21 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
创业计划书之美容店
2019/09/16 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android