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 相关文章推荐
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
js实现简单点赞操作
Mar 17 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
浅析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
Snoopy类使用小例子
2008/04/15 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python绘制简单折线图代码示例
2017/12/19 Python
通过实例解析Python调用json模块
2019/12/11 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
大学毕业生工作的自我评价
2013/10/01 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android