Bootstrap中的关键CSS总结

最近在学习Bootstrap，虽然说Bootstrap是一个框架，但是和其他前端框架相比，Bootstrap中的CSS部分应该是我们需要着重学习的部分。下面仅总结一下我认为Bootstrap中较重要的CSS类。

栅格系统相关类

• 所有.row必须放置在.container或者.container-fluid中。
• 每个.row中均分为12个.col-*，网页内容只能放在.col-*中，不能放在.row中，.col-*中可以嵌套.row
• .col-*根据屏幕大小可以分为
  
  • .col-lg-*:适用于大型屏幕（min-width=1200px）
  • .col-md-*:适用于中型屏幕（min-width=992px）
  • .col-sm-*:适用于平板设备（min-width=768px）
  • .col-xs-*:适用于手机设备 (max-width = 767px)
• 可以为一个元素指定不同屏幕下的宽度，即在不同屏幕宽度下表现不同的样式。但是注意：
  
  • .col-xs-*：对所有屏幕都有效
  • .col-sm-*：对平板设备及以上设备有效
  • .col-md-*：对中型及以上宽度屏幕有效
  • .col-lg-*：仅对于大型屏幕有效
    也就是说，要是你希望一个div在xs和lg类型下的设备都表现一致，仅需设置.col-xs-*即可。
• 隐藏相关类：
  
  • .hidden-lg:在大PC屏幕下隐藏
  • .hidden-md:在中等PC屏幕下隐藏
  • .hidden-sm:在平板屏幕下隐藏
  • .hidden-xs:在手机屏幕下隐藏
• 偏移相关类
  
  • .col-xs-offset-*:在lg/md/sm/xs屏幕下偏移
  • .col-sm-offset-*:在lg/md/sm屏幕下偏移
  • .col-md-offset-*:在lg/md屏幕下偏移
  • .col-lg-offset-*:在lg屏幕下偏移

表单相关类

• .form-control:控制input元素占满一整行
• .form-group:使label和相关input控件成组
• .help-block:提示文字相关类
• .from-inline:是表单呈现为水平样式(所有控件在一行显示)
• .checkbox:专门为checkbox控件的父元素准备的类
• .form-horizontal:表单控件的.form-group可以看成.row,子元素的水平排布使用.col-*来控制
• .control-label:可以使得元素内的文本向右对齐。

媒体对象

• .media表示一个媒体对象。
• .media-left,.media-body,.media-right表示一个媒体对象的组成部分。可以看做一行中的左中右部分。
• .media-middle,.media-bottom表示媒体对象中的内容的垂直对齐方式，默认水平对齐。

面板

• .panel:表示一个面板
• .panel-body:面板主体
• .panel-heading:面板头部
• .panel-footer:面板底部
• .panel-title:用于当做专门当做标题而作为.panel-heading子元素的类。可以这样使用<h3 class="panel-title">Panel title</h3>。

表格

• .table:加在table上，表示一个表格。
• .table-bordered:带有边框的表格，需要与.table一起使用
• .table-responsive:响应式表格，需要与.table一起使用
• .table-striped:隔行变色表格，需要和.table一起使用
• .table-hover:悬停变色表格，需要和.table一起使用