JavaScript >> Javascript 文檔 >  >> Tags >> CSS

比較 Bootstrap 與 Google 的 Material Design Lite

自從谷歌在 Android 5.0 中宣布 Material Design 以來,大量的前端框架應運而生,旨在將這一概念引入 Web 應用程序。我們已經有許多推廣這一概念的庫——MUI、Material-UI 和圍繞 Web 組件構建的 Polymer。

2015 年 7 月上旬,Google 公開發布了一個新的框架,該框架易於使用,並且沒有額外的依賴。它被稱為 Material Design Lite (簡稱MDL),它直接針對廣受歡迎的Bootstrap框架。但哪個更好?一起來了解一下吧。

主要區別

在深入研究示例之前,讓我們先分析一下 Bootstrap 和 Material Design Lite 之間的主要區別:

哲學

  • Bootstrap 最初是由 Twitter 構建的,目的是讓構建響應式網站變得容易。它為您提供了許多用於製作網絡應用程序的組件和自定義選項。
  • Material Design Lite 是 Google 將其 Material Design 概念傳播到網絡的一種方式。它只為您提供構建材料應用程序的基本構建塊。其餘的由開發者決定。

開發經驗

  • Bootstrap 有非常詳細的文檔。開發涉及從示例中復制粘貼并快速獲得可用的結果。
  • MDL 是圍繞 BEM 構建的,組件是通過組合多個類構建的。這種方法提供了很大的控制力,但有時會導致 HTML 變得笨拙。

組件

  • 在 Bootstrap 中,幾乎所有內置的 HTML 元素都有樣式,並且可以在佈局中很好地組合在一起。它為您提供了大量適用於任何類型設計的附加組件。
  • MDL 提供的組件比 Bootstrap 少,但它們都專注於構建現代 Material Design 應用程序。它們帶有動畫和漂亮的默認樣式。

佈局

  • Bootstrap 具有先進的網格系統,包括偏移、列環繞、隱藏和列重新排序。
  • MDL 有一個更原始的網格,可以在大多數情況下完成工作,但不支持高級功能。

設計

  • Bootstrap 為您提供了一個可以接受的默認設計,我們現在已經厭倦了,但有很多精彩的主題可供選擇。
  • MDL 看起來很新鮮,並具有大膽的色彩和動畫。它準確地規定了您的網絡應用的外觀,並通過選擇基色和強調色為您提供有限的自定義機會。

社區

  • Bootstrap 已經存在了很長一段時間,並且擁有一個龐大的社區,可以製作主題、插件和博客文章。
  • MDL 是最近才出現的,但已經在 GitHub 上非常流行。然而,它仍處於早期階段,而且大部分時間你都靠自己。

但是這些框架在實踐中如何比較?這是一個更難回答的問題。這就是為什麼我們準備了許多在這兩個框架中實現的示例,以幫助您比較它們的能力。單擊圖像可並排查看示例。

1。網格

可以說,網格是現代網頁最重要的構建塊。它使設計可以從智能手機擴展到大型台式機。

Bootstrap 網格將頁面分成 12 個相同大小的列 .根據視口寬度,應用了四種不同的尺寸類別 - 超小(0 到 768 像素寬)、小(768 像素到 992 像素)、中(992 像素到 1200 像素)和大(1200 像素+)。

MDL 有類似的網格系統,但它只有三種尺寸——手機(0 到 480 像素)、平板電腦(480 到 840 像素)和桌面(840 像素+)。 MDL 桌面有 12 列 , 平板電腦有 8 列 電話只有 4 列 .

Boostrap 網格提供了更多的控制。您可以偏移、隱藏和重新排序列,這有助於響應式設計。在 MDL 中,我們必須藉助空列來實現偏移,但希望這將在下一個版本中得到修復。

文檔:引導網格 | MDL 網格

2。標題導航

Bootstrap 中的標題稱為導航欄。它們在移動視圖中開始折疊並在有足夠空間時變為水平。在內部,您可以嵌套一組不同的元素,這些元素可以在類的幫助下進行定位。

類似地,MDL 標題導航開始折疊在漢堡菜單後面,並隨著視口的增長而擴展。它們也有不同的樣式和可能的位置。

文檔:引導導航欄 | MDL導航

3。頁腳

Bootstrap 實際上沒有單獨的頁腳組件,而 Material Design Lite 有兩個選項,一個迷你頁腳和一個巨型頁腳。對於這個例子,我們使用網格和一些額外的 CSS 將默認的 MDL 設計轉換為 Bootstrap。

請注意,在小視口上,MDL 的列會折疊並且可以一一切換。為了使這種效果發揮作用,他們使用了僅 CSS 的複選框 hack,而不是使用 JavaScript 解決方案。

文檔:MDL 頁腳

4。標籤

兩個框架都使用非常相似的語法來創建具有不同內容的可選選項卡。用於在選項卡之間交換的許多鏈接,以及一個 div 數組,可通過 id 選擇,用於存儲內容。它們也都需要 JavaScript 才能工作(Bootstrap 也需要 jQuery)。

