MUI框架-05-用MUI作一個簡單App

MUI框架-05-用MUI作一個簡單App

• MUI 是一個前端框架，前端框架就像 Bootstrap，EasyUI，Vue ,爲了作 app 呢，就有了更加高效的 MUI，我以爲前端框架有不少，也沒有必要都取掌握，找一個比較出名的，企業裏常言道，適合本身的而後去深刻了解
• 固然呢這也是由於要想快速的下代碼，使用框架是避免不了的，使用框架，記住一些操做是必須的，因此熟悉幾個框架，而後多去了解多去用，高效是創建在記憶的基礎上的
• ios 須要證書，本篇介紹作一個簡單的安卓 app

（1）MUI 組件

• 有一個官方的組件預覽 App，下載地址：http://dcloud.io/hellomui/
  

（2）組件

• 須要什麼組件直接就能夠從官網拷貝
• 官方文檔：http://dev.dcloud.net.cn/mui/ui/
  

（3）修改默認樣式

• 基礎不懂請查看：MUI框架-01-介紹-建立項目-簡單頁面
• 有時候咱們以爲 MUI 自帶的樣式不知足咱們的要求，或者還須要本身增長樣式，這時候就須要咱們去自定義一個 css 文件
• 而後第一步就是咱們在須要修改樣式的 HTML 文件中引入該 css 文件
• 快捷方式，直接在 head 標籤中，輸入：link 回車，選中 css 文件
• 而後在 css 文件中操做
• 好比咱們須要修改頭部的背景顏色：
• 1.咱們在 header 標籤 class 中加一個本身命名的屬性值
• 2.在 css 文件中用 . 選擇器
  
• 3.保存，預覽
  
• 對於特殊的一個內容：
• 固然對於特殊的一個樣式能夠加 id
• 例如：修改列表第一項背景色
• html 文件：
  
• css 文件：
  
• 預覽：
  
• 總結：
• 1.class 用 . 巧記：淚點，淚點，淚點
• 2.id 用 # 啊，記住淚點也就記住這個了
• 3.記住怎麼修改，也就會了全部的修改，這個必須記住

（3）修改默認樣式 2

• 上面介紹了最簡單的修改樣式方法，還有其餘的
• 例如：咱們要給全部 一個全部擁有 mui-table-view 的ul 標籤下的全部 p 標籤，將文字設置成紅色
• 在 css 文件中使用：a 空格 b 的寫法表示什麼下的標籤，或者說某個類的標籤的子孫標籤，不止能夠下一級，之喲啊在它下面都會生效
• HTML 文件：
  
• css 文件修改以下：
  
• 預覽：
  

總結

• 而後利用官方組件，加上本身修改樣式，就能夠實現絕大多數界面的設計了
• 不過如今作出來的只是前端顯示頁面，關於交互效果後面再介紹，拜拜

關於開發

• 請查閱：官方文檔