Tailwind CSS与Bootstrap对比（哪个是更好的框架（）） _TailwindCSS与Bootstrap哪个更好

在选择 CSS 框架时，找到满足你要求的框架很重要，那么Tailwind CSS与Bootstrap哪个更好呢？

文章图片

Tailwind CSS与Bootstrap有什么区别

流畅的设计、响应式布局和交互风格是打造一流网站的支柱。关键是以这样一种方式实现 CSS，即网站在进一步的开发阶段消除任何破坏的机会，随着应用程序大小的增加，显着减少工作量。
Tailwind CSS与Bootstrap对比：好消息是创建响应速度惊人的 UI，流行的 UI 工具包如 Bootstrap、Bulma、Foundation 和有时媒体查询是要走的路。但是，如果你想实现自定义 UI 设计怎么办？这就是 Tailwind CSS 越来越受欢迎的原因吗？让我们了解一下。
什么是 Tailwind CSS？Tailwind CSS 最初由 Adam Wathan 开发，于 2017 年 11 月 1 日首次发布。它是一个实用程序优先的低级框架，用于应用 CSS。这意味着你无需编写大量 CSS。相反，你将为 HTML 元素编写大量类。
Tailwind CSS 的最大优点在于它是高度可定制的。你可以构建自定义设计和出色的自定义用户界面。有趣的是，它不需要额外的编码工作。你可以按照 UI 要求的方式轻松地分别利用每个组件的样式。此外，你可以构建可根据项目要求进行扩展的独特微交互。
Tailwind CSS 可以灵活地转换元素的“外观和感觉”。你可能会觉得写很多类一点都不方便。这就是组件提取的由来。你可以将这些类捆绑在一起并根据需要命名。它类似于创建一个类似 Bootstrap 的框架。
这些是 Tailwind CSS 备受关注的部分原因。虽然不太可能与 Bootstrap 竞争，但 Tailwind CSS 提供了灵活性以换取时间。但是，构建自定义组件而不驻留在代码冲突中是有意义的。
什么是 Bootstrap CSS 框架？Tailwind CSS与Bootstrap有什么区别？Bootstrap 于 2010 年年中作为 Twitter 内部设计工具的一个分支启动，并于 2011 年 8 月 19 日成为开源框架。它基于面向对象的 CSS。它是一个基于语义/组件的框架，有助于快速设计和开发网站模板。
此外，在多个设备和浏览器之间学习和保持一致性非常容易。响应式 12 列网格系统、组件和布局只是一些小改动。你可以在流体宽度和固定布局中对列进行偏移和嵌套。你可以使用响应式实用程序类仅在特定屏幕尺寸上隐藏或显示某些内容。
【Tailwind CSS与Bootstrap对比（哪个是更好的框架（））】在 Bootstrap 中，所有基本的 HTML 元素，如标题、表格、按钮、列表、表单等，都预先设置了可以快速实现的基本样式。Bootstrap 几乎涵盖了所有内容，无论是下拉菜单、导航栏、分页、面包屑等。如果你了解 CSS，那么自定义它们并构建一个像样的网站模板将非常容易。
你可以使用 bootstrap 包中捆绑的众多 JavaScript 插件轻松制作用户交互元素。但是，有了适当的文档和庞大的社区，Bootstrap 仍然被认为是更好的入门选择。
Tailwind CSS 与 Bootstrap对比：现在是切换的合适时机吗？Tailwind CSS与Bootstrap有什么区别？Tailwind CSS 和 Bootstrap 之间的显着区别在于，Tailwind提供了预先设计的小部件，可以通过快速 UI 开发从头开始构建站点，而 Bootstrap 带有一组预先设计的响应式、移动优先的组件，这些组件拥有明确的 UI 套件。
Tailwind CSS与Bootstrap哪个更好？Bootstrap 的主要问题是开发人员只能依赖特定的抽象模式。它迫使使用自定义 CSS 覆盖框架，这完全违背了使用框架的初衷。
使用 Bootstrap 创建的站点遵循使它们看起来相似的通用模式。毫无疑问，它阻碍了有效整合创造力的能力。此外，Bootstrap 需要 308.25kb 的文件大小，包括主文件、Bootstrap JS、Popper.js 和 jQuery。
有关的：基本的 CSS3 属性备忘单
Tailwind CSS与Bootstrap对比：另一方面，Tailwind CSS 使用一组实用程序类来创建更灵活的整洁 UI。预先设计的小部件有助于实现设计，而无需担心一个元素会影响另一个相关元素。
例如，你可以使用类设置焦点状态、悬停和活动。此外，你可以通过使用 PurgeCSS 删除未使用的类来显着减小文件大小。这就是为什么对于轻量级项目，Tailwind 可能是一个不错的选择，因为它只需要最大 27kb 大小的基本样式表文件。
让我们举两个例子。首先，使用 Bootstrap 和 Tailwind CSS 创建一个搜索栏。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8" /> < meta http-equiv="X-UA-Compatible" content="IE=edge" /> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < title>Tailwind Vs Bootstrap< /title> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"referrerpolicy="no-referrer" /> < link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> < !-- CSS only --> < link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous"> < !-- < link rel="stylesheet" href="https://www.lsbin.com/styles.css" /> --> < /head> < body > < h3 class="text-center mt-5">Tailwind Search Bar< /h3> < div class="mt-3 w-1/4 mr-auto ml-auto "> < div class="px-2 flex items-center border-1 bg-white shadow-sm rounded-full"> < input class="rounded-l-sm w-full py-2 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text"placeholder="Search"> < div class="p-2"> < button class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none w-12 h-12 flex items-center justify-center"> < i class="fas fa-search">< /i> < /button> < /div> < /div> < /div> < h3 class=" text-center mt-5">Bootstrap Search Bar< /h3> < div class="input-group mb-3 mt-3 w-25 mx-auto"> < input type="text" class="form-control" placeholder="Search" aria-label="Recipient's username" aria-describedby="basic-addon2"> < div class="input-group-append "> < span class="input-group-text p-3" id="basic-addon2">< i class="fas fa-search text-primary">< /i>< /span> < /div> < /div> < /div> < /body> < /html>