文檔:引導選項卡 | MDL 選項卡

5。按鈕

Bootstrap 默認按鈕是矩形的,並且有很多大小選項。它們可以通過 CSS 或使用修飾符類(危險、警告、成功......)來改變顏色。 Bootstrap 的另一個獨特功能是拆分按鈕,即半按鈕,半下拉。

MDL 提供矩形和圓形按鈕。 Google 提供了有關如何以及在何種情況下使用不同類型按鈕的指南。 MDL中的所有按鈕都支持波紋動畫效果。

文檔:引導按鈕 | MDL 按鈕

6。表格

表格通常很難做出響應。 Bootstrap 通過在表格不適合時顯示滾動條來克服這個問題。 MDL 的開發人員尚未添加對錶格的響應能力,但他們所做的是添加令人驚嘆的樣式,使表格看起來超級酷。

在 bootstrap 中,您還可以將表格設置為條紋、邊框和壓縮。 MDL 提供了默認樣式(同樣看起來非常整潔)和帶有可選行的設計。

MDL 帶來的另一個很酷的功能是使用類根據內容的類型對齊內容的選項。這類似於 Excel 工作表,中間是文本,右側是數字。

文檔:引導表 | MDL 表

7。表格

Bootstrap 的表單支持更多類型的輸入元素,並具有用於對標籤和輸入進行不同對齊的類。它沒有開箱即用的驗證,您需要使用像 Parsley 這樣的庫。

MDL 支持的輸入元素很少,但受支持的輸入元素添加了材質動畫,使它們易於交互。他們還集成了驗證和模式匹配。這允許它們在數據無效時顯示錯誤消息並變為紅色。

文檔:引導表單 | MDL 文本字段

8。下拉菜單

這裡兩個框架的方法是一樣的。用於切換內容的按鈕或錨元素,以及用於抽屜的無序列表。

Bootstrap 的好處是你可以添加分隔線或標題並做拆分按鈕。

相比於 Bootstrap 的“display:none/block” ,MDL 的加號又是一個流暢的動畫 技術。

兩種情況都需要 JavaScript。

文檔:引導下拉菜單 | MDL 菜單

9。工具提示

Bootstrap 的工具提示方法是將數據屬性添加到按鈕元素,然後在懸停和單擊時顯示工具提示。該框架還提供了兩個獨立的組件:一個簡化的工具提示 以及更高級的popover 帶有標題。

MDL 通過不同的模型實現了這一點。一個用於切換的按鈕和一個用於工具提示內容的 span 元素。給出了兩種選擇,一種是小型設計,一種是大型設計。不利的是,這些只會下降。

兩個框架都需要 JavaScript。

文檔:引導工具提示 |引導彈出框 | MDL 工具提示

10.圖標

Bootstrap 帶有 Glyphicons 圖標字體,它為您提供了 250 多個漂亮的圖標供您選擇。它們與引導 CSS 文件捆綁在一起,無需特殊設置。

MDL 使用 Google 前一段時間發布的一組圖標,稱為 Material Icons。這是一個包含近 800 個圖標的龐大集合。它們沒有與 MDL 捆綁在一起,因此您需要在頁面的 HEAD 部分鏈接它:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

結論

整體 Material Design Lite 正在形成一個很好的前端框架。如果您希望您的 Web 應用程序遵循 Material Design 指南,請使用它,但是您發現 Google 的另一個框架 Polymer 太複雜了。現在仍處於早期階段,但它是由 Google 製造的,這讓您相信它始終符合最新的材料設計規範。

如果你覺得 Material Design 不吸引人,那麼 Bootstrap 及其龐大的社區。您甚至可以通過使用其中一種可用的材料主題來獲得兩全其美。


Tutorial JavaScript 教程
  1. 使用 localfield 鍵從另一個文檔連接對象

  2. 每頁有限制的成員映射

  3. 有趣的 Javascript 技巧

  4. 我開源了我的作品集 + 使用 Gatsby 和 Tailwind 構建的博客模板

  5. Android Studio – 在主要活動中定義需要上下文和屬性的類

  6. 使用 VX 和 D3 進行數據可視化簡介

  7. 什麼是代理模式?以及如何通過 JavaScript 實現它?

  1. 找不到模塊“@angular-devkit/schematics/tasks”

  2. Webpack 配置生成器

  3. 在 Vue 應用程序中使用 Vuetify 進行表單驗證

  4. Angular + tailwindcss 從頭開始為不耐煩的人準備

  5. 使用 Node.js 創建投資組合

  6. Typescript vs Javascript:下一個項目應該使用哪一個?

  7. 如何在 vue 上設置參數事件目標的值?

  1. 改善 UI 的 10 種智能 Javascript 技術

  2. JavaScript 機器學習 Web 開發人員指南

  3. 帶有 Vue.js 的 Github 頁面

  4. 從我的第一個全棧 JavaScript 應用中學到的東西