Bootstrap学习笔记——菜单、按钮及导航

本文详细介绍了Bootstrap中下拉菜单、按钮和导航的使用,包括下拉菜单的显示隐藏原理、菜单分隔线、按钮组、嵌套按钮、等分按钮、导航样式以及上下弹起的菜单。重点讲解了各组件的工作机制,如利用dropdown-toggle实现下拉菜单效果,按钮组的大小调整,以及导航的自适应布局。同时,还涵盖了导航的多种呈现形式,如标签形tab导航、胶囊形导航和面包屑导航,以及如何添加下拉菜单。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 下拉菜单功能

1.1 下拉菜单

在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件:

  • LESS版本:对应的源码文件为 dropdowns.less
  • Sass版本:对应的源码文件为 _dropdowns.scss
  • 编译后的Bootstrap版本:查看bootstrap.css文件第3004行~第3130行

在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。

如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中,我们统一调用压缩好的“bootstrap.min.js”文件.

特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
即:

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>

两个JS文件调用顺序改变则bootstrap.js文件无法正常显示其效果。

代码实例

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>下拉菜单</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <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="#">下拉菜单项1</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项2</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项3</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项4</a></li>
          </ul>
    </div> 
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    </body>
</html>

这里写图片描述

在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。

  • 1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:
<div class="dropdown"></div>
  • 使用了一个<button>按钮做为父菜单,并使用类名“dropdown-toggle”。同时添加自定义属性“data-toggle”,该属性值必须与最外容类名一致。
data-toggle="dropdown"
  • 下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”。
<ul class="dropdown-menu">

1、dropdown-toggle 的作用是什么?

经过查询,其应该属于dropdown组件中的一部分。其相关内容网上非常少。再bootstrap官网中找dropdown组件信息,我们可以发现其属于js中的一部分内容。
http://v3.bootcss.com/javascript/#dropdowns

定位到Dropdowns dropdown.js—->Usage部分内容

通过数据属性data attributes或者JavaScript,切换父列表项中的.open类,实现下拉菜单的显示和隐藏。

注意:在应用层中,关闭下拉菜单依赖于属性 data-toggle=”dropdown” 所以一直使用它将是一个好主意。

Via data attributes

增加data-toggle=”dropdown” 的链接或按钮来切换下拉菜单

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

保持完整的URL链接按钮,使用属性data-target而不是href =“#”。

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

通过JavaScript调用下拉菜单:

$('.dropdown-toggle').dropdown()

但是data-toggle="dropdown"依然被请求
不管您是通过JavaScript调用下拉菜单,还是使用数据API,当触发下拉菜单元素时data-toggle="dropdown"属性会被请求。


不难发现dropdown-toggle是经由Via js实现下拉菜单效果时才有用,而实例代码中是通过Via data attributes实现下拉菜单效果的(css)。所以本例中的dropdown-toggle没有存在效用。

1.2 下拉菜单(原理分析)

Bootstrap框架中的下拉菜单组件通过在类”dropdown-menu“设置默认样式“display:none”,让下拉菜单项默认为隐藏的(详细源码请查看bootstrap.css文件第3010行~第3029行)。
当用户点击父菜单项时,下拉菜单将会被显示出来,继续点击则下拉菜单继续隐藏。

现在我们来分析一下实现原理,非常简单,通过js技术手段,给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说,默认情况,“div.dropdown”没有类名“open”,当用户第一次点击时,“div.dropdown”会添加类名“open”;当用户再次点击时,“div.dropdown”容器中的类名“open”又会被移除。我们可以通过浏览器的firebug查看整个过程:

1.3 下拉菜单(下拉分隔线)

下拉菜单中的分割线(下拉菜单的组间分割)可以通过添加带类名”divider“的<li>来实现。
/源码bootstrap.css文件第3034行~第3039行/

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

代码实例

<body>
 <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"><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> 
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

这里写图片描述

1.4 下拉菜单(菜单标题)

类“divider”可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部(标题)。该是通过类.dropdown-header实现的。

<body>
<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"><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>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>

这里写图片描述

详细代码/查看bootstrap.css文件第3090行~第3096行/

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

备注:

role是让盲人或者有阅读障碍的人使用的
tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。

1.5 下拉菜单(对齐方式)

下拉菜单默认是左对齐,若让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加类名“dropdown-menu-right”
同时一定要为.dropdown添加float:left的css样式。否则下拉菜单会移动到浏览器的右边

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

这里写图片描述

1.6 下拉菜单(菜单项状态)

  • 悬浮状态(:hover)——默认的状态(不用设置)
  • 焦点状态(:focus)
  • 当前状态(.active)
  • 禁用状态(.disabled)
<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>

这里写图片描述

在评论中还有人提出:

菜单项禁用状态:li.disabled; 其实不完美,应该js里将所有“disabled”类的点击事件禁止。

$(function () {
          $(".disabled").click(function () {
              return false;
          });
      });

2 按钮

2.1 按钮(按钮组)

有时将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等——按钮组组件。

按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能。

对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中

<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-fast-backward"></span></button>
</div>

这里写图片描述

除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”

2.2 按钮(按钮工具栏)

在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组。
这里写图片描述
那么Bootstrap框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,如下所示:

<body>
<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>

这里写图片描述

实现原理主要是让容器的多个分组“btn-group”元素进行浮动,并且组与组之前保持5px的左外距.

在介绍按钮一节中,我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小,我们也可以通过类似的方法:

☑ .btn-group-lg:大按钮组

☑ .btn-group-sm:小按钮组

