<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--匹配移动端--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>导航条</title> <!--安装bootstrap--> <!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的--> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--生成占位图--> <script src="../bs/js/holder.js"></script> <!--css--> <link rel="stylesheet" href="../bs/css/bootstrap.css"> <!--bootstrap.js--> <script src="../bs/js/bootstrap.js"></script> <style> *{ font-family:微软雅黑; } body{ padding-top:50px; } </style> </head> <body> <div class="container"> <!--外层的div类container是为了吧所有的内容部分限制为居中--> <h1 class="page-header">BootStarp导航栏</h1> <!--导航条最外部 navbar-fixed-top 表示固定在顶部,(直接固定在顶部会使得标题被遮住,所以需要给body添加一个padding-top值)--> <nav class="navbar navbar-inverse navbar-fixed-top"> <!-- navbar-inverse 是整个导航条为黑色, 默认是navbar-default --> <div class="container"> <!--这里再加一个div 类container是为了当导航条固定在顶部的时候,把里边的内容居中--> <!-- 1 . 左侧logo部分和右侧汉堡菜单部分--> <div class="navbar-header"> <!--这里可以直接给a标签里放一个img,作为logo--> <a href="" class="navbar-brand">BootStarp</a> <!-- 左侧logo部分 a连接加 navbar-brand 起对齐作用 --> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar"> <!-- 右侧汉堡菜单部分,点击后出现navbar菜单栏 , 主要靠 data-target="id名" ,然后去寻找下方的合并区内容--> <!--这里的三个span是代表汉堡菜单的标签,一个span代表一根横线 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- 2 . 这里是手机端显示出来的合并区,点击汉堡按钮出现的内容,加上collapse类默认手机端是隐藏--> <div class="collapse navbar-collapse" id="mynavbar"> <!-- 2.1 这里是合并区显示的横条菜单栏,使用nav标签后边跟navbar-nav--> <ul class="nav navbar-nav"> <li class="active"><a href="">起步</a></li> <!--class="active" 代表默认选中的表单,使用JQuery事件滑动到谁身上就添加一个active--> <li><a href="">全局 CSS 样式</a></li> <li><a href="">组件</a></li> <li><a href="">JavaScript 插件</a></li> <li><a href="">定制</a></li> <li><a href="">网站实例</a></li> <li class="dropdown"> <!--这里一个下拉菜单的按钮,里边的 a标签来匹配内容--> <a href="" class="dropdown-toggle" data-toggle="dropdown" >下拉菜单 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="">下拉菜单选项1</a></li> <li><a href="">下拉菜单选项2</a></li> <li><a href="">下拉菜单选项3</a></li> </ul> </li> </ul> <!-- 2.2 这里是合并区右侧的一个网站标志,这里将他设置为右浮动--> <ul class="nav navbar-nav navbar-right"> <!--这里是浮动到右边的一个标志,需要用navbar-right对齐到右侧--> <li><a href="">Bootstrap中文网</a></li> </ul> <!-- 2.3 这里是合并区右侧的表单元素,这里将他设置为右浮动,因为BootStarp先浮动,所以他在前者左侧--> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="输入查找内容"> </div> <div class="form-group"> <button type="submit" class="btn btn-warning">搜索 <spna class="glyphicon glyphicon-search "></spna></button> </div> </form> <!--直接放一个按钮--> <!--<button type="submit" class="btn btn-warning navbar-btn">搜索 <spna class="glyphicon glyphicon-search "></spna></button>--> <!--直接放一个文本--> <!--<p class="navbar-text">导航条中的文本</p>--> </div> </div> </nav> </div> </body> </html>
BootStarp制作导航条demo
最新推荐文章于 2023-10-18 14:51:41 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
