表格
-
<table>
.table:为任意<table>
添加基本样式 (只有横向分隔线)
.table-striped:在<tbody>
内添加斑马线形式的条纹
.table-bordered:为所有表格的单元格添加边框
.table-hover :在<tbody>
内的任一行启用鼠标悬停状态
.table-condensed:让表格更加紧凑 -
<tr>,<th>,td>类
.active:将悬停的颜色应用在行或者单元格上
.success:表示成功的操作
.info:表示信息变化的操作
.warning:表示一个警告的操作
.danger:表示一个危险的操作
表单
- 垂直表单(默认)
创建基本表单的步骤:
(1)向父元素<form>
添加 role=“form”。
(2)把标签和控件放在一个带有 class .form-group 的<div>
中。
(3)向所有的文本元素 、 和 添加 class =“form-control” 。 - 内联表单 向父元素
<form>
添加 class .form-inline。 - 水平表单
创建一个水平布局的表单:
(1)向父元素<form>
添加 class .form-horizontal。
(2)把标签和控件放在一个带有 class .form-group 的<div>
中。
(3)向标签添加 class .control-label。
按钮
- 按钮样式
.btn:为按钮添加基本样式
.btn-default:默认/标准按钮
.btn-primary :原始按钮样式(未被操作)
.btn-success:表示成功的动作
.btn-info:该样式可用于要弹出信息的按钮
.btn-warning:表示需要谨慎操作的按钮
.btn-danger:表示一个危险动作的按钮操作
.btn-link:让按钮看起来像个链接 (仍然保留按钮行为) - 按钮大小
.btn-lg:制作一个大按钮
.btn-sm:制作一个小按钮
.btn-xs:制作一个超小按钮
.btn-block:块级按钮(拉伸至父元素100%的宽度) - 按钮状态
.active:按钮被点击
.disabled:禁用按钮
图片
其他辅助类
.pull-left:元素浮动到左边
.pull-right :元素浮动到右边
.center-block:设置元素为 display:block 并居中显示
.clearfix:清除浮动
.show:强制元素显示
.hidden:强制元素隐藏
.sr-only:除了屏幕阅读器外,其他设备上隐藏元素
.sr-only-focusable:与 .sr-only 类结合使用,在元素获取焦点时显示
.text-hide :将页面元素所包含的文本内容替换为背景图
.close:显示关闭按钮
.caret:显示下拉式功能