Bootstrap学习--导航栏

<nav class="navbar nav-default" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">W3Cschool</a>
   	</div>
  	<div>
	<ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

导航栏是定义在nav标签中的，class=“nav nav-default"是导航栏的基本样式

class="navbar-header" 和class=“navbar-brand”会使文字看起来比较大一点。

ul中class="nav navbar-nav"表明是一个无序列表

class="navbar-form"可用于导航栏中的表单

class="navbar-text"可用于导航栏中的文本

class="navbar-btn"可用于导航栏中的按钮

class="navbar-right"可使导航栏中的元素靠右显示

class="navbar-left"可使导航栏中的元素靠左显示

class="navbar-fixed-top"可让导航栏固定在页面顶部,用在nav标签中

class="navbar-fixed-bottom"可让导航栏固定在页面地部，用在nav标签中

class="navbar-static-top",该样式不会向body中加入padding，可让导航栏随页面滚动。

class="navbar-inverse"，该样式是一个倒置的导航栏

class="collapse navbar-collapse",一般用在div中，为导航栏添加响应式布局。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

最初以为在导航栏中的这个button根本没有什么作用，后来在小屏幕上才发觉这个按钮是响应式按钮，是方便小屏幕的一个下拉按钮。

3个<span class="icon-bar"></span>其实是绘制了3条斑马线。在大屏幕下不显示，当小屏幕时则很清晰。