bootstrap学习笔记之三（组件的使用）

bootstrap组件需要引入bootstrap.js才行，当然要引入bootstrap.js首先得引入JQuery。

一、下拉菜单

　　将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了position：relative 的元素。原因是dropdown-menu元素设定了position:absolute，且top：100%； left: 0；所以需要包裹在设定了position：relative的元素内。

.dropup,
.dropdown {
  position: relative;
}

1 .dropdown-menu {
2   position: absolute;
3   top: 100%;
4   left: 0;
5 }

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

　　查看代码我们可以看到，下拉菜单包括一个下拉开关按钮，需要添加类名dropdown-toggle，同时还得添加一个属性data-toggle="dropdown"，然后还包括一个ul下拉选项，需要添加类名dropdown-menu。

　　如需添加下拉菜单的标题，则只需要在li中添加一个类名dropdown-header即可。不过此时li中的内容不应被a标签包裹了，而是直接写在li标签内。

　　如需在下拉菜单中添加分割线，只需要在空的li中添加类名divider即可。

　　下拉菜单还是很简单的。

2、继续学习按钮组

　　暂时感觉单纯的按钮组没有多大用！

　　为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组，需要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"。

　　此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中，我们使用 aria-label，但是， aria-labelledby 也可以使用。

　　只需要把几个button标签放进一个btn-group的div类中既可以形成一个按钮组。而把几个按钮组btn-group放进一个btn-toolbar的标签中既可以形成一个工具栏。不过注意此时的btn-group和btn-toolbar要分别添加role="group"和role="toolbar"。

　　按钮组的尺寸：

　　只需要给btn-group类添加类名btn-group-lg，btn-group-md，btn-group-sm，btn-group-xs既可以改变按钮组的大小。在第二节，学习按钮时改变按钮的大小时是通过给btn添加类名btn-lg，btn-md,btn-sm,btn-xs完成时，此时只是在父集btn-group一块操作罢了。

　　按钮组嵌套下拉菜单，只需要只须把 .btn-group 放入另一个 .btn-group 中。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

　　　　

　　　　之前说过下拉菜单组只要放在一个有相对定位的父集中即可，把它放在btn-group中当然可以，而把btn-group放入btn-group中当然也可以，因为btn-group的宽度并没有占全屏的。

　　　　给btn-group添加btn-group-vertical即可以使按钮组垂直排列。

　　　　下面是一个非常实用的按钮组，两端对齐排列的按钮组，如果按钮是a标签的话，直接在btn-group中添加btn-group-justified类既可以实现按钮组的宽度自动充满父集的宽度，当然也可以自动充满container的宽度，按钮组的宽度平均分配给里边的button元素。

　　　　　　　　　<div class="btn-group btn-group-justified" role="group" aria-label="...">
                  <a type="button" class="btn btn-default">1</a>
                  <a type="button" class="btn btn-default">2</a>                
                  <a type="button" class="btn btn-default">3</a>                
                  <div class="btn-group" role="group">
                    <a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown
                      <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown link</a></li>
                      <li><a href="#">Dropdown link</a></li>
                    </ul>
                  </div>
                </div>

　　而button元素则需要内嵌在类名为btn-group的div元素中，如下：

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

　　按钮式下拉菜单也非常简单，只需要把几个内嵌有下拉菜单的几个下拉菜单放一块就是一个按钮式下拉菜单

　　分列式下拉菜单也只是下拉菜单触发器那里的三角符号稍微有些改变，其它的都没有变化。

　　尺寸也只是在btn按钮中添加了btn-lg，btn-sm，btn-xs。

3、现在进行输入框组

　　输入框组只是把之前在form表单中学过的form元素里边的 .input-group 类赋予.input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。个人觉得没什么好说的，很简单，而且实用性也不太强。

4、导航

　　Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。

　　如果你在使用导航组件实现导航条功能，务必在 <ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件。不要将 role 属性添加到 <ul> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。

　　标签页：注意 .nav-tabs 类依赖 .nav 基类。如果没有.nav标签则不行。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

 　　胶囊式标签页：把nav-table类改为nav-pills类即可。

　　　　胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。两端对齐的标签页：和两端对齐的按钮组一样，按钮组是在btn-group中添加btn-justified，而导航标签页是在nav标签中添加nav-justified类。

　　　　添加下拉菜单的标签页也是很简单的，只需要把下拉菜单代码放入li标签中即可。

5、导航条

　　导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。　

　  导航条的可访问性：

　　务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

　　导航栏中的默认样式还是可以的，比较新颖，考虑到的导航栏的长度问题，如果导航栏元素太多，会导致在小尺寸的屏幕上放不下，所以设计了这个效果，挺好！

  　导航栏中的表单，将表单form-group类放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。个人觉得此时的折叠效果就没那么必要了。如下。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

　　导航栏中的按钮，对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。

　　导航栏中的文本，把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签；

　　导航栏中的组件排列，通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。

　　把导航栏固定在顶部，添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。不过此时必须为body元素设定padding-top，一般为50px。

　　把导航栏静止在顶部，添加.navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个.container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。这和不设有什么区别呢？似乎也没什么区别。

　　反色的导航条：通过添加 .navbar-inverse 类可以改变导航条的外观颜色。

6、路径导航

　　在一个带有层次的导航结构中标明当前页面的位置。在ul或者ol中添加类名breadcrumb即可。各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。

 

7、分页

　　默认分类：只需在父集标签上加上pagination类即可。大小可由pagination，pagination-sm，pagination-lg控制。

 

 

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

 

　　默认翻页，默认居中，形状为椭圆形。只需在ul上加上page类即可。

　　

8、警告框

　　警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。

 

　　可关闭的警告框，需要给警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。并在给 <button> 元素添加 data-dismiss="alert" 属性。

　　

9、进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

　　分三类：

　　1、默认效果； 2、条纹效果，只需在progress-bar类中添加progress-bar-striped类即可。IE9 及更低版本的浏览器不支持。 3、动画效果，在需在为.progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

10、列表组

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

11、面板

　　默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

　　带标题的面板

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

　　带表格的面板

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

　　带列组表的面板　

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

12、具有响应式的嵌入内容

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>