Bootstrap框架中的下拉菜单组件,且必须在Bootstrap.js之前

  • 栏目:软件 时间:2020-01-04 12:42
<返回列表

我们接下来要学习的东西呢,是Bootstrap为我们提供的一些组件,这些组件的使用非常简单,可以方便快捷帮助我们搭建网站,并且能达到一个不错的显示效果。我们最需要注意的就是: HTML的结构 和bootstrap提供 添加到结构上的类以及属性 。

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

下拉菜单(基本用法)

这些组件的交互功能是依赖于jQuery库实现的,所以还必须引入jQuery.js,且必须在Bootstrap.js之前。正式上线的话直接使用压缩版本就可以了如下:

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

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

菜单

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单

</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>
<div >  <button  type="button" id="dropdownMenu1" data-toggle="dropdown">  下拉菜单    </button>  <ul  role="menu" aria-labelledby="dropdownMenu1">     <li role="presentation"><a role="menuitem" tabindex="-1"  >下拉菜单项</a></li>     …     <li role="presentation" ></li>     <li role="presentation"><a role="menuitem" tabindex="-1"  >下拉菜单项</a></li>  </ul>  </div>  

基本用法

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

注意:

在官方文档中,我们看到的下拉菜单组件是这样的:

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

为下拉菜单按钮增加一个箭头符号:

  下拉菜单   菜单项1 菜单项2 

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

韦德体育 1.png)

那么,到底哪一些属性是必须的、用来控制行为的呢?又有哪一部分是起到修饰作用的?

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

 韦德体育 2

我们来自己简化一下这一段代码:

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

tabindex="-1"   
 下拉菜单  菜单项1 菜单项2 

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

html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。将tabIndex赋值为-1,则在使用[Tab]键时,此元素被忽略。

我们来看看简化前后的对比图:

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单

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

 

在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。经过我们上面的简化,最终可以看到核心要求有以下几点:

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

使用方法:

使用一个名为 .dropdown 的容器包裹了整个下拉菜单元素,示例中为:

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

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

使用了一个

.dropdown{
  float: left;
}

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单

  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
   …
  </ul>
</div>

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:

按钮做为父菜单,并且定义类名 .dropdown-toggle 和自定义 data-toggle 属性,且值必须和最外容器类名一致,此示例为: data-toggle="dropdown"下拉菜单项使用一个ul列表,并且定义一个类名为 .dropdown-menu ,此示例为:

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

<div ></div>

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

2、使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:

.open > .dropdown-menu { display: block;}
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单

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

data-toggle="dropdown"

看到这里也应该不用过多说明了,添加了这个 .open 类时, .dropdown-menu 自然的就显示出来了。

7、按钮(按钮组)

对 <button> 增添类 .btn .btn-default会更加好看一些,另外尽量声明 type="button"。

下拉菜单修饰

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

 

下拉分隔线

<div class="btn-group">
  <button type="button" class="btn btn-default">

  </button>
   …
  <button type="button" class="btn btn-default">

  </button>
</div>
glyphicon glyphicon-search

glyphicon glyphicon-zoom-in

glyphicon glyphicon-zoom-out

glyphicon glyphicon-download

glyphicon glyphicon-upload

3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:

在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个 空 的

8、按钮(按钮工具栏)

<ul >

,并且给这个

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

  1. li 里面使用 a 将文字包裹

添加类名 .divider 来实现添加下拉分隔线的功能。

<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-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}

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

Bootstrap框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,如下所示:

菜单标题

 

韦德体育 3

上一小节讲解通过添加 divider 可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部:

<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">关于我们</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>

韦德体育 4.png)

第一部分菜单头部

 

因为“dropdown-menu”默认样式设置了“display:none”

10、按钮(垂直分组)

当用户点击父菜单项时,下拉菜单将会被显示出来,如下所示:

从源码中比较关键的两个点是:标题的字体颜色是: color: #777; ,还有内填充 padding: 3px 20px;

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

