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
      使用此。
  • 颜色

    • .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
  • 文字对齐

    • 水平对齐
      • 左:
        • .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:竖屏隐藏

你可能感兴趣的:(工作笔记)