zoukankan      html  css  js  c++  java
  • Bootstrap_导航

    一、标签形tab导航

      标签形导航,也称为选项卡导航。

      标签形导航是通过“.nav-tabs”样式来实现。在制作标签形导航时需要在原导航“.nav”上追加此类名。

    <ul class="nav nav-tabs">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
    </ul>

    我们想让“Home”项为当前选中项,只需要在其标签上添加类名".active”即可。

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

    选项卡还带有禁用状态,只需要在标签项上添加".disabled”即可。

    <ul class="nav nav-tabs">
        <li class="disabled"><a href="##">Home</a></li></ul>

    二、胶囊形(pills)导航

      当前项高亮显示,并带有圆角效果。

      标签形导航是通过“.nav-pills”样式来实现。

    <ul class="nav nav-pills">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
    </ul>

     

    三、垂直堆叠的导航

      制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可。

    <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="##">Home</a></li>
         <li><a href="##">CSS3</a></li>
         <li><a href="##">Sass</a></li>
         <li><a href="##">jQuery</a></li>
         <li class="disabled"><a href="##">Responsive</a></li>
    </ul>

    四、自适应导航

    自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。

    只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

    <ul class="nav nav-tabs nav-justified">
         <li class="active"><a href="##">Home</a></li>
         <li><a href="##">CSS3</a></li>
         <li><a href="##">Sass</a></li>
         <li><a href="##">jQuery</a></li>
         <li><a href="##">Responsive</a></li>
    </ul>

    五、导航加下拉菜单(二级导航)

      在Bootstrap框架中制作二级导航,只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul。

    <ul class="nav nav-pills">
      <li class="active"><a href="##">首页</a></li>
      <li class="dropdown">
        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="##">CSS3</a></li>
          <li><a href="##">Sass</a></li>
          <li><a href="##">jQuery</a></li>
          <li><a href="##">Responsive</a></li>
        </ul>
      </li>
      <li><a href="##">关于我们</a></li>
    </ul>

    六、面包屑式导航

      面包屑(Breadcrumb)一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置)。

      在Bootstrap框架中面包屑也是一个独立模块组件。使用方式就很简单,为ol加入“breadcrumb”类。

    <ol class="breadcrumb">
      <li><a href="#">首页</a></li>
      <li><a href="#">我的书</a></li>
      <li class="active">《图解CSS3》</li>
    </ol>
  • 相关阅读:
    认知实习(杭钢、杭州中萃)
    Head of a Gang (map+邻接表+DFS)
    Sharing
    Hello World for U (20)
    计算器(delphi)
    CentOS 下 Codeblocks 的 安装 + 汉化 以及 基本使用介绍
    关于阿里如何吸引大学生用户理财的一些个人看法
    分页 存储过程
    点击退出,并未直接跳转到登陆界面,登录界面还停留在框架集界面
    梦幻之旅--地图编辑器开发
  • 原文地址:https://www.cnblogs.com/liujiangping/p/5317704.html
Copyright © 2011-2022 走看看