Bootstrap框架(组件)
按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。
按钮组中的工具提示和弹出框需要特别的设置
当为 .btn-group
中的元素应用工具提示或弹出框时,必须指定 container: 'body'
选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。
确保设置正确的 role
属性并提供一个 label 标签
为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合适的 role
属性。对于按钮组合,应该是 role="group"
,对于toolbar(工具栏)应该是 role="toolbar"
。
一个例外是按钮组合只包含一个单一的控制元素或一个下拉菜单(比如实际情况,<button>
元素组成的两端对齐排列的按钮组 )或下拉菜单。
此外,按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的 role
属性,但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中,我们使用 aria-label
,但是, aria-labelledby
也可以使用。
基本实例
Wrap a series of buttons with .btn
in .btn-group
.
胶囊式标签页
HTML 标记相同,但使用 .nav-pills
类:
导航条
默认样式的导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。
两端对齐的导航条导航链接已经被弃用了。
默认分页
受 Rdio 的启发,我们提供了这个简单的分页组件,用在应用或搜索结果中超级棒。组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大。
对齐链接
你还可以把链接向两端对齐:
徽章
给链接、导航等元素嵌套 <span class="badge">
元素,可以很醒目的展示新的或未读的信息条目。
巨幕
这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。