Bootstrap 学习 - 菜单 - 按钮 - 导航

Posted Mazey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap 学习 - 菜单 - 按钮 - 导航相关的知识,希望对你有一定的参考价值。

1、下拉菜单(基本用法)

在使用 Bootstrap 框架的下拉菜单时,必须调用 Bootstrap 框架提供的 bootstrap.js 文件。当然,如果你使用的是未编译版本,在 js 文件夹下你能找到一个名为 dropdown.js 的文件。你也可以调用这个 js 文件。在使用 Bootstrap 框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        …
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    </ul>
</div>

2、下拉菜单(原理分析)

Bootstrap 框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,因为 dropdown-menu 默认样式设置了 display:none,当用户点击父菜单项时,下拉菜单将会被显示出来,当用户再次点击时,下拉菜单将继续隐藏。现在我们来分析一下实现原理,非常简单,通过 js 技术手段,给父容器 div.dropdown 添加或移除类名 open 来控制下拉菜单显示或隐藏。也就是说,默认情况,div.dropdown 没有类名 open,当用户第一次点击时,div.dropdown 会添加类名 open;当用户再次点击时,div.dropdown 容器中的类名 open 又会被移除。

3、下拉菜单(下拉分隔线)

在 Bootstrap 框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的 <li>,并且给这个 <li> 添加类名 divider 来实现添加下拉分隔线的功能。

4、下拉菜单(菜单标题)

通过添加 divider 可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部(标题)。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        …
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
        …
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    </ul>
</div

5、下拉菜单(对齐方式)

Bootstrap 框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在 dropdown-menu 上添加一个 pull-right 或者 dropdown-menu-right 类名。同时一定要为 .dropdown 添加 float:left css 样式。

.dropdown{
  float: left;
}

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
      下拉菜单
      <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
   …
  </ul>
</div>

6、下拉菜单(菜单项状态)

下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus),下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
      下拉菜单
      <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    ….
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

7、按钮(按钮组)

按钮组和下拉菜单组件一样,需要依赖于 button.js 插件才能正常运行。不过我们同样可以直接只调用 bootstrap.js 文件。因为这个文件已集成了 button.js 插件功能。对于结构方面,非常的简单。使用一个名为 btn-group 的容器,把多个按钮放到这个容器中。除了可以使用 <button> 元素之外,还可以使用其他标签元素,比如 <a> 标签。唯一要保证的是:不管使用什么标签,.btn-group 容器里的标签元素需要带有类名 .btn

<div class="btn-group">
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-backward"></span>
  </button>
   …
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-forward"></span>
  </button>
</div>
glyphicon glyphicon-search
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-download
glyphicon glyphicon-upload

8、按钮(按钮工具栏)

那么 Bootstrap 框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组 btn-group 按组放在一个大的容器 btn-toolbar 中,实现原理主要是让容器的多个分组 btn-group 元素进行浮动,并且组与组之前保持 5px 的左外距。在介绍按钮一节中,我们知道按钮是通过 btn-lgbtn-smbtn-xs 三个类名来调整 paddingfont-sizeline-heightborder-radius 属性值来改变按钮大小。那么按钮组的大小,我们也可以通过类似的方法。

<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
</div>

9、按钮(嵌套分组)

很多时候,我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。使用的时候,只需要把当初制作下拉菜单的 dropdown 的容器换成 btn-group,并且和普通的按钮放在同一级。 

<div class="btn-group">
    <button class="btnbtn-default" type="button">首页</button>
    <button class="btnbtn-default" type="button">产品展示</button>
    <button class="btnbtn-default" type="button">案例分析</button>
    <button class="btnbtn-default" type="button">联系我们</button>
    <div class="btn-group">
        <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
        <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>
    </div>
</div>

10、按钮(垂直分组)

实际运用当中,总会碰到垂直显示的效果。在 Bootstrap 框架中也提供了这样的风格。我们只需要把水平分组的 btn-group 类名换成 btn-group-vertical 即可。

