<!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 发布