amazeui學習筆記一（開始使用2）--佈局示例layouts

amazeui學習筆記一（開始使用2）--佈局示例layouts

 1、總結

一、樣例分析（不要忘記，優先分析這個佈局示例）：有教你頁面怎麼佈局的，實例中能夠分析一波

二、響應式：對應meta標籤中的viewpoint屬性：

三、禁用響應式方法：（就是amaze ui應該是默認響應式的）

• a、刪除 head 裏的視口設置 meta 標籤；
• b、固定容器 .am-container 寬度（能夠本身添加一個 class，不必定要使用內置的）：
• c、使用網格系統時，只添加 .am-u-sm-* class，移除其餘斷點的 class。

四、 本身設置css，其實amazeui裏面也是這麼設置的

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

 

 

2、佈局示例layouts

佈局示例

---

目錄

• 示例說明
  • 展現頁面
  • 登陸頁面
  • 博客頁面
  • 博客側欄頁面
  • 管理後臺模板
• 禁用響應式

Amaze UI 目前提供幾個常見的佈局示例，供開發者參考，後續會增長更多示例。

---

關於圖標顯示異常的說明：

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

最新的下載包中已經將字體路徑替換爲本地路徑！

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

---

示例說明

展現頁面

登陸註冊頁面

博客頁面

側邊欄頁面

管理後臺模板

展現頁面

使用組件說明：

• CSS 部分：網格 圖標 按鈕 表單 文章頁 導航條 輔助類
• JS 插件部分：下拉組件 滾動偵測

登陸頁面

使用組件說明：

• CSS 部分：網格 圖標 按鈕 按鈕組 表單

博客頁面

使用組件說明：

• CSS 部分：網格 等寬佈局 圖標 按鈕 面板 列表 分頁
• JS 插件部分：下拉組件

博客側欄頁面

使用組件說明：

• CSS 部分：網格 文章頁 評論列表 按鈕 圖標 列表 輔助類
• JS 插件部分：側邊欄組件

管理後臺模板

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

禁用響應式

不喜歡響應式？能夠嘗試禁用：

• 刪除 head 裏的視口設置 meta 標籤；

 Copy

<!--<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，不必定要使用內置的）：

 Copy

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

• 使用網格系統時，只添加 .am-u-sm-* class，移除其餘斷點的 class。

至此，佈局層的響應式被禁用了（參考示例）。