Bootstrap全局样式系列二——代码、表格、表单

代码

  1. <code></code>: 包裹内联样式的代码片段(背景为红)
  2. <kdb></kdb>: 标记用户通过键盘输入的内容(背景黑化)
  3. <pre></pre>: 原格式输出(灰色圆角背景)
  4. <var></var>: 变量样式(倾斜角度)
  5. <samp></samp>: 程序样式(字体样式、大小发生改变)

表格

  1. .table 填充页面,无边框,自适应
  2. .table-striped 可以给每一行增加斑马条纹样式
  3. .table-bordered 每个单元格添加边框
  4. .table-hover 鼠标划过样式
  5. .table-condensed 上下padding减半
  6. .table-responsive: 响应式表格,包裹table,在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失
class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

表单

  1. div.form-group: 可以获得最好的排列
  2. input\textarea\select.form-control: 设置了.form-control 类的<input><textarea><select>元素都将被默认设置宽度属性为width: 100%;
  3. p.help-block : 灰色字体较小
  4. form.form-inline: 内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)
  5. label.sr-only: 将label标签隐藏(等同于hide)
  6. form.form-horizontal: 联合使用 Bootstrap 预置的栅格类,将 label 标签和控件组水平并排布局
  7. .disabled: 禁选(单选框复选框)
  8. .checkbox-inline\.radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,内联
  9. <fieldset></fieldset>: 区域。为<fieldset>设置 disabled 属性,可以禁用<fieldset>中包含的所有控件(除标签以外)
  10. readonly: 输入框属性,只读模式
  11. div.has-success\.has-warning\.has-error: 表单控件的校验状态
  12. div.has-feedback包裹<input />以及<span class="glyphicon glyphicon-ok form-control-feedback"></span>: 在input输入框内新增图标,glyphicon glyphicon-ok为图标名称

猜你喜欢

转载自blog.csdn.net/a839371666/article/details/79908280