Bootstrap组件介绍

1、下拉菜单

　　用于显示连接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具备了交互性。

一、实例

　　将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另外一个声明了 position: relative; 的元素。而后加入组成菜单的 HTML 代码。

<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 role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

　　aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。

　　aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的

　　aria-labelledby：当想要的标签文本已在其余元素中存在时，可使用aria-labelledby，并将其值为全部读取的元素的id。以下：

　　当ul获取到焦点时，屏幕阅读器是会读：“选择您的职位”

　　data-toggle: 表示什么事件类型发生

2、按钮式下拉菜单

　　把任意一个按钮放入 .btn-group 中，而后加入适当的菜单标签，就可让按钮做为菜单的触发器了。

 

一、单按钮下拉菜单

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

　　鼠标指向时，显示背景颜色。

二、分裂式下拉菜单

　　只是多一个分开的按钮。

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

　　能够看到分红了左右两个按钮。

 

 3、面板

 　　某些时候你可能须要将某些 DOM 内容放到一个盒子里。对于这种状况，能够试试面板组件。

 一、基本实例

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

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

　　显示效果：

　　

二、带标题的面板

　　经过 .panel-heading 能够很简单地为面板加入一个标题容器。你也能够经过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预约义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

　　为了给连接设置合适的颜色，务必将连接放到带有 .panel-title 类的标题标签内。