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系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jquery操作select大全
Apr 25 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
laypage分页控件使用实例详解
May 19 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 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
星际中的相关伤害
2020/03/04 星际争霸
缅甸的咖啡简史
2021/03/04 咖啡文化
JAVA/JSP学习系列之六
2006/10/09 PHP
php at(@)符号的用法简介
2009/07/11 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python定时执行之Timer用法示例
2015/05/27 Python
Python切片知识解析
2016/03/06 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
心理健康教育心得体会
2013/12/29 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
学生党支部先进事迹
2014/02/04 职场文书
法律专业求职信
2014/05/24 职场文书
海洋科学专业求职信
2014/08/10 职场文书
农村文化建设标语
2014/10/07 职场文书
员工辞职信范文大全
2015/05/12 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python