哪个 CSS 框架更好 Tailwind CSS 或 Bootstrap ？

在这篇文章中，我们将看到哪个 CSS 框架是更好的顺风 CSS 或引导。两者都是广泛使用的用于前端样式的 CSS 框架。我们将详细了解它们中的每一个。两种框架都有各自的优缺点，因此这取决于您要构建的应用程序的类型，因此您可以在两者之间选择最佳框架。

让我们一一了解它们之间的区别。

Tailwind CSS ： Tailwind CSS 基本上是一个实用程序优先的 CSS 框架，用于快速构建自定义用户界面。它是一个高度可定制的低级 CSS 框架，它为您提供构建定制设计所需的所有构建块，而没有任何令人讨厌的自以为是的样式，您必须努力覆盖。
这种称为顺风的东西的美妙之处在于它不会强加设计规范或您的网站应该是什么样子，您只需将微小的组件组合在一起来构建一个独特的用户界面。 Tailwind 所做的只是获取一个“原始”CSS 文件，通过配置文件处理这个 CSS 文件，然后生成一个输出。

使用过程：我们可以通过以下 CDN 链接在我们的应用程序中使用 Tailwind CSS，并将其包含在文件的头部部分。

特征：

1. 更快的 UI 构建过程
2. 它是一个实用程序优先的 CSS 框架，这意味着我们可以使用实用程序类来构建自定义设计，而无需像传统方法那样编写 CSS。
3. CSS 类和 Id 不再有愚蠢的名称。
4. CSS 文件中的最少代码行数。
5. 我们可以定制设计来制作组件。
6. 使网站响应。
   

优点：

1. CSS 类和 Id 不再有愚蠢的名称。
2. CSS 文件中的最少代码行数。
3. 我们可以定制设计来制作组件。
4. 使网站响应。
5. 以所需的方式进行更改。
6. CSS 本质上是全局的，如果在文件中进行更改，则链接到它的所有 HTML 文件中的属性都会更改。但是在 Tailwind CSS 的帮助下，我们可以使用实用程序类并进行本地更改。

缺点：

1. 您的标记变得非常冗长。
2. 您有时可能不得不自己围绕框架工作。
3. 对于不太了解 CSS 的开发人员来说，这是一个拐杖。
4. 它需要时间才能变得富有成效。

示例：在此示例中，我们将创建一个 顺风卡组件。

索引.html

HTML

  

    
    

  

    

        

            

                
  
                

                    

                        1 July 2021
                    
  
                    

                        Data Structures and Algorithms
                    
                      
                    

                        Wishing to learn DSA but don't know
                        where to start? Don't worry, this 
                        course is a complete package for you 
                        to learn all the concepts at your 
                        own pace. Its perfect for students 
                        and working professionals who know at
                        least anyone coding language.
                    
                
            
        
    

  

输出：

顺风卡

Bootstrap：它是一个免费的开源工具集合，用于创建响应式网站和 Web 应用程序。它是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。如今，这些网站非常适合所有浏览器（IE、Firefox 和 Chrome）和各种尺寸的屏幕（台式机、平板电脑、平板电脑和手机）。这一切都要感谢 Bootstrap 开发者——Twitter 的 Mark Otto 和 Jacob Thornton，尽管它后来被宣布为一个开源项目。

使用过程：我们可以在我们的应用程序中使用 Bootstrap，方法是使用以下 CDN 链接并将其包含在文件的头部。

bootstrap.min.css” rel=”stylesheet” integrity=”sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/
We” crossorigin=”anonymous”>

特征：

1. 任何人都可以在项目中实现引导程序。这很容易实现。
2. 易于定制。
3. 响应式实用程序类。
4. Bootstrap 的组件。
5. 下拉组件菜单。
6. 引导模板。

优点：

1. 联盟很简单：
2. 快速省时的框架：
3. 网格加固
4. 坚持基本原则
5. 一组 JavaScript 基础知识
6. 支持是惊人的
7. Bootstrap 是完全可定制的
8. 敏捷响应
9. Bootstrap 的一致性
10. 频繁更新

坏处：

1. Bootstrap 中缺少一些元素，因此有时很难实现。
2. Bootstrap 需要大量自定义 CSS 来制作好的响应式网站
3. 超大宽屏存在问题。

示例：在此示例中，我们将创建一个 引导卡组件。

HTML

  

    
    
    
    Card Bootstrap

  

    
        
            
            
                 1 July 2021
                
  
                
                    Data Structure and Algorithm
                
                  
                
                    Wishing to learn DSA but don't know 
                    where to start? Don't worry, this 
                    course is a complete package for you
                    to learn all the concepts at your 
                    own pace. Its perfect for students 
                    and working professionals who know 
                    at least anyone coding language.
                
            
        
    
      
    
    

  

输出：

引导卡

结论：现在这完全取决于你的项目是什么，如果你是 CSS 新手，那么它们都是一个很好的选择，如果你正在使用像暗和亮这样的模式，那么 Tailwind CSS 应该是选择。