BootStrap -- API学习（六）

*******************************第六章 导航条和分页导航*********************************
导航条与导航的区别(navbar 和 nav)
    上一张我们讲到导航nav,其实导航条就是将导航和表单将进行结合
    <div class="navbar navbar-default" role="navigation">
      　<div class="navbar-header">
      　    <a href="##" class="navbar-brand">慕课网</a>
      　</div>
         <ul class="nav navbar-nav">
            <li class="active"><a href="##">网站首页</a></li>
          <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li>
                <li><a href="##">JavaScript</a></li>
                <li class="disabled"><a href="##">PHP</a></li>
            </ul>
         </li>
          <li><a href="##">名师介绍</a></li>
          <li><a href="##">成功案例</a></li>
          <li><a href="##">关于我们</a></li>
         </ul>
       <form action="##" class="navbar-form navbar-left" rol="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入关键词" />
        </div>
         <button type="submit" class="btn btn-default">搜索</button>
       </form>
    </div>
    
基础导航条组成
    1.在导航的<ul class="nav"></ul>加上一个类navbar-nav
    2.给ul添加一个容器<div class="navbar navbar-default"></div>
    
为导航栏添加标题、二级菜单及状态
    1.标题 <div class="navbar-header"><a href="#'" class="navbar-brand"></a></div>
    2.状态 active 和 disabled
    <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a href="##" class="navbar-brand">慕课网</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#">网站首页</a></li>
            <li class="active"><a href="#">名师介绍</a></li>
            <li><a href="#">成功案例</a></li>
            <li class="dropdown">
                <a class="btn btn-default" type="button" id="" data-toggle="dropdown">
                    关于我们
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">组织结构</a></li>
                    <li><a href="#">客服服务</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
导航条表单：navbar-form 

固定导航条:
    1.最上边：navbar-fixed-top
    2.最下边：navbar-fixed-bottom
    
响应式导航条：
    <!--代码-->
    <div class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
         　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
             <span class="sr-only">Toggle Navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
           <a href="##" class="navbar-brand">慕课网</a>
      </div>
      <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
      <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="##">网站首页</a></li>
                <li><a href="##">系列教程</a></li>
                <li><a href="##">名师介绍</a></li>
                <li><a href="##">成功案例</a></li>
                <li><a href="##">关于我们</a></li>
            </ul>
      </div>
    </div>
    
反色导航条：navbar-inverse
    也就是IDEA中最喜欢的颜色
    
标签
    <span class="label label-default">默认标签</span>
    <span class="label label-primary">主要标签</span>
    <span class="label label-success">成功标签</span>
    <span class="label label-info">信息标签</span>
    <span class="label label-warning">警告标签</span>
    <span class="label label-danger">错误标签</span> 

徽章(例子：微信提示多少未看消息)
    <span class="badge">42</span>