七、bootstrap导航、导航条、面包屑导航组件

知识点:

1、导航
2、导航条
3、面包屑导航

1、导航(标签) nav

1)标签页 nav-tabs

  <ul class="nav nav-tabs">
      <li class="active"><a href="">Home</a></li>
      <li><a href="">Project</a></li>
      <li><a href="">Message</a></li>
  </ul>

2)胶囊式标签页 nav-pills

  <ul class="nav nav-pills">
      <li class="active"><a href="">Home</a></li>
      <li><a href="">Project</a></li>
      <li><a href="">Message</a></li>
  </ul>

3)垂直的胶囊式标签页 nav-stacked

  <ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="">Home</a></li>
      <li><a href="">Project</a></li>
      <li><a href="">Message</a></li>
  </ul>

4)两端对齐的标签页 nav-justified

  <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="">Home</a></li>
      <li><a href="">Project</a></li>
      <li><a href="">Message</a></li>
  </ul>

5)禁用链接 disabled

  <ul class="nav nav-tabs">
      <li class="active"><a href="">Home</a></li>
      <li class="disabled"><a href="">Project</a></li>
      <li><a href="">Message</a></li>
  </ul>

6)带有下拉菜单的标签

  <ul class="nav nav-tabs">
      <li class="active"><a href="">Home</a></li>
      <li><a href="">Project</a></li>
      <li class="dropdown">
          <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
          <ul class="dropdown-menu">
              <li><a href="">关于</a></li>
              <li><a href="">资讯</a></li>
              <li><a href="">通讯</a></li>
          </ul>
      </li>
  </ul>

7)带下拉菜单的胶囊式标签

  <ul class="nav nav-pills">
      <li class="active"><a href="">Home</a></li>
      <li><a href="">Project</a></li>
      <li class="dropdown">
          <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
          <ul class="dropdown-menu">
              <li><a href="">关于</a></li>
              <li><a href="">资讯</a></li>
              <li><a href="">通讯</a></li>
          </ul>
      </li>
  </ul>

2、导航条 navbar <nav>标签中添加 class .navbar、.navbar-default

1)默认的导航栏

  <nav class="navbar navbar-default">
      <div class="navbar-header">
          <a class="navbar-brand" href="">潭州教育</a>
      </div>
      <ul class="nav navbar-nav">
          <li class="active"><a href="">Home</a></li>
          <li><a href="">Project</a></li>
          <li class="dropdown">
              <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="">关于</a></li>
                  <li><a href="">资讯</a></li>
                  <li><a href="">通讯</a></li>
              </ul>
          </li>
      </ul>
  </nav>

2)响应式的导航栏

  <nav class="navbar navbar-default">
      <div class="navbar-header">
          <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="">潭州教育</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav">
              <li class="active"><a href="">Home</a></li>
              <li><a href="">Project</a></li>
              <li class="dropdown">
                  <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                      <li><a href="">关于</a></li>
                      <li><a href="">资讯</a></li>
                      <li><a href="">通讯</a></li>
                  </ul>
              </li>
          </ul>
      </div>
  </nav>

3)导航栏中的表单

  <form action="" class="navbar-form navbar-right">
      <div class="form-group">
          <input class="form-control" type="text" placeholder="Search"/>
      </div>
      <button class="btn btn-default">Search</button>
  </form>

4)导航栏中的按钮 navbar-btn

  <button class="btn btn-default navbar-btn">Submit</button>

5)导航栏中的文本 navbar-text

  <p class="navbar-text">Signed in as Thomas</p>

6)固定到顶部、底部 navbar-fixed-top navbar-fixed-bottom

  <nav class="navbar navbar-default navbar-fixed-top">
      <div class="navbar-header">
          <a class="navbar-brand" href="">潭州教育</a>
      </div>
      <ul class="nav navbar-nav">
          <li class="active"><a href="">Home</a></li>
          <li><a href="">Project</a></li>
          <li class="dropdown">
              <a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="">关于</a></li>
                  <li><a href="">资讯</a></li>
                  <li><a href="">通讯</a></li>
              </ul>
          </li>
      </ul>
  </nav>

7)静态的顶部 navbar-static-top

8)倒置的导航栏 带有黑色背景白色文本的倒置的导航栏 navbar-inverse

3、面包屑导航

<ul class="breadcrumb">
   <li><a href="">首页</a></li>
   <li><a href="">列表</a></li>
   <li class="active">详情</li>
</ul>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容