Amaze UI 的布局示例

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

PS:關于圖標顯示異常的說明：

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

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

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

1.示例說明

1.1展示頁面

1.2登錄頁面

1.3博客頁面

1.4博客側欄頁面

1.5管理后臺模板

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

2.禁用響應式

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

• 刪除 head 里的視口設置 meta 標簽；
  

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

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

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

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