<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
<script src="../JS/jquery-3.2.1.min.js"></script>
<script src="../JS/bootstrap.js"></script>
<style type="text/css">
body{margin-top: 60px;}
</style>
</head>
<body style="height: 2000px;">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- logo -->
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a><!-- 为了在分辨率小的情况下仍然能使用，加外围div -->
</div>
<ul class="nav navbar-nav navbar-left ">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
<!-- <button class="btn btn-default navbar-btn">搜索</button> --><!-- 按钮 -->
<!-- <a href="#" class="navbar-link">链接</a> --><!-- 链接 -->
<!-- <p class="navbar-left navbar-text">95951</p> --><!-- 文字 -->
<form class="navbar-form navbar-left">
<input type="text" class="form-control">
<input type="submit" class="btn btn-primary" value="搜索">
</form>
<ul class="nav navbar-nav navbar-right"><!-- navbar-left ：左浮动 默认-->
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</nav>
<div class="container">
<p>11111</p>
<p>22222</p>
<p>33333</p>
</div>
<!--
<div class="container"> class="container-fluid"自适应容器的宽度
<nav class="navbar navbar-default">
<ul class="nav navbar-nav ">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</nav>
</div>
<nav class="navbar navbar-default">
<div class="container"> class="container-fluid"
<ul class="nav navbar-nav ">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-static-top"> navbar-inverse navbar-static-top
<div class="container">
<ul class="nav navbar-nav ">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom"> navbar-default navbar-fixed-bottom
<div class="container">
<ul class="nav navbar-nav ">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</nav>
-->
</body>
</html>
<!--
导航：<nav class="navbar">
<ul class="nav navbar-nav ">
风格：两种（都默认有圆角）
1. navbar navbar-default：默认的样式,浅色
2. navbar navbar-inverse：深色的样式
去掉默认的圆角：navbar-static-top,没有bottom样式
navbar-fixed-top：固定导航栏在顶部，即使滚动条移动也不改变位置
navbar-fixed-bottom：固定导航栏在底部
若固定的顶部导航栏遮挡住内容，则可以设置body{margin-top:50px;}
导航条：
navbar-header：为了使logo在低分辨率中也能正常使用
navbar-brand:显示logo
navbar-left:左浮动 默认
navbar-right：右浮动
navbar-btn：导航条中的按钮，能使按钮自动居中<button class="btn btn-default navbar-btn">
navbar-link：使用链接的时候加上，会使链接的文字颜色发生改变
navbar-text：使用文字时候加上，同样文字也可以加上浮动
navbar-form：<form class="navbar-form navbar-left">
<input type="text" class="form-control">
<input type="submit" class="btn btn-primary" value="搜索">
</form>
-->
bootstrap-导航栏
最新推荐文章于 2024-09-01 13:38:39 发布
扫一扫
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
