四色成人电影,毛片1000部免费看,天天狠天天干天天操,欧美videos办公室丝袜长腿 ,免费草逼视频,天堂一区在线观看,欧洲高潮视频在线看,国产精品爽爽久久久

來源 |?https://xueyuanjun.com/post/22065

我們知道，從 Laravel 8 開始，自帶前端腳手架代碼默認(rèn)兼容 Tailwind CSS 框架，取代了之前的 Bootstrap CSS 框架。那么 Tailwind 是什么？它與 Bootstrap 有什么區(qū)別？如何在 HTML 頁面中使用？我們將在這篇教程中給大家簡單介紹下。

Tailwind 是什么

簡而言之，Taildwind 是一個實用優(yōu)先的工具集 CSS 框架，旨在提升現(xiàn)代 Web 應(yīng)用的開發(fā)效率。

注意這里的關(guān)鍵詞 —— 實用優(yōu)先，這是 Tailwind 的最大亮點，不同于其他 CSS 框架（例如 Bootstrap、Foundation、Bulma 等）通過一個預(yù)設(shè)的「巨型」 class 包含一大堆樣式屬性，Tailwind 的每個 class 通常只會設(shè)置單個樣式屬性，你需要通過組合多個 class 得到自己想要的最終渲染效果。

Tailwind 另一個與其他 CSS 框架不同之處是使用?PostCSS?處理最終輸出。

與 Bootstrap 有什么區(qū)別

正如上面所說的，Bootstrap 開箱提供了豐富的布局、組件和樣式庫，你可以不做任何調(diào)整直接拿來使用，這在構(gòu)建一些內(nèi)部項目或者驗證原型的時候非常方便，但是如果需要定制自定義的樣式風(fēng)格，則需要覆蓋默認(rèn)的樣式屬性，這可能會導(dǎo)致大量無效樣式屬性的加載。

而 Tailwind 恰恰相反，開箱什么組件和樣式庫都沒有提供，一切都需要自己 DIY：你需要自行去為每個頁面元素設(shè)計樣式，然后組合使用 Tailwind 提供的工具集 class（每個 class 通常只負(fù)責(zé)設(shè)置單個屬性，而不是像 Bootstrap 那樣包含一堆屬性）達(dá)到最終的渲染效果。

因此，使用 Tailwind 每個 HTML 元素的 class 屬性通常會有一連串值，這看起來好像很麻煩，不過，Tailwind 的優(yōu)點正好彌補(bǔ)了 Bootstrap 的不足：對于一些長期維護(hù)的、面向用戶的、需要有定制樣式風(fēng)格的項目，你不需要去加載和覆蓋框架內(nèi)置的樣式屬性，就可以輕松設(shè)計定制出自己獨特風(fēng)格的樣式代碼。

注：Tailwind 現(xiàn)在也提供了官方組件庫 Tailwind UI，不過完整版需要付費。

所以 Tailwind 不是銀彈，你需要按照自己的項目需求去選擇合適的 CSS 框架，對于內(nèi)部系統(tǒng)、管理后臺、原型項目，使用 Bootstrap 可能更合適，而對于需要長期維護(hù)的前端界面、或者需要定制設(shè)計樣式風(fēng)格的項目，則使用 Tailwind 可能更合適。

如果從面向?qū)ο缶幊痰慕嵌葋砜磧烧叩膮^(qū)別，要自定義擴(kuò)展頁面樣式，Bootstrap 使用的是繼承的方式實現(xiàn)，而 Tailwind 則使用的是組合的方式實現(xiàn)，如果你對面向?qū)ο缶幊逃斜容^深刻的理解，就可以體味到兩者各自的優(yōu)勢，如果項目需要擴(kuò)展樣式，使用 Tailwind 越到后面越靈活，而如果項目樣式根本不需要擴(kuò)展，使用 Bootstrap 就夠了。

渲染一個卡片組件

下面我們分別通過 Bootstrap 和 Tailwind 框架渲染一個卡片組件，來看看兩者實際使用的區(qū)別。為了簡化演示流程，我們通過 CDN 域名來引入對應(yīng)的 CSS 資源文件。

使用 Bootstrap

通過 Bootstrap 框架實現(xiàn)非常簡單，因為 Bootstrap 內(nèi)置的組件庫提供了卡片組件，直接拿來用就好了：

        基于 Bootstrap 渲染卡片組件                                    PHP 全棧工程師指南            學(xué)院君帶你徹底掌握 Laravel + Vue.js，成為合格的 PHP 全棧工程師！            前往學(xué)習(xí)

預(yù)覽這個 HTML 文檔，卡片組件渲染效果如下：

可以看到，我們不用做任何樣式設(shè)計和編碼就可以基于 Bootstrap 內(nèi)置的卡片組件相關(guān) class 渲染出一個漂亮的卡片組件來。

使用 Tailwind

Tailwind 開箱沒有提供任何組件庫，因此通過 Tailwind 框架渲染同樣的卡片組件需要組合使用 Tailwind 提供的工具集 class 來實現(xiàn)：

        基于 Tailwind 渲染卡片組件                                    PHP 全棧工程師指南                            學(xué)院君帶你徹底掌握 Laravel + Vue.js，成為合格的 PHP 全棧工程師！

注：所有這些內(nèi)置的工具集 class 可以在 Tailwind 官方文檔查閱。

在瀏覽器中預(yù)覽該 HTML 文檔，渲染效果如下：

可以看到，Tailwind 的實現(xiàn)看起來更復(fù)雜一些，但是對于默認(rèn)樣式的擴(kuò)展更方便，不需要像 Bootstrap 那樣在 HTML 元素上設(shè)置 style 屬性覆蓋默認(rèn)樣式，而是在 class 列表中引入新的工具集 class 即可。

類名屬性對比

另外，你還可以對比兩種 CSS 框架渲染卡片組件的 class 類名，Bootstrap 的一個 class 包含了多個樣式屬性設(shè)置（負(fù)責(zé)多個職能）：

而 Tailwind 的一個 class 往往只包含單個樣式屬性設(shè)置（負(fù)責(zé)單個職能）：

以上就是 Tailwind 和 Bootstrap 的主要區(qū)別和基本使用介紹，更多細(xì)節(jié)，請參考?Tailwind 官方文檔。

本文完?

【Vue.js入門到實戰(zhàn)教程】16-Tailwind 與 Bootstrap 的區(qū)別和使用入門