css全局样式

1、布局容器

• .container 容器

  固定宽度，支持响应式布局
  

• .container-fluid 容器 流式布局

  100%宽度，占据全部视口
  

2、栅格系统

栅格系统的行列元素需要放在布局容器中，方便排列

• 行 .row 创建一行内容 一行分12块
• 列 .col-xs-6 .col-sm-6 .col-md-6 .col-lg-6

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 (≥1200px)
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
最大列（column）宽	自动	~62px	~81px	~97px

• .col-md-offset-* 类可以将列向右侧偏移
• 列排序 ？？？

3、排版

对齐方式

• .text-left 左对齐
• .text-center 中间对其
• .text-right 右对齐
• .text-justify
• .text-nowrap

改变大小写：

• .text-lowercase 转变成小写
• .text-uppercase 内容转换成大写
• .text-capitalize 内容首字母大写

缩略词

鼠标放在上面会显示详细信息

• <abbr title="attribute">attr</abbr>
  

• <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
  

代码部分

• 代码块

  <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
  

• 用户输入

  <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
  

• 内联代码

  <code>&lt;section&gt;</code>
  

• 变量

  <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
  

• 程序输出

  <samp>This text is meant</samp>
  

表格

table标签属性

• .table 默认表格

• .table-striped 条纹状表格

• .table-bordered 带边框的表格

• .table-hover 鼠标悬停变色

• .table-condensed 紧缩的表格

• 响应式表格：适配小屏幕。

  将 .table 元素包裹在 .table-responsice元素内

  <div class="table-responsive">
    <table class="table">
      ...
    </table>
  </div>
  

状态类，修改颜色

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

表单：

表单样式

• .form-control 组件宽度100%，标签在上面

  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
  </form>
  

  每组表单项设置为 form-group 类

• .form-inline 内联元素，表单项会在一行显示

• .form-horizontal 可以结合栅格类使用

  <form class="form-horizontal">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
  </form>
  

组件类

.form-control 赋予组件100%宽度的组件

文本域

• row

可以通过 row属性设置行数

多选框

• .checkbox
• .checkbox-inline

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

单选框

• .radio
• .radio-inline

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

下拉框

• .form-control 设置为宽度100%的样式

静态控件

• .form-control-static 没有表单元素也可以设置一项表单样式

   <div class="form-group">
      <label class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <p class="form-control-static">email@example.com</p>
      </div>
    </div>
  

禁用状态

• disabled

  禁用状态可以用于标签fieldset

只读状态

• readonly

说明字段

• .helpBlock

校验状态

给表单项添加类可以展示不同的颜色，可以用于输入提示

• .has-warning
• .has-error
• .has-success

控件尺寸

可以控制控件的高度

只控制输入框的高度

• .input-lg
• .input-sm

控制输入组件的高度,需要在.form-horizontal下边

• .form-group-lg
• .form-group-sm

按钮

按钮类型

• .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='disabled'

图片

响应式图片

• .img-responsive

图片形状

• .img-rounded 圆角正方形
• .img-circle 圆形
• .img-thumbnail 有外边框的正方形

辅助类

文本颜色

• .text-muted 浅色
• .text-primary 蓝色
• .text-success 绿色
• .text-info 青色
• .text-warning 橘黄色
• .text-danger 红色

背景颜色

• bg-primary 蓝色
• bg-success 绿色
• .bg-info 青色
• .bg-waring 青色
• .bg-danger 红色

下三角

• <span class="caret"></span>

快速浮动

• .pull-left 向左浮动
• .pull-right 向右浮动

清除浮动

• .clearfix 清除float

显示或隐藏内容

• .show 显示内容
• .hidden 隐藏内容
• .sr-only 也是隐藏内容

图片替换

将文本内容替换为背景图

• .text-hide

样式类

• .sr-only 隐藏内容
• .center-block 块级元素居中
• .text-center 文字居中
• .pull-left 向左浮动
• .pull-right 向右浮动
• .show 显示内容
• .hidden 隐藏内容
• .sr-only 也是隐藏内容