韦德体育 5.png)

对齐方式

11、按钮(等分按钮)

 韦德体育 6

Bootstrap框架中下拉菜单 默认是左对齐 也就是添加 .dropdown-menu-left 类所能达到的效果,如果你想让下拉菜单 相对于父容器右对齐 时,可以在 .dropdown-menu 上添加一个 .pull-right 或者 .dropdown-menu-right 类名,如下所示:

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的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>

韦德体育 7

.dropdown-menu.pull-right,.dropdown-menu-right {/*两个类自选*/ right: 0; left: auto;}

12、按钮下拉菜单

韦德体育 8.png)

当然你只进行这样的设置的话,可能还会有一些奇怪的情况出现,比如列表项跑到屏幕最右边去了,所以同时一定要为 .dropdown 添加 float:left 样式。

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

原理分析:

.dropdown{ float: left;}
<div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单</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>

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

菜单项状态

 

 

下拉菜单项的默认的状态和焦点状态:(包括下面提到的状态都必须在li中包含a标签才有- -)

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

下拉菜单(下拉分割线)

下拉菜单项除了上面两种状态,还有 当前状态 和 禁用状态 。这两种状态使用方法只需要在对应的菜单项上添加对应的类名如:

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

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

14、向上弹起的下拉菜单

韦德体育 9

我们可以实现下面这样的效果:

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

韦德体育 10.png)

按钮

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

注意:这个 .divider 的 li 因为是空的,所以可以不需要包裹<a>

我们在 《Bootstrap入门书籍之表单》 中,已经了解过了Bootstrap中按钮的使用,在这里我们继续进行一些扩展!

韦德体育 , 

 

按钮组及工具栏

15、导航(基础样式)

下拉菜单(菜单标题)

单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。这个时候我们就会需要用到按钮组

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

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

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

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

<li role="presentation" >第一部分菜单头部</li>
 向左 中间 向右

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

韦德体育 11

如何转化成工具栏呢?只需要再用一个 .btn-toolbar 的内容,将我们的 .btn-group 再进行一次包裹,同时,我们还可以使用 .btn-group-lg 大按钮组、 .btn-group-xs :超小按钮组这一系列的类添加到 .btn-group 容器来进行对一组按钮进行大小控制如下:

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

韦德体育 12.png)

   向左 中间 向右   向左 中间 向右  

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

注意:这个 li 里面没有包裹<a>,经过实验发现,只有希望鼠标放到那个 li 上面时其背景发生改变才会在那个 li 中加入<a>

上面两段代码效果如下:

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

下拉菜单(对齐方式)

这里的嵌套分组其实就是在分组按钮中嵌套了一个下拉菜单。使用的时候,只需要把当初制作下拉菜单的 .dropdown 的容器换成 .btn-group ,并且和普通的按钮放在同一级。如下所示:

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

Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名。

 首页  产品展示  公司简介 企业文化 组织结构 客服服务   关于

在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可。

注意:这个对齐是相对于父容器的。

当然我们还可以从 水平按钮组 变成 垂直分组 ,只需要在水平分组的最外层容器的类名 .btn-group 替换成 .btn-group-vertical ,就可以实现垂直分组的效果。

<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、自适应导航(使用)

下拉菜单(菜单项状态)

我们在下拉菜单和嵌套分组都都看到了一个按钮的向下三角形,我们是通过在 标签中添加一个 标签元素,并且命名为 caret ,这个三角形完全是通过CSS代码来实现的:

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。

下拉菜单项的默认的状态有悬浮状态(:hover)和焦点状态(:focus),这两个状态都不用刻意去设置。

.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent;}

 

 

有的时候我们的下拉菜单会 向上弹起 ,这个时候我们的 三角方向需要朝上 显示,实现方法:需要在 .btn-group 类上追加 dropup 类名。

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

下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名。

.dropup .caret{ content: ""; border-top: 0;/*可以看到这里top与bottom的变化*/ border-bottom: 4px solid;}

 

