5.导航条、分页导航

最新推荐文章于 2021-02-08 01:33:07 发布

YuhNagi

最新推荐文章于 2021-02-08 01:33:07 发布

阅读量683

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap 前端框架导航

本文链接：https://blog.youkuaiyun.com/YuhNagi/article/details/52936786

版权

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

1.导航（基础样式）
a.首先添加".nav"的样式，但它默认不提供默认导航样式。
b.在上面基础上，加想要导航类，如".nav-tabs"、".nav-pills"之类的。

2.导航（标签形tab导航）
.vav-tabs 在nav基础上添加，它还有".active",".disabled"两种状态。

3.导航（胶囊形(pills)导航）
.nav-pills 加上这个类名即可，同样有激活和禁用状态。

4.导航（垂直堆叠的导航）
.nav-stacked 在上面".nav-pills"风格基础上添加即可。".nav-tabs"上的垂直导航在V3版本中不再支持。
另，同下拉菜单分隔线一样，可用".nav-divider"实现分隔线。

5.自适应导航（使用）
".nav-justified" 点据容器全部宽度，菜单项自适应宽度(基本<768px时会垂直排列)。同时也是需要和".nav-tabs"或者".nav-pills"搭配使用。

6.导航加下拉菜单（二级导航）
a.把需要有下拉菜单的li当作父容器，加上类名".dropdown"(即相当于独立菜单中的div)。
b.再给li里的a加上button中对应的属性和类名即可。
c.".nav-divider"同样可实现分隔线效果。

<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>

7.面包屑式导航
".breadcrumb" 给外部容器添加这个类。作用是用于指明用户所处当前位置。

  <ul class="breadcrumb">
      <li><a href="#">index</a></li>
      <li><a href="#">web</a></li>
      <li><a href="#">javascript</a></li>
      <li class="active">bootstrap</li>
  </ul>

8.导航条基础（navbar）
区别导航：导航条有背景色，可以是纯链接，也可是表单，或者表单和导航相结合等多种形式。
使用方法：
   a. 类似导航，在(<ul class=”nav”>)基础上添加类名“navbar-nav”.
   b. 在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”.

9.为导航条添加标题、二级菜单及状态
   通过“navbar-header”和“navbar-brand”来实现加导航标题。二级菜单则是通过加下拉菜单。

<!-- 导航，下拉菜单混合的导航条  -->
<div class="navbar navbar-default">
    <div class="navbar-hearder">
        <div class="navbar-brandbrand">Web</div>
    </div>
    <ul class="nav navbar-nav">
        <li><a href="#">Javascript</a></li>
        <li><a href="#">html5</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">css<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li class="active"><a href="#">css2</a></li>
                <li><a href="#">css3</a></li>
            </ul>
        </li>
        <li class="disabled"><a href="#">java</a></li>
    </ul>
</div>

10.带表单的导航条
用法：在navbar最外层容器中放置一个带有navbar-form类名的表单，表单还可用"navbar-left/right"来实现左右浮动。
注意要在>768px的宽屏下才生效。

11.导航条中的按钮、文本和链接
除表单以及brand外，还可使用其他元素。比如：
a、导航条中的按钮navbar-btn b、导航条中的文本navbar-text c、导航条中的普通链接navbar-link
但使用上述样式时在框架中还受到一些限制：
需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

12. 固定导航条
a. .navbar-fixed-top/bottom：导航条固定在浏览器窗口顶部/底部
b. .navbar-static-top/bottom：导航条固定在浏览器顶部/底部，不随滚动条走动

13. 响应式导航条
使用方法：
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
2、保证在窄屏时要显示的图标样式（固定写法）：

  <button class="navbar-toggle" type="button" data-toggle="collapse">
  <span class="sr-only">Toggle Navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名则由需要折叠的div来决定。

<!-- navbar-inverse表示反色导航条，白色文字，黑色背景 -->
  <div class="navbar navbar-default navbar-inverse">
    <div class="navbar-header">
        <button data-target=".navbar-responsive-collapse2" class="navbar-toggle" type="button" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span></button>
        <a href="javascript:;" class="navbar-brand">导航条</a>
    </div>

    <div class="collapse navbar-collapse navbar-responsive-collapse2">
        <ul class="nav navbar-nav">
            <li><a href="javascript:;">首页</a></li>
            <li><a href="javascript:;">音乐</a></li>
            <li><a href="javascript:;">视频</a></li>
            <li><a href="javascript:;">图像</a></li>
        </ul>
    </div>
</div>

14.分页导航（带页码的分页导航）
用法：
a. 用ul列表，给ul加上“ .pagination ”类。
b. 有鼠标悬挂，激活，禁用等状态。
c. 大小有两种：pagination-lg和pagination-sm

15.分页导航（翻页分页导航）
用法：
a. 给ul加上“.pager”类。
b. 可以有以下两种

<ul class="pager">
   <li><a href="#">«上一页</a></li>
   <li><a href="#">下一页»</a></li>
</ul>
<!--左右对齐-->
<ul class="pager">
  <li class="previous"><a href="#">«上一页</a></li>
  <li class="next"><a href="#">下一页»</a></li>
</ul>

16.标签（徽章）
用法：
a. 标签使用类“ label label-default”.
b. label还有其它几种样式： label-deafult/primary/success/info/warning/danger
c. 徽章使用类“ .badge”，但没有其它风格了。

<ul class="nav navbar-nav">
    <li><a href="#">阴阳师<span class="label label-primary" style="vertical-align: top;">new</span></a></li>
    <li><a href="#">柯南<span class="badge pull-right">780</span></a></li>
     <!-- 靠右效果得在<760px才看得出 -->
</ul>