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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python添加菜单图文讲解
2019/06/04 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Python实现弹球小游戏
2020/08/01 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
幼儿园教育教学反思
2014/01/31 职场文书
婚前协议书
2014/04/15 职场文书
企业总经理任命书
2014/06/05 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
爱国之歌(8首)
2019/09/29 职场文书
Python读写yaml文件
2022/03/20 Python