☑ .btn-group-xs:超小按钮组

只需要在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组。

像这样的按钮组一般都有插件;
富文版编辑器https://github.com/fex-team/ueditor
https://github.com/overtrue/laravel-ueditor
或者直接搜百度富文本编辑器

2.3 按钮(嵌套水平分组)

把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。

将下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级

<body>
<div class="btn-group">
  <button class="btn btn-default" type="button">首页</button>
  <button class="btn btn-default" type="button">产品展示</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <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>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

这里写图片描述

2.4按钮(嵌套垂直分组)

把水平分组的“btn-group”类名换成“btn-group-vertical”即可实现嵌套垂直分组。

<body>
<div class="btn-group-vertical">
  <button class="btn btn-default" type="button">首页</button>
  <button class="btn btn-default" type="button">产品展示</button>
  <button class="btn btn-default" type="button">联系我们</button>
  <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>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

这里写图片描述

2.5 按钮(等分按钮)

等分按钮的效果在移动端上特别的实用。
整个按钮组宽度是容器的100%,而按钮组里面的每个按钮平分整个容器宽度。例如,如果你按钮组里面有五个按钮,那么每个按钮是20%的宽度,如果有四个按钮,那么每个按钮是25%宽度,以此类推。

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

这里写图片描述

实现原理非常简单,把“btn-group-justified”模拟成表格(display:table),而且把里面的按钮模拟成表格单元格(display:table-cell)。

特别声明:
1、在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好。
2、最后一个单元格加样式style=”overflow:hidden”后,屏幕缩小时内容会被隐藏,不会造成内容外溢。
3、字体在设置时设成相对大小,即不用px作为文字大小的单位,而转换为em,或者rem,字体就不会出现溢出的问题了.
4、在<a>标签中添加样式style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"

<a class="btn btn-default" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" href="#">联系我们</a>

这里写图片描述
备注 :white-space:nowrap文本不会换行,文本会在在同一行上继续,直到遇到<br> 标签为止。

2.6 按钮下拉菜单

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

<body>
  <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>
    </ul>
  </div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

这里写图片描述

备注:
div.btn-group 元素是内联元素
div.dropdown 元素是块状元素(独占一行,会换行)
这里写图片描述

2.7 下拉菜单向上弹起

上三角形按钮:在<button>标签中添加一个带有类”caret““<span>”标签元素。

具体实现方式

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>

下三角形按钮同时下拉菜单会向上弹起(三角方向需要朝上显示):在类“.btn-group”上追加类“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>
    </ul>
</div>

这里写图片描述

注意:实际上,下拉菜单的向上、向下弹起(三角形的朝向也改变)可认为仅仅在btn-group类上是否追加一个”dropup“类。

3 导航

导航组件是独立的,根据不同的版本,可以找到对应的源码:
☑ LESS版本:对应的源文件是navs.less
☑ Sass版本:对应的源文件是_navs.scss
☑ 编译后版本:对应源码是bootstrap.css文件第3450行~第3641行

3.1 导航(基础样式)

导航条样式“.nav”(不提供默认的导航样式),必须追加其他样式才会有效,如类“nav-tabs”、“nav-pills”。

<ul class="nav nav-tabs">
    <li><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>

这里写图片描述

3.2 导航(标签形tab导航)

通过类”active”来表示当前选中状态
通过类”disabled”来表示当前禁用状态

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

这里写图片描述

备注注意:选项卡中菜单项点击后实现内容切换,需js插件配合。

3.3 导航(胶囊形(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>

这里写图片描述

3.4 导航(垂直堆叠的导航)

垂直堆叠导航是在类“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="nav-divider"></li>
    <li class="disabled"><a href="##">Responsive</a></li>
</ul>

这里写图片描述

备注:
1、
宽度默认为100%,ul中添加style=”width:80px”可对宽度进行调整
2、
在”nav-tabs”上添加“nav-stacked”是不是也能实现垂直的标签选项导航呢?答案是:在bootstrap V2.x版本可以,但在Bootstrap V3.x版本将这个效果取消了。

3.5 自适应导航(使用)

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

自适应导航和前面使用“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>

这里写图片描述

实现原理:列表(<ul>)上设置宽度为“100%”,然后每个菜单项(<li>)设置了“display:table-cell”,让列表项以模拟表格单元格的形式显示.
这里有一个媒体查询条件:“@media (min-width:768px){…}”表示自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。当浏览器视窗宽度小于768px的时候,在样式上做了另外的处理,将会按下图的风格展示:
这里写图片描述

3.6 导航加下拉菜单(二级导航)

li当作父容器,使用类名“dropdown”加入嵌套列表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 class="nav-divider"></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
      </ul>
  </li>
 <li><a href="##">关于我们</a></li>
</ul>

这里写图片描述

3.7 面包屑式导航

面包屑(Breadcrumb)导航提示用户所处页面的当前位置。通过为ol/ul/dl加入breadcrumb类

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

这里写图片描述

下段总结内容是由http://www.imooc.com/u/1067794/courses总结的,可以参考以下。
导航总结:

1.导航.nav无默认样式。导航基本样式只有.nav-tabs,.nav-pills,需和.nav同时使用。float:left

2.垂直导航:.nav-stacked.float:none;

3.自适应导航:.nav-justified. ".nav-justified>li{display:tabled-cell};ul{width:100%;}"

4.导航分割线:.nav-divider

5.li.active,li.disabledli>a,样式作用于a

6.面包屑导航:ul.breadcrumb,li.active里无a才有效果。

http://www.imooc.com/code/3183

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值