bootstrap学习笔记<十一>（导航条）

基础导航条。样式：class="navbar navbar-default"，属性：role="navigation"

<div class="navbar navbar-default" role="navigation">
     <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>

效果图

1）带二级菜单，表单元素

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">公司LOGO</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>

导航条标题： class="navbar-brand

二级菜单：class="dropdown-toggle"  data-toggle="dropdown"

带表单导航条：class="navbar-form"

导航条位置控制：class="navbar-left"

2）导航条中的按钮、文本和链接

1、导航条中的按钮：navbar-btn

2、导航条中的文本：navbar-text

3、导航条普通链接：navbar-link

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

3）固定导航条(固定页头页脚)

.navbar-fixed-top：导航条固定在浏览器窗口顶部

.navbar-fixed-bottom：导航条固定在浏览器窗口底部

使用注意：从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：

解决方案<一>：

固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。

body {
  padding-top: 70px;/*有顶部固定导航条时设置*/
  padding-bottom: 70px;/*有底部固定导航条时设置*/
}

CSS

解决方案<二>：

其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面。

<!--固定顶部-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
<!--固定底部-->
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<!--页面内容-->
<div class="content">我是内容</div>

HTML

例：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">LOGO</a>
  　</div>
     <ul class="nav navbar-nav">
         <li class="active"><a href="##">首页</a></li>
        <li><a>页头</a></li>
     </ul>
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
     <ul class="nav navbar-nav">
        <li><a href="##">主页</a></li>
        <li><a href="##">刷新</a></li>
        <li><a href="##">关于</a></li>
     </ul>
</div>

例子

4）响应式导航

自适应屏幕显示导航

<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"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
       <!-- 确保无论是宽还是窄，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">LOGO</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>

例子

窄屏导航图标

<button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only"></span>
<!--横线图标-->
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
<!--一个icon-bar代表一个横线-->
</button>

解析