bootstrapCSS中常用的布局的类名

1. 版心——container （默认为1200px）

2. 网格系统（分为12列）

   1. 行的类名——row
   2. 列的类名——col（下面为适配各尺寸设备的类名划分）number为所占网格数字
      1. 超小设备手机（<768px）            col-xs-number
      2. 小型设备平板电脑（≥768px）     col-sm-number
      3. 中型设备台式电脑（≥992px）     col-md-number
      4. 大型设备台式电脑（≥1200px）   col-lg-number
   3. 偏移列——col-md-offset-number

3. 表格table

   1. 为任意 <table> 添加基本样式 (只有横向分隔线)——table
   2. 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)——table-striped
   3. 为所有表格的单元格添加边框——table-bordered
   4. 在 <tbody> 内的任一行启用鼠标悬停状态——table-hover
   5. 让表格更加紧凑——table-condensed

4. 表格中的<tr>, <th> 和 <td> 类

   1. 将悬停的颜色应用在行或者单元格上——active

   2. 表示成功的操作——success

   3. 表示一个警告的操作——warning

   4. 表示一个危险的操作——danger

5. 表单

   1. 垂直或基本表单

      1. 向父 <form> 元素添加 role="form"

      2. 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
      3. 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 
   2. 内联表单
      1. 如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline
   3. 水平表单
      1. 向父 <form> 元素添加 class .form-horizontal
      2. 把标签和控件放在一个带有 class .form-group 的 <div> 中
      3. 向标签添加 class .control-label

6. 按钮

   1. 为按钮添加基本样式——btn
   2. 默认/标准按钮——btn-default
   3. 原始按钮样式（未被操作）——btn-primary
   4. 表示成功的动作——btn-success
   5. 该样式可用于要弹出信息的按钮——btn-info
   6. 表示需要谨慎操作的按钮——btn-warning
   7. 表示一个危险动作的按钮操作——btn-danger
   8. 让按钮看起来像个链接 (仍然保留按钮行为)——btn-link
   9. 制作一个大按钮——btn-lg
   10. 制作一个小按钮——btn-sm
   11. 制作一个超小按钮——btn-xs
   12. 块级按钮(拉伸至父元素100%的宽度)——btn-block
   13. 按钮被点击——active
   14. 禁用按钮——disabled

7. 图片

   1. 将图片变为圆形 (IE8 不支持)——img-circle
   2. 缩略图功能——img-thumbnail
   3. 图片响应式 (将很好地扩展到父元素)——img-responsive

8. bootstrap响应式实用工具

   1. 显示
      1. 小于768px——visible-xs
      2. 大于768px小于992px——visible-sm
      3. 大于992px小于1200px——visible-md
      4. 大于1200px——visible-lg
   2. 隐藏
      1. 小于768px——hidden-xs
      2. 大于768px小于992px——hidden-sm
      3. 大于992px小于1200px——hidden-md
      4. 大于1200px——hidden-lg

原文地址：https://www.jb51.cc/wenti/3281309.html