Amaze UI 的布局示例

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

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

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

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

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

1.示例說(shuō)明

1.1展示頁(yè)面

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

1.2登錄頁(yè)面

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

1.3博客頁(yè)面

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

1.4博客側(cè)欄頁(yè)面

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

• index 頁(yè)面
  
• user 頁(yè)面
  
• gallery 頁(yè)面
  
• table 頁(yè)面
  
• form 頁(yè)面
  
• help 頁(yè)面
  
• log 頁(yè)面
  
• 404 頁(yè)面

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)式便被禁用了。