AmazeUI，框架知识点-布局和样式整理

AmazeUI是一个基于Mobile First的响应式前端框架，提供了丰富的UI组件和样式，可以快速构建漂亮的移动端和PC端网站。本文主要介绍AmazeUI框架中的布局和样式，包括使用方法和示例说明。

1. 布局

AmazeUI框架的布局采用了栅格系统，类似于Bootstrap和Foundation框架。栅格系统是基于容器的12列网格，可以方便地实现不同尺寸的设备上的布局效果。通过使用栅格类，可以控制组件在不同设备上的位置、宽度和间距。

下面是AmazeUI框架中的栅格类：

- .am-u-sm-*：在小尺寸设备上占据指定的列数。

- .am-u-md-*：在中等尺寸设备上占据指定的列数。

- .am-u-lg-*：在大尺寸设备上占据指定的列数。

- .am-u-sm-offset-*：在小尺寸设备上设置指定的列偏移量。

- .am-u-md-offset-*：在中等尺寸设备上设置指定的列偏移量。

- .am-u-lg-offset-*：在大尺寸设备上设置指定的列偏移量。

- .am-u-sm-push-*：在小尺寸设备上向右推动指定的列数。

- .am-u-md-push-*：在中等尺寸设备上向右推动指定的列数。

- .am-u-lg-push-*：在大尺寸设备上向右推动指定的列数。

- .am-u-sm-pull-*：在小尺寸设备上向左拉动指定的列数。

- .am-u-md-pull-*：在中等尺寸设备上向左拉动指定的列数。

- .am-u-lg-pull-*：在大尺寸设备上向左拉动指定的列数。

使用方法：将上述类应用于元素中，指定需要占据的列数，偏移量或推拉导致。例如，下面的代码将一个元素在小尺寸设备上占据4列，中等尺寸设备上占据6列，大尺寸设备上占据8列，并且在中等尺寸设备上偏移2列。

```

```

2. 样式

AmazeUI框架提供了一系列样式，可以方便地美化页面和组件。下面简单介绍几种常用的样式。

- 文本颜色

AmazeUI框架中有14种文本颜色可供选择，可以通过添加类名来实现。例如，添加.am-text-primary类可以让文本变为深蓝色。

- 字体图标

AmazeUI框架内置了Font Awesome和Glyphicons两种字体图标库，可以直接使用。例如，下面的代码可以显示一个“搜索”图标：

```

```

- 按钮样式

AmazeUI框架中有三种按钮样式：默认按钮、镂空按钮和边框按钮。可以通过添加类名实现不同的样式。例如，添加.am-btn-primary类可以让按钮变为蓝色。

- 标签页

AmazeUI框架提供了标签页组件，可以让内容分组显示。例如，下面的代码可以显示两个标签页，分别显示“标签页1”和“标签页2”的内容。

```

```

- 模态框

AmazeUI框架提供了模态框组件，可以在页面中显示弹出窗口。例如，下面的代码可以显示一个标题为“模态框”的模态框。

```

```

结语：

本文介绍了AmazeUI框架中的布局和样式，包括栅格系统、文本颜色、字体图标、按钮样式、标签页和模态框组件。通过应用这些布局和样式，可以快速构建漂亮的移动端和PC端网站。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/