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

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

在运用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">
下拉菜单

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

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

Bootstrap框架中的下拉菜单组件,其下拉菜单项暗中同意是藏身的,因为“dropdown-menu”暗中认同样式设置了“display:none”,当用户点击父菜单项时,下拉菜单将会被出示出来,当用户再次点击时,下拉菜单将持续隐藏。将来大家来分析一下贯彻原理,分外简单,通过js技术手段,给父容器“div.dropdown”添加或移除类名“open”来支配下拉菜单凸显或隐蔽。也等于说,暗中同意情形,“div.dropdown”没有类名“open”,当用户率先次点击时,“div.dropdown”会添加类名“open”;当用户再一次点击时,“div.dropdown”容器中的类名“open”又会被移除。

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

在Bootstrap框架中的下拉菜单还提供了下拉分隔线,如果下拉菜单有五个组,那么组与组之间可以透过丰硕1个空的<li>,并且给这几个<li>添加类名“divider”来促成拉长下拉分隔线的功能。

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

由此丰盛“divider”可以将下拉菜单分组,为了让这几个分组更明了,还足以给各种组添加1个头顶(标题)。

<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框架中下拉菜单默许是左对齐,假设您想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加3个“pull-right”恐怕“dropdown-menu-right”类名。同时必将要为.dropdown添加float:leftcss样式。

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

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

下拉菜单项的暗中认同的景观(不用安装)有浮动状态(:hover)和关节状态(:focus),下拉菜单项除了下边三种状态,还有当前情景(.active)和剥夺状态(.disabled)。

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

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

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

⑧ 、按钮(按钮工具栏)

那就是说Bootstrap框架按钮工具栏也提供了这么的制作方法,你只须要将按钮组“btn-group”按组放在多少个大的容器“btn-toolbar”中,已毕原理紧即使让容器的多少个分组“btn-group”成分举行变更,并且组与组从前保持5px的左外距。在介绍按钮一节中,大家通晓按钮是通过btn-lg、btn-sm和btn-xs多少个类名来调整padding、font-size、line-height和border-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>

玖 、按钮(嵌套分组)

过多时候,大家常把下拉菜单和普通的按钮组排列在一块儿,完成类似于导航菜单的作用。使用的时候,只须要把当下制作下拉菜单的“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">关于我们</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>

 

十 、按钮(垂直分组)

实际运用当中,总会遇到垂直突显的意义。在Bootstrap框架中也提供了这么的品格。大家只需求把水平分组的“btn-group”类名换来“btn-group-vertical”即可。

1壹 、按钮(等分按钮)

等分按钮的效应在运动端上专门的实用。整个按钮组宽度是容器的百分百,而按钮组里面的逐个按钮平分整个容器宽度。例如,若是您按钮组里面有几个按钮,那么每种按钮是1/5的涨幅,如若有三个按钮,那么各个按钮是肆分之一升幅,以此类推。等分按钮也常被喻为是自适应分组按钮,其完结格局也十二分的不难,只需求在按钮组“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>

1二 、按钮下拉菜单

按钮下拉菜单其实就是常见的下拉菜单,只可是把“<a>”标签元素换来了“<button>”标签成分。唯一不相同的是表面容器“div.dropdown”换来了“div.btn-group”。

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

 

1③ 、按钮的向下发展三角形

按钮的向下三角形,大家是透过在<button>标签中添加多个“<span>”标签成分,并且命名为“caret”,有的时候大家的下拉菜单会向上弹起(接下去三个小节会介绍),那一个时候大家的三角形方向必要朝上出示,已毕格局:必要在“.btn-group”类上加码“dropup”类名(那也是做向上弹起下拉菜单要用的类名)。

1四 、向上弹起的下拉菜单

些微菜单是亟需向上弹出的,比如说你的食谱在页面最尾部,而以此菜单正好有三个下拉菜单,为了让用户有更好的经验,不得不让下拉菜单向上弹出。在Bootstrap框架中特意为那种成效提代了2个类名“dropup”。使用方法正如前方所示,只要求在“btn-group”上加上这几个类名(当然,如若是普普通通向上弹出下拉菜单,你只须求在“dropdown”类名基础上加码“dropup”类名即可)。

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

 

1伍 、导航(基础样式)

Bootstrap框架中创设导航条首要透过“.nav”样式。专断认同的“.nav”样式不提供默许的导航样式,必须叠加别的3个体裁才会使得,比如“nav-tabs”、“nav-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>

1八 、导航(垂直堆叠的导航)

在实质上采取当中,除了水平导航之外,还有垂直导航,就象是前边介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“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>

1⑨ 、自适应导航(使用)

自适应导航指的是导航占据容器全体开间,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和后面使用“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>)上安装宽度为“百分之百”,然后各种菜单项(<li>)设置了“display:table-cell”,让列表项以模拟表格单元格的样式显示。

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

前方介绍的都以采纳Bootstrap框架制作一流导航,但众多时候,在Web页面中是离不开二级导航的机能。那么在Bootstrap框架中创立二级导航就更便于了。只要求将li当作父容器,使用类名“dropdown”,同时在li中嵌套另2个列表ul,使用前边介绍下拉菜单的章程就可以。

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

2二 、面包屑式导航

面包屑(Breadcrumb)一般用于导航,主假如起的效应是报告用户以后所处页面的职位(当前岗位)。

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

 

链接

相关文章