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

</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">
下拉菜单

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

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

下拉菜单项的默认的状态(不用安装)有浮动状态(: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

8、按钮(按钮工具栏)

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

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">关于我们</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">按钮下拉菜单</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">按钮下拉菜单</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-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>

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">教程</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>

 

链接

相关文章