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编写实用的省市选择器
Feb 12 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
vue实现放大镜效果
Sep 17 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 strtr() 函数使用说明
2008/11/21 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php中hashtable实现示例分享
2014/02/13 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
react-router实现按需加载
2017/05/09 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
详细介绍Python的鸭子类型
2016/09/12 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
三八节标语
2014/06/27 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
文明上网主题班会
2015/08/14 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android