11、按钮(等分按钮)

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的 100%,而按钮组里面的每个按钮平分整个容器宽度。例如,如果你按钮组里面有五个按钮,那么每个按钮是 20% 的宽度,如果有四个按钮,那么每个按钮是 25% 宽度,以此类推。等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组 btn-group 上追加一个 btn-group-justified 类名,实现原理非常简单,把 btn-group-justified 模拟成表格(display:table),而且把里面的按钮模拟成表格单元格(display:table-cell)。在制作等分按钮组时,请尽量使用 <a> 标签元素来制作按钮,因为使用 <button> 标签元素时,使用 display:table 在部分浏览器下支持并不友好。

<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
        <a class="btnbtn-default" href="#">首页</a>
        <a class="btnbtn-default" href="#">产品展示</a>
        <a class="btnbtn-default" href="#">案例分析</a>
        <a class="btnbtn-default" href="#">联系我们</a>
    </div>
</div>

12、按钮下拉菜单

按钮下拉菜单其实就是普通的下拉菜单,只不过把 <a> 标签元素换成了 <button> 标签元素。唯一不同的是外部容器 div.dropdown 换成了 div.btn-group

<div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
      <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>
</div>

13、按钮的向下向上三角形

按钮的向下三角形,我们是通过在 <button> 标签中添加一个 <span> 标签元素,并且命名为 caret,有的时候我们的下拉菜单会向上弹起(接下来一个小节会介绍),这个时候我们的三角方向需要朝上显示,实现方法:需要在 .btn-group 类上追加 dropup 类名(这也是做向上弹起下拉菜单要用的类名)。

14、向上弹起的下拉菜单

有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在 Bootstrap 框架中专门为这种效果提代了一个类名 dropup。使用方法正如前面所示,只需要在 btn-group 上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在 dropdown 类名基础上追加 dropup 类名即可)。

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
    <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>
</div>

15、导航(基础样式)

Bootstrap 框架中制作导航条主要通过 .nav 样式。默认的 .nav 样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如 nav-tabsnav-pills 之类。

16、导航(标签形 tab 导航)

标签形导航,也称为选项卡导航。特别是在很多内容分块显示的时,使用这种选项卡来分组十分适合。标签形导航是通过 nav-tabs 样式来实现。在制作标签形导航时需要在原导航 nav 上追加此类名,其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下,选项卡教会有一个当前选中项。其实在 Bootstrap 框架也相应提供了。假设我们想让 Home 项为当前选中项,只需要在其标签上添加类名 class="active" 即可。除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加 class="disabled" 即可。

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

17、导航(胶囊形 pills 导航)

胶囊形(pills)导航听起来有点别扭,因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示,并带有圆角效果。其实现方法和 nav-tabs 类似,同样的结构,只需要把类名 nav-tabs 换成 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>

18、导航(垂直堆叠的导航)

在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在 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>

19、自适应导航(使用)

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用 btn-group-justified 制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名 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>

20、自适应导航(实现原理)

实现原理并不难,列表(<ul>)上设置宽度为 100%,然后每个菜单项(<li>)设置了 display:table-cell,让列表项以模拟表格单元格的形式显示。

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

前面介绍的都是使用 Bootstrap 框架制作一级导航,但很多时候,在 Web 页面中是离不开二级导航的效果。那么在 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>
            …
       </ul>
     </li>
     <li><a href="##">关于我们</a></li>
</ul>

22、面包屑式导航

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

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

附录

阅读原文:https://blog.mazey.net/1962.html

以上是关于Bootstrap 学习 - 菜单 - 按钮 - 导航的主要内容,如果未能解决你的问题,请参考以下文章

第7章 图标菜单和按钮组件

Bootstrap 4:无论屏幕大小,始终显示移动菜单按钮

Bootstrap 4将两个导航栏菜单按钮对齐到右侧[重复]

Bootstrap 4,在导航菜单项中使用多个下拉按钮

如何使 Bootstrap 单选按钮继续进入下拉菜单

Bootstrap 4 使用切换按钮连接侧面菜单(响应式)