Tailwind CSS Vs Bootstrap 区别，其实大差不差
Tailwind CSS Vs Bootstrap
CSS（层叠样式表） 是一种样式表语言，用于对网页中的HTML元素进行样式设计。CSS框架是一个库，它使开发人员能够以更简单的方式使用CSS设计出更符合标准的网站。这些库是现成的，所以不需要编写冗长而单调的CSS代码。
与其从零开始你的每一个项目，CSS框架为你提供了可以快速制作用户界面的工具，在整个项目中可以重复使用不止一次。在这篇文章中，我们将讨论两个流行的CSS框架-Tailwind CSS 和Bootstrap。
尾风（Tailwind）CSS
Tailwind CSS是由 Adam Wathan 开发的 。 Tailwind CSS 是一个实用至上的低级别的CSS框架。它提供了单一用途的类，可以直接用于网页中的元素样式。 Tailwind CSS是最流行的实用优先的CSS库之一。
典型的用户界面工具有内置的组件和功能，因此，开发人员很难创建一个独特的用户界面。然而，Tailwind CSS对一个元素的外观和行为提供了很大的灵活性和命令。这使它成为创建独特和定制用户界面的完美选择。
要在你的网页上应用Tailwind CSS，请使用以下CDN链接-
“https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css”HTML
Copy
例子
<!DOCTYPE html>
<html>
<head>
<title> Tailwind CSS </title>
<link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<h1 class= "m-2 inline-block bg-teal-400 text-4xl"> Tutorialspoint </h1> <br>
<h2 class= "m-2 inline-block bg-teal-400 text-2x1"> Tailwind CSS </h2>
<div class= "w-full lg:max-w-full lg:flex">
<div class= "rounded-3xl h-16 w-24 flex bg-orange-400 m-2
border-black-600 lg:border-l-0
lg:border-t lg:border-gray-400 bg-white
\rounded-b lg:rounded-b-none lg:rounded-r
p-2 leading-normal">
<p class="text-black-400 text-base"> This is an example.</p>
</div>
</div>
</body>
</html>
HTML
Copy
使用Tailwind CSS的优势
以下是使用Tailwind CSS的优势 –
- 使用纯CSS将需要你写更多的代码来为元素添加独特的功能。因此，这增加了你的网页的CSS文件大小。而在使用Tailwind CSS时，你已经有了实用的类，所以，你可以直接写它们，也可以在整个网页中重复使用它们。这为我们提供了一个更小的CSS文件。
-
可用的实用类是本地的，也就是说，你可以在不干扰或破坏网页应用程序的情况下更新或修改。使用纯CSS是不可能做到这一点的。它是高度可定制的，因此，使我们能够创建独特的用户界面。它提供了各种功能，如不同的调色板、造型、间距等。
-
在使用Tailwind CSS时，你不需要命名类，因为它们有共同的实用类。这使得开发人员更容易创建自定义元素。
Bootstrap
Bootstrap是一个免费的开源CSS框架，用于创建响应式网络和移动应用程序。它是一个移动优先的前端开发框架。它包含各种组件的HTML、CSS和JavaScript模板。Bootstrap是由 Mark Otto 和 Jacob Thorton 开发的。它是最流行的框架之一。它是最受欢迎的开源框架之一。
它使开发者能够使用 Java、PHP 等服务器端技术创建基于Web和移动的应用程序，它被用来创建可以在手机、平板电脑、笔记本电脑、桌面等各种平台上工作的应用程序，Bootstrap第二版支持响应式Web应用程序，第三版支持移动应用程序，而最新的第四版支持SASSs和Flexbox。
要在你的网络应用中应用Bootstrap，请使用以下CDN链接 –
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"HTML
Copy
例子
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap </title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel= "stylesheet">
</head>
<body>
<h1 class= "ml-3 mt-3"> Tutorialspoint </h1>
<h3 class= "ml-3 mt-2"> Bootstrap </h3>
<button type= "button" class= "btn btn-dark ml-4 mt-3"> This is an example </button>
<button type= "button" class="btn btn-success ml-3 mt-3"> Success </button>
</body>
</html>
HTML
Copy
使用Bootstrap的优势
以下是使用Bootstrap的优势-
- 它是一个用于前端开发的强大框架。
-
Bootstrap为开发者提供现成的主题和模板。这提高了开发的速度。
-
它引入了移动优先的理念，将屏幕划分为12个网格系统。它确保了跨浏览器的兼容性。
-
它可以根据项目的需要进行定制。它提供了HTML元素的基本样式，如按钮、off-canvas、accordion、图像、图标、表格、表单、代码、地形、警报、进度条、下拉菜单等。
Tailwind CSS和Bootstrap之间的区别
以下是Bootstrap Tailwind CSS之间的主要区别 –
| Bootstrap | Tailwind CSS |
|---|---|
| 它是最流行的HTML、CSS和JS框架之一，用于创建响应式的移动优先应用程序。 | 它是最流行的CSS框架，用于创建定制的用户界面。 |
| 它提供现成的主题和模板。 | 它提供了独特的实用优先类。 |
| 使用Bootstrap创建的应用程序通常是相同的，因为它已经有内置的网站模板。 | 使用Tailwind CSS创建的应用程序和网站是独特和灵活的。 |
| Bootstrap是一个更古老的框架，以其响应性和效率而闻名。它节省了开发人员的大量时间。 | Tailwind CSS是一个较新的框架，仍在改进和成长。 |
| 它需要大的文件尺寸 | 它需要很小的文件尺寸 |
| 使用Bootstrap的著名公司有Twitter, LinkedIn, Spotify, StackShare。 | 使用Tailwind CSS的著名公司有MAKE IT, Superchat, Hashnode, Livestorm。 |
Tailwind CSS和Bootstrap哪个更好
这两个框架在不同的利基市场上都有需要。哪个框架更好取决于情况和项目的需要。如果你的项目包含更多的后台工作，需要普通的布局，那么Bootstrap会更好。而如果你的项目需要独家定制和前端工作，那么Tailwind CSS会更好。
总结
在这篇文章中，我们讨论了用于前端开发的两个最流行的框架。 Bootstrap用于创建响应式网络和移动应用程序，而Tailwind CSS 则用于创建定制的用户界面。我们已经讨论了它们的优势和区别。
参考