<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap</title><linkrel="stylesheet"href="css/bootstrap.css" /><scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js/bootstrap.js"></script></head><bodystyle="padding-top: 20px;"><navclass="navbar navbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-4"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-4"><pclass="navbar-text">Signed in as Mark Otto</p></div></div></nav></body></html>
非导航条的链接
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap</title><linkrel="stylesheet"href="css/bootstrap.css" /><scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js/bootstrap.js"></script></head><bodystyle="padding-top: 20px;"><navclass="navbar navbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-5"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-5"><pclass="navbar-text navbar-right">Signed in as <ahref="http://www.baidu.com"target="_blank"class="navbar-link">百度一下</a></p></div></div></nav></body></html>
固定在顶部导航条
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap</title><linkrel="stylesheet"href="css/bootstrap.css" /><scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js/bootstrap.js"></script></head><bodystyle="padding-top: 20px;"><navclass="navbar navbar-default navbar-fixed-top"role="navigation"><!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-6"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-6"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li></ul></div><!-- /.navbar-collapse --></div></nav><divstyle="height: 1500px"></div></body></html>
固定在底部的导航条
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap</title><linkrel="stylesheet"href="css/bootstrap.css" /><scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js/bootstrap.js"></script></head><bodystyle="padding-top: 20px;"><navclass="navbar navbar-default navbar-fixed-bottom"role="navigation"><!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-7"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-7"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li></ul></div><!-- /.navbar-collapse --></div></nav><divstyle="height: 1500px"></div></body></html>
静态布局在顶部
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap</title><linkrel="stylesheet"href="css/bootstrap.css" /><scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js/bootstrap.js"></script></head><bodystyle="padding-top: 20px;"><navclass="navbar navbar-default navbar-static-top"role="navigation"><!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-8"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-8"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li></ul></div><!-- /.navbar-collapse --></div></nav><divstyle="height: 1500px"></div></body></html>
反色的导航条
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="utf-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Bootstrap</title><linkrel="stylesheet"href="css/bootstrap.css" /><scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js/bootstrap.js"></script></head><bodystyle="padding-top: 20px;"><navclass="navbar navbar-inverse"role="navigation"><divclass="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><divclass="navbar-header"><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-9"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-9"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">Link</a></li><li><ahref="#">Link</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></body></html>