韦德体育 13

那么现在就来对比一下,上面代码以及类的添加可以达到的不同效果:

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

 

导航

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

按钮(按钮组)

导航对于一位前端开发人来说眼应该都不陌生。可以说,每一个网页里面都会有导航的存在,便于用户查找网站所提供的各项功能服务。那么如何使用Bootstrap框架制作各式各样的导航呢?

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

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

基础样式

前面介绍的都是使用Bootstrap框架制作一级导航,但很多时候,在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul,使用前面介绍下拉菜单的方法就可以。

<div >    <button type="button" >           </button>     …    <button type="button" >           </button>  </div>  

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

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

运行效果如下所示:

22、面包屑式导航

韦德体育 14

当然他们同样也有 当前状态 和 禁用状态 ,我们给第一个导航添加当前状态,最后一个导航添加禁用状态,实现效果如下:

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

韦德体育 15.png)

修饰

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

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

垂直堆叠的导航

 

注意:glyphicon-step-backward 等代表对应的图标。

在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在 .nav-pills的基础上添加一个 .nav-stacked 类名即可,同时,我们和下拉菜单一样,同样可以使用组之间的分割线例,只需要在导航项之间添加

链接

 

,如:

按钮(按钮工具栏)

对于多个按钮,想让其中的一部分为一组,其中的另一个部分为另一组的话:

复制到浏览器中看看效果吧!

你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,如下所示:

你应该已经发现了在垂直导航中,每一个导航项都是占 文字居左 ,占100%的父容器宽度的,如果你想有响应式的效果,应该和栅格系统一起使用,另外为什么不试试使用 nav-tabs 来实现垂直导航呢?看看效果,你就会明白为什么不使用了。

<div >    <div >      …    </div>    <div >      …    </div>    <div >      …    </div>    <div >      …    </div>  </div>  

自适应导航

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

自适应导航和前面制作自适应按钮是一样的,不过更换了一个类名, .nav-justified 。当然他需要和 .nav-tabs 或者 .nav-pills

韦德体育 16

配合在一起使用。 它是响应式的,在宽度足够时,给多个导航项,均分空间;在达到一个临界值时,它会和垂直导航一样:每一项都充满父容器的宽度,不同的是,他的文字是 居中显示 的

注意:是 div.toolbar 包裹 div.btn-group,然后 div.btn-group 包裹同一个组的 button

导航中加下拉菜单

 

前面介绍的都是使用制作一级导航,但很多时候,在Web页面常常会用到二级导航的效果。

按钮组大小设置

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

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

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

这里的话不进行太多的讲解,与上面的嵌套按钮效果一致。

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

面包屑式导航

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

面包屑一般用于导航,主要是起的作用是告诉用户现在所处页面的位置。一般在文章、博客、列表处用的比较多,需要用到 .breadcrumb 类。

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

 个人首页 标签 Bootstrap

韦德体育 17

关于Bootstrap入门书籍之菜单、按钮及导航的相关知识就给大家介绍这么多,下篇给大家介绍Bootstrap入门书籍之导航条、分页导航,感兴趣的朋友继续关注,谢谢!

 

按钮(嵌套分组)

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

使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。如下所示:

<div >  <button  type="button">首页</button>  <button  type="button">产品展示</button>  <button  type="button">案例分析</button>  <button  type="button">联系我们</button>  <div >     <button  data-toggle="dropdown" type="button">关于我们</button>     <ul >           <li><a  >公司简介</a></li>           <li><a  >企业文化</a></li>           <li><a  >组织结构</a></li>           <li><a  >客服服务</a></li>      </ul>  </div>  </div>  

韦德体育 18

 

按钮(垂直分组)

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

韦德体育 19

韦德体育 20.png)

按钮(等分按钮)

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

等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名

特别声明:在制作等分按钮组时,请尽量使用<a>标签元素来制作按钮,因为使用<button>标签元素时,使用display:table在部分浏览器下支持并不友好。

