Bootstrap组件介绍

一、下拉菜单

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

1、实例

　　将下拉菜单触发器和下拉菜单都包裹在

.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: 表示什么事件类型发生

二、按钮式下拉菜单

　　把任意一个按钮放入

.btn-group

中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

 

1、单按钮下拉菜单

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

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

2、分裂式下拉菜单

　　只是多一个分开的按钮。

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

　　 可以看到分成了左右两个按钮。

 

 三、面板

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

 1、基本实例

　　默认的

.panel

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

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

　　显示效果：

　　

2、带标题的面板

　　通过

.panel-heading

可以很简单地为面板加入一个标题容器。你也可以通过添加设置了

.panel-title

类的

<h1>

-

<h6>

标签，添加一个预定义样式的标题。不过，

<h1>

-

<h6>

标签的字体大小将被

.panel-heading

的样式所覆盖。

　　为了给链接设置合适的颜色，务必将链接放到带有

.panel-title

类的标题标签内。