Amaze UI 的布局示例

這里為開發(fā)者提供幾個(gè)比較常見的 Amaze UI 的布局示例，僅供參考，后續(xù)會(huì)不斷更新更多的優(yōu)秀示例。

PS:關(guān)于圖標(biāo)顯示異常的說明：

為避免 Mixed Content 錯(cuò)誤，Icon Font 的 URL 沒有添加協(xié)議，直接使用磁盤路徑 file:///... 打開時(shí)示例頁面時(shí)無法正常顯示圖標(biāo)，請(qǐng)放在 HTTP 服務(wù)中查看。

在最新的下載包中，我們已經(jīng)將字體路徑替換為本地路徑！

• 使用 JetBrais 系（WebStorm 等）打開示例文件夾，然后在編輯器里點(diǎn)預(yù)覽按鈕；
  
• cd 到示例目錄，python -m SimpleHTTPServer；
  
• 或者使用其他 HTTP 服務(wù)器。
  

1.示例說明

1.1展示頁面

使用組件說明：
CSS 部分：網(wǎng)格 圖標(biāo) 按鈕 表單 文章頁 導(dǎo)航條 輔助類
JS 插件部分：下拉組件 滾動(dòng)偵測(cè)

1.2登錄頁面

使用組件說明：
CSS 部分：網(wǎng)格 圖標(biāo) 按鈕 按鈕組 表單

1.3博客頁面

使用組件說明：
CSS 部分：網(wǎng)格 等寬布局 圖標(biāo) 按鈕 面板 列表 分頁
JS 插件部分：下拉組件

1.4博客側(cè)欄頁面

1.5管理后臺(tái)模板

• index 頁面
  
• user 頁面
  
• gallery 頁面
  
• table 頁面
  
• form 頁面
  
• help 頁面
  
• log 頁面
  
• 404 頁面

2.禁用響應(yīng)式

如果你不喜歡響應(yīng)式？可以嘗試禁用，方法如下：

• 刪除 head 里的視口設(shè)置 meta 標(biāo)簽；
  

<!--<meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->

• 固定容器 .am-container 寬度（可以自己添加一個(gè) class，不一定要使用內(nèi)置的）：
  

.am-container {
  width: 980px !important;
  max-width: none;
}

• 使用網(wǎng)格系統(tǒng)時(shí)，只添加 .am-u-sm-* class，移除其他斷點(diǎn)的 class。
  

完成上面這幾個(gè)步驟，布局層的響應(yīng)式便被禁用了。