输出：

文章图片
现在，使用 Tailwind 和 Bootstrap 创建一个基本的表单模板。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8" /> < meta http-equiv="X-UA-Compatible" content="IE=edge" /> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"referrerpolicy="no-referrer" /> < link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> < !-- CSS only --> < link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous"> < !-- < link rel="stylesheet" href="https://www.lsbin.com/styles.css" /> --> < /head> < body class=""> < h2 class=" text-center mt-5 mb-4">Bootstrap Form< /h2> < form class="w-25 text-white mx-auto border px-4 py-4 rounded"> < div class="form-group pb-3"> < small id="emailHelp" class="form-text text-muted">Username< /small> < input type="email" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter email"> < /div> < div class="form-group pb-3"> < small id="password" class="form-text text-muted">Password< /small> < input type="password" class="form-control" id="password" placeholder="Password"> < /div> < div class="form-group form-check"> < input type="checkbox" class="form-check-input" id="exampleCheck1"> < label class="form-check-label" for="exampleCheck1">Check me out< /label> < /div> < button type="submit" class="btn btn-primary">Submit< /button> < /form> < h2 class=" text-center mt-5 mb-4">Tailwind Form< /h2> < form class="bg-white border-1 shadow-xl rounded px-8 pt-6 pb-8 mb-4 w-1/4 mx-auto"> < div class="mb-4"> < label class="block text-gray-700 text-sm font-bold mb-2" for="username"> Username < /label> < input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username"> < /div> < div class="mb-6"> < label class="block text-gray-700 text-sm font-bold mb-2" for="password"> Password < /label> < input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************"> < p class="text-red-500 text-xs italic">Please choose a password.< /p> < /div> < div class="flex items-center justify-between"> < button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button"> Sign In < /button> < a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="https://www.lsbin.com/#"> Forgot Password? < /a> < /div> < /form> < p class="text-center text-gray-500 text-xs"> & copy; 2021 MUO All rights reserved. < /p> < /div> < /body> < /html>

输出：

文章图片
你能看出Tailwind CSS与Bootstrap有什么区别了吗？
Tailwind CSS与Bootstrap对比：选择权在你手中如果你是后端开发人员或刚开始开发，使用 Bootstrap 是更好的选择。Bootstrap 很容易上手，你会很快得到结果，这将建立你的信心。Tailwind CSS与Bootstrap哪个更好？另一方面，如果你已经是前端开发人员或之前使用过 Bootstrap，那么至少尝试一次 Tailwind CSS 并看看它是否适合你会很棒。
决定 Bootstrap 还是 Tailwind 最好是主观的，因为你的需求和偏好会与其他人不同。