bootstrap初学之（4）组件

bootstrap初学之（4）组件

只记录一些自己碰见觉得不了解 查询的 具体参考http://v3.bootcss.com/components/

组件[/color]

主要 Glyphicons 字体图标 、下拉菜单、导航、警告框、弹出框、
color=#ff0000Glyphicons 字体图标###
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
aria-hidden="true"是什么意思
图标的可访问性
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别，例如，包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果。
如果你所创建的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其他的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其作用了。这种情况下，你可以为控件添加 aria-label 属相。
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>[/color]
alert 组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的 .sr-only 文本就可以让辅助设备知道这条提示所要表达的意思了
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
color=#ff0000下拉菜单[/color]###
.dropdown .dropup
<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 dropdown-menu-right" 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表示没有效果。
aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。
在 .dropdown-menu 上：添加 aria-labelledby="..."，值为受指向标签的 id，在这里等同于设置 aria-label="Dropdown"，屏幕阅读器读到这里时，就会读出 Dropdown 这个单词。

导航[/color]

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的
[color=#ff0000]标签页
注意 .nav-tabs 类依赖 .nav 基类。
胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类：
胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
<ul class="nav nav-pills nav-stacked">
...
</ul>

徽章[/color]

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目
[color=#92cddc]<ul class="list-group">／／列表框
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
可关闭的警告框
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

Well[/color]

把 Well 用在元素上，就能有嵌入（inset）的简单效果。
[color=#92d050]<div class="well">...</div>
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>