<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/bootstrap.js"></script> <style> #login{ width:400px; } </style> </head> <body> <div class="container"> <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </nav> </div> <div class="container-fluid"> <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li class="active"><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"> <ul class="nav navbar-nav"> <li class="active"><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"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="active"><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-top"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="active"><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"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </div> </nav> </body> <script> /* 导航条 navbar navbar-default 浅色色调 nav navbar-nav navbar-inverse 深色色调 navbar-static-top 直角 navbar-fixed-top 固定到顶部 navbar-fixed-bottom 固定到底部 遮挡内容的问题 body margin 解决 */ </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/bootstrap.js"></script> <style> body{ position: relative; } .pos{ margin-bottom: 500px; padding-top: 50px; } </style> </head> <body data-spy="scroll" data-target="#myScrool" data-offset="200"> <!-- <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">logo</a> </div> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> <a href="#" class="navbar-link">链接</a> <p class="navbar-left navbar-text">你好吗顶顶顶顶</p> <button class="btn btn-default navbar-btn">搜索</button> <form class="navbar-form navbar-left"> <input type="text" class="form-control" placeholder="提示信息"> <input type="submit" value="搜索" class="btn btn-primary"> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> </ul> </div> </nav> --> <!-- <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">logo</a> </div> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">three<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">child1</a></li> <li><a href="#">child2</a></li> </ul> </li> </ul> </div> </nav> --> <!-- 响应式 --> <!-- <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#myId"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">logo</a> </div> <div class="collapse navbar-collapse" id="myId"> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="#">one</a></li> <li><a href="#">two</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">three<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">child1</a></li> <li><a href="#">child2</a></li> </ul> </li> </ul> </div> </div> </nav> --> <nav id="myScrool" class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">logo</a> </div> <ul class="nav navbar-nav navbar-left"> <li class="active"><a href="#a">one</a></li> <li><a href="#b">two</a></li> <li><a href="#c">three</a></li> </ul> </div> </nav> <div id="a" class="pos">AAA</div> <div id="b" class="pos">BBB</div> <div id="c" class="pos">CCC</div> </body> <script> /* 导航条 navbar-header logo父级 navbar-brand logo navbar-left 左浮动 navbar-right 右浮动 navbar-btn 按钮 navbar-link 链接 navbar-text 文本 navbar-form 下拉菜单 响应式导航条 navbar-toggle collapse 折叠 navbar-collapse 滚动监听 data-spy data-target data-offset */ </script>