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中日期转换成时间戳的小例子
Mar 21 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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和MySQL保存和输出图片
2006/10/09 PHP
我的论坛源代码(八)
2006/10/09 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
python端口扫描系统实现方法
2014/11/19 Python
pandas取出重复数据的方法
2019/07/04 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
幼教求职信
2014/03/12 职场文书
法制报告会主持词
2014/04/02 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
2014年行政部工作总结
2014/11/19 职场文书
商铺租房协议书范本
2014/12/04 职场文书
食品质检员岗位职责
2015/04/08 职场文书
周一给客户的问候语
2015/11/10 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技