<a   >首页</a>  

 

按钮的向下向上三角形

按钮的向下三角形,我们是通过在<button>标签中添加一个“<span>”标签元素,并且命名为“caret”

 

有的时候我们的下拉菜单会向上弹起(接下来一个小节会介绍),这个时候我们的三角方向需要朝上显示,实现方法:需要在“.btn-group”类上追加“dropup”类名(这也是做向上弹起下拉菜单要用的类名)。

注意:对于 button 里面依然需要一个 span.caret

 

向上弹起的下拉菜单

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

韦德体育 21.png)

 韦德体育 22

导航(基础样式)

导航基础样式

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为 ul 标签加入.nav和nav-tabs两个类样式。注意是给 ul 标签而不是 div

韦德体育 23.png)

韦德体育 24

 

韦德体育 25.png)

韦德体育 26

 

韦德体育 27.png)

韦德体育 28

 

导航(胶囊形(pill)导航)

 

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

<ul >        <li ><a  >Home</a></li>        <li><a  >CSS3</a></li>        <li><a  >Sass</a></li>        <li><a  >jQuery</a></li>        <li ><a  >Responsive</a></li>  </ul>

韦德体育 29

韦德体育 30.png)

注意:li 里面的内容都要放到 a 中。

 

导航(垂直堆叠的导航)

在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可:

<ul >       <li ><a  >Home</a></li>       <li><a  >CSS3</a></li>       <li><a  >Sass</a></li>       <li><a  >jQuery</a></li>       <li ><a  >Responsive</a></li>  </ul>  

运行效果如下:

韦德体育 31.png)

 韦德体育 32

大家是否还记得,在下拉菜单一节中,下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果,只需要添加在导航项之间添加“<li class=”nav-divider”></li>”即可

 

自适应导航(使用)

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如:

<ul >       <li ><a  >Home</a></li>       <li><a  >CSS3</a></li>       <li><a  >Sass</a></li>       <li><a  >jQuery</a></li>       <li><a  >Responsive</a></li>  </ul>  

 

自适应导航(实现原理)

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

这里有一个媒体查询条件:“@media (min-width:768px){…}”表示自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。当你的浏览器视窗宽度小于768px的时候,将会按下图的风格展示:

韦德体育 33.png)

 韦德体育 34

 

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

在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul,使用前面介绍下拉菜单的方法就可以:

<ul >       <li ><a  >首页</a></li>       <li >          <a    data-toggle="dropdown">教程</a>          <ul >              <li><a  >CSS3</a></li>              …         </ul>       </li>       <li><a  >关于我们</a></li>  </ul>  

注意是在 li 上面加类 dropdown,而是 .dropdown-toggle 不再是添加到 button 上而是添加在 a 上面,因此 a 也不需要 .btn 和 .btn-default,另外 a 里面一定要有 ,不然鼠标放上去光标不会发生改变。

韦德体育 35.png)

 韦德体育 36

在二级导航中用分隔线只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以了。

 

面包屑式导航

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

使用方法:

使用方式就很简单,为ol加入breadcrumb类:

<ol >    <li><a  >首页</a></li>    <li><a  >我的书</a></li>    <li >《图解CSS3》</li>  </ol>

韦德体育 37韦德体育 38.png)

注意:是 ol 而不是 ul

 

来自: 整理

 


上一篇:当渲染引擎遇到script的时候 下一篇:具体如下

更多阅读

Bootstrap框架中的下拉菜单组件,且必须在

软件 2020-01-04
我们接下来要学习的东西呢,是Bootstrap为我们提供的一些组件,这些组件的使用非常简单,可...
查看全文

【韦德体育】Flexbox 从本质上就是一个

软件 2020-01-04
滑动拼图就是把一张图片分成几等份,打乱顺序,然后通过滑动拼凑成一张完整的图片。 请各...
查看全文

当渲染引擎遇到script的时候

软件 2020-01-04
在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有