Amaze UI的一部分样式

栅格系统：

• .am-g：行，未设置最大宽度
• .am-g-fixed：行，设置最大宽度1000px
• .am-show-md-down：当宽度在md时，显示
• .am-hide-md-down：当宽度为md时，隐藏
• .am-show-lg-only：当宽度在lg时，只显示
• .col-xx-n：当宽度在xx区域时，显示十二分之n。xx可以为:sm、md、lg
• .col-xx-offset-n：当宽度在xx区域时，左偏移n份
• .col-end：当不足12份时，最后一列需要加这个类
• .col-xx-centered：始终水平居中
• .col-xx-uncentered：当宽度在xx区域时，不水平居中
• .xx-avg-grid-n：当宽度在xx区域时，等分为n份，此类只能用于列表(ul/ol)

布局相关：

• .am-container：容器，水平居中，最大宽度1000px，宽度100%，清除浮动
• .am-scrollable-horizontal：内容超出容器宽度时显示水平滚动条。
• .am-scrollable-vertical：内容超过设置的高度以后显示滚动条，默认设置的高度为 240px。
• .am-vertical-align：将这个 class 添加到父容器，父容器需要指定高度。
• .am-vertical-align-middle：需要垂直居中的元素
• .am-vertical-align-bottom：添加到需要底部对齐的元素

浮动相关：

• .am-cf：清除浮动
• .am-fl：左浮动
• .am-fr：右浮动
• .am-center：水平居中

显示相关：

• 块级属性设置：
  • .am-block：display 设置为 block
  • .am-inline：display 设置为 inline
  • .am-inline-block：display 设置为 inline-block
• 元素隐藏：
  • .am-hide：元素隐藏

内外边距设置：

• 尺寸
  • xs：5px
  • sm：10px
  • default：16px
  • lg：24px
  • xl：32px
• 内外边距，不加尺寸为默认大小（16px），{size} 可以为 xs, sm, lg, xl 中之一。
  • .am-margin-{size}：外边距
  • .am-margin-horizontal-{size}：水平方向外边距
  • .am-margin-vertical-{size}：垂直方向外边距
  • .am-margin-left-{size} ：左外边距
  • .am-margin-right-{size}：右外边距
  • .am-margin-top-{size}：上外边距
  • .am-margin-bottom-{size}：下外边距

文本工具：

• 字体

  • .am-sans-serif 非衬线，Amaze UI 主要使用的。
  • .am-kai 应为衬线字体，中文为楷体，Amaze UI <blockquote> 使用此。

• 颜色

  • .am-text-primary：蓝色
  • .am-text-secondary：天蓝色
  • .am-text-success：绿色
  • .am-text-warning：橘黄色
  • .am-text-danger：红色

• 链接颜色减淡

  • .am-link-muted class：超链接颜色默认为主色（蓝色），此类将链接颜色设置为灰色。

• 文字大小

  • .am-text-xs：12px
  • .am-text-sm：14px
  • .am-text-default：16px
  • .am-text-lg：18px
  • .am-text-xl：24px
  • .am-text-xxl：32px
  • .am-text-xxxl：42px

• 文字对齐

  扫描二维码关注公众号，回复： 6016209 查看本文章
  • 水平对齐
    • 左：
      • .am-text-left
      • .am-sm-text-left
      • .am-sm-only-text-left
      • .am-md-text-left
      • .am-md-only-text-left
      • .am-lg-text-left
    • 右：把left改成right
    • 居中：把left改成center
    • 自适应：把left改成justify
  • 垂直对齐
    • .am-text-top：顶对齐
    • .am-text-middle：居中对齐
    • .am-text-bottom：底对齐

• 换行及截断

  • .am-text-truncate：禁止换行，超出容器部分截断（以 … 结束）
  • .am-text-break：超出文字容器宽度时强制换行，主要用于英文排版
  • .am-text-nowrap：禁止换行，不截断超出容器宽度部分
  • .am-text-truncate：单行文字截断，元素 display 属性需为 block 或 inline-block。

• 图文混排：使用 float 实现的类似 HTML align 属性的效果，父容器要清除浮动。

  • .am-align-left
  • .am-align-right

• 响应式显示隐藏

  • .am-[show|hide]-[sm|md|lg][-up|-down|-only]，调整浏览器窗口大小查看元素的显隐。
  • .am-show-landscape：横屏显示
  • .am-hide-landscape：横屏隐藏
  • .am-show-portrait：竖屏显示
  • .am-hide-portrait：竖屏隐藏