amaze ui和bootstrap有哪些差異？

amaze ui和bootstrap有哪些差異？

問題

我最近在學amaze ui，感受若是單從功能性來看和bootstrap最大差異也就是扁平化，不過妹子ui號稱對國產本土化支持更好，這個具體表如今哪？看他官方文檔卻是挺逗趣的。。。而後柵格佈局好像比bootstrap要靈活一些。其餘的求補充

 

解答

字體設置比較 ok，勉強再加上個盒模型比較省心，除此之外就是山寨 Bootstrap + 各類本土網站插件。

原本你讓我黑它我是拒絕的，畢竟是國人項目，起初我仍是很滋瓷的，可是後來越營銷越臭，惡趣味 Star 不說，就是惡趣味 Star 也比不過 Gogs，爲何我要扯出一個與前端毫無相關的項目呢，由於他們營銷的時候，歷來都是以「國人項目」爲噱頭，可是他們給出的排名也好增幅也罷，歷來就沒有 Gogs 的蹤跡，從頭到腳都是滿滿的銅臭味。

還成天管本身叫妹子 UI 妹子 UI 的，麻煩僱個好點的文案組織一下語句好很差，全身散發着一股摳腳大漢味，摳腳大漢 UI 你好，摳腳大漢 UI 再見：）

要輕巧有 Pure，要強大有 Semantic UI，要中規中矩有 Bootstrap，真不必去摳腳，真不必~

供從個人觀點進行對比:

對比人背景:

1. 瞭解一些HTML和CSS基礎, 可是若是須要本身寫一個各類效果的頁面的話. 累覺不愛.
2. 無美工基礎, 最好有比較現成的配色方案, 字體大小方案. 看得過去, 拿來能用.
3. 先後端,運維,產品經理,設計UI都是本身一我的.沒有精力和能力去爲不一樣的終端屏幕尺寸定製不一樣的頁面.

bootstrap和amazeUI比較重要的區別:

1. bootstrap文件體積比amazeUI小不少
2. bootstrap中文文檔寫得好, 通俗易懂. 用得人多, 優秀案例多, 前面填坑的人多. 網上各類教程插件多, 遇到問題更容易搜索到解決方案一些.
3. bootstrap的傻瓜式定製要比amazeUI全一些,強一些.
4. amazeUI的默認界面更扁平化一些, bootstrap的默認樣式如今看起來有點審美疲勞了. 特別是導航條, 分頁按鈕之類的.(要本身去改導航條的樣式, 我感受好難). 總之感受amazeUI默認樣式更漂亮一些(周星馳: 藝術這個東西是很主觀滴~). 不過! 不過爲何amazeUI的示例文檔感受那麼的醜. 官網好看多了. 哎, 一樣的工具在不一樣的人手裏, 差異好大. bootstrap的示例頁面好看多了.
5. bootstrap是標準盒模型, 爲一個元素設置了尺寸, 它實際影響的範圍要去計算padding,border,margin. 而amazeUI貌似是本身定義的盒模型, 爲一個元素定義了尺寸以後, 即定下了元素內容, 以及padding, border的總尺寸. 惟一要考慮的只是元素的margin. 感受amazeUI這種更直觀, 更方便使用在響應式中. 再也不去擔憂本身算術很差. 一個元素有無padding, border只會擠壓它本身的內容. 元素這個總體的尺寸不變. 更像一個盒子一些.

bootstrap和amazeUI零碎的區別:

1. bootstrap的h1~h6字號比較合理, 方便使用. 而且能夠傻瓜式定製. amazeUI只有h1和h2分別是24px和20px, 其它所有是14px.
2. amazeUI的基準字號是16px, 並且將瀏覽器的基準字號設置爲 62.5%，也就是 10px，如今 1rem = 10px, 在自定義字體大小的時候, 比較方便計算.好比36px就是3.6rem.
3. amazeUI字體針對中文優化. 不過bootstrap支持定製. 貌似就是改一句font-family的事.
4. 聽說bootstrap用的圖標是Glyphicons, amazeUI用的是更好的Font Awesome, 不知道對我來講區別有多大. 好像沒有蠻大區別. 反正也不用.
5. amezeUI默認有方便的動畫. bootstrap沒有.
6. bootstrap有現成的媒體對象. 左圖右文. amazeUI沒有.
7. amazeUI自帶OffCanvas側邊欄, 在移動端側邊劃出菜單. 效果能夠作得不錯. bootstrap貌似要本身解決.

個人選擇:

因爲文檔對初學者的友好程度以及從網上找到解決方案的容易程度. 不得已, 只能選擇bootstrap.

好比導航條, bootstrap會給出哪一個一類控制哪些功能, 而amazeUI只是展現了一個代碼段的案例. 若是前端比較熟悉的, 應該沒有任何問題, 但對於我這種新手來講, 真的無從下手.

關於改變bootstrap或amazeUI的默認樣式, 能夠在chrome開發者工具裏面, 定位到元素, 查看哪些css樣式影響了本身須要的效果(chrome能夠直接在瀏覽器中啓用或停用樣式). 找到相關的元素和樣式後, 能夠加本身的class, 覆蓋默認的樣式.

對於前端而言都差很少，均可以開發出不錯的頁面來。之前H4的年代大部分是本身寫css，如今都是套用amaze或者bootstrap，比本身寫省事多了。 若是你是前端新手，建議你先用amaze，畢竟是國產的東西，文檔比翻譯過來的更容易理解一些。主要是他有webstorm和sublime插件片斷，藉助這些片斷能夠很好的寫出頁面來。 若是你是前端老手，建議你用bootstrap，國際化的東西無需多言，比amaze用的人多一些，不論是國內的仍是國外的。 本人在學習以前也是比較了比較，就是由於amaze的文檔和webstorm插件才放棄了bootstrap。。