1.字体图标
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
- glyphicon:图标的通用类
- glyphicon-star:图标类型(样式)
- aria-hidden="true":通用,避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容
实例:
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button>
效果:
2.下拉菜单
- dropup:向上弹出
- dropdown:向下弹出
- dropdown-menu:下拉菜单的通用类
- dropdown-menu-right:向右对齐
- dropdown-menu-left:向左对齐(默认情况)
- role="separator" class="divider":为下拉菜单添加一条分割线
- disabled:禁用菜单的选项
- dropdown-toggle:下拉菜单通用类
3.按钮组
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> </div>
btn-group:按钮容器通用类
role=“group”:按钮,为了正确传达按钮分组
role=“toolbar”:工具栏,就是里面再包裹多个role=“group”
btn-group-lg/sm/xs:按钮组的尺寸(大/略小/很小)
btn-group-vertical:让按钮垂直排列
btn-group-justified:两段对齐排列按钮组(居于屏幕中间)
btn-lg/sm/xs:按钮时下拉菜单的所有尺寸
4.输入框组
input-group:输入框组
input-group-addon:input框两边添加字符
input-group-btn:input框两边添加按钮
input-group-lg/sm:input框的大小
5.导航
role="navigation":如果想在导航组件上实现导航功能,必须添加
nav:导航的基类
nav-tabs:基本标签页
nav-pills:胶囊式标签页
nav-stacked:垂直方向(只适合胶囊)
nav-justified:两端对齐的(置于屏幕中间,自动调整尺寸)
disabled:禁用的链接(任何导航组件都可以添加)
6.导航条
navbar:导航条通用类
navbar-default:默认样式(颜色、高度等)
role="navigation":增加访问性
navbar-header:导航标题
navbar-brand:让字体变粗,一般包含在标题之内
navbar-form:将表单放在里面可以垂直对齐
navbar-left/right:让导航链接、表单、按钮或文本对齐
navbar-btn:不包含在form中的元素,使用此属性可以在导航条中居中
navbar-text:导航条中的文本
navbar-link:让链接有正确的默认颜色和反色设置
navbar-fixed-top:让导航条固定在顶部,可以包含容器,让导航条居中。
导航条可能会遮住页面其它内容,需要设置一个padding-top。
navbar-fixed-bottom:让导航条固定到底部,需设置padding-bottom,不然也会遮住其它内容
navbar-static-top:创建夜歌与页面等宽度的导航条,但是往下拉会消失。
navbar-inverse:反色,改变导航条的外观。
7.路径导航
pagination:路径导航通用类
8.分页
Page navigation:分页
pagination-lg/sm:尺寸
pager:翻页
previous/next:对齐链接
disabled:禁用状态
9.标签
label-default/primary/success/info/warning/danger:标签的外观
<h1>~<h6>:尺寸
10.徽章
badge:徽章
11.巨幕
jumbotron:巨幕
12.页头
page-header:页头组件能够为h1标签增加适当的空间,与其他页面也有一些分隔。
13.警告框
alert-dismissible:可关闭的警告框
alert-success/info/warning/danger:为弹出框设置颜色
14.进度条
progress:进度条通用类
progress-bar:进度条本身设置
progress-bar-success/info/warning/danger:设置颜色
progress-bar-striped:进度条条纹
active:动画效果
15.媒体对象
media: 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。
media-right/left:浮动到左边或右边
media-body/heading:媒体对象主体或头部
media-list:媒体对象中的列表
16.列表组
list-group :用于以列表形式呈现复杂的和自定义的内容
list-group-item:列表中的项
17.面板
panel:面板基本类
panel-default:默认属性
panel-heading:面板头部
panel-body:面板标题会和表格连接起来,没有空隙
panel-title:面板标题
<h1>-<h6>:字体大小
panel-footer:带脚注的面板
18.well
well:嵌入简单的效果
well-sm/lg:尺寸