2024 年排名前 5 的 CSS 框架

运维资讯 2024-02-15 大猫手机阅读

导读：本文介绍 Bootstrap、Tailwind、Foundation、Bulma、UIKit等UI/CSS框架，让我们一起探索 2024 年最佳 CSS 框架。

为自己的项目选择正确的 CSS 框架非常的关键，也非常地重要，此举会为构建新的 UI 组件所需的整体工作定下基调。目前最重要的是更快地发布新功能，让我们的用户更加满意。

因此，我们需要一个易于使用，并可能提供即用型 UI 元素的 CSS 框架。

现在，就让我们来看看 2024 年值得尝试的优秀 CSS 框架。

1 Bootstrap

https://getbootstrap.com/

Bootstrap是一个移动端优先的 CSS 框架，可以让你构建美观且响应灵敏的 Web 界面。

它配备了强大的网格系统，可以帮助开发者为不同的屏幕尺寸制定可适应性布局。此外，它还提供了即用型组件，例如导航栏、卡片和模式，从而加快了开发速度。

这是 Bootstrap 的独特功能
响应式网格系统。
广泛的预构建组件（导航栏、卡片、模式）
用于快速造型的实用程序类
用于增强功能的 JavaScript 插件
活跃的社区和丰富的开发文档

开发者可围绕 Bootstrap 创建包装器，并可以直接得到框架支持。例如，如果你尝试将 Bootstrap 集成到 React 中，可以轻松地将库 — React Bootstrap安装到自己的项目中，并按如下方式启用它：

import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import './bootstrap.css';

export function Bootstrap() {
  return (
    

      {['Primary', 'success', 'danger'].map((variant) => (
        
          as={ButtonGroup}
          key={variant}
          id={dropdown-variants-${variant}}
          variant={variant.toLowerCase()}
          title={variant}
          Action
          Another action
          
            Active Item
          
          
          Separated link
        
      ))}
      
      
        
          Dropdown Button
        
        
          Action
          Another action
          Something else
        
      
    
  );
}

2. Tailwind CSS

https://tailwindcss.com/

Tailwind CSS是一个实用优先的 CSS 框架，它提供了一组低级实用程序类，以此来支持开发者的自定义设计。

与提供预样式组件的传统 CSS 框架不同，Tailwind 专注于提供实用程序类，使你能够构建独特的设计。它被设计为高度可定制与可扩展，为开发者提供了无限的灵活性。

以下是 Tailwind CSS 的一些独特功能：

实用至上的造型方法
使用配置文件高度可定制
没有预先构建的组件；从实用程序类创建样式
带断点的响应式设计
用于优化生产构建的 PurgeCSS 集成
通过 JIT（Just-In-Time）模式快速开发

集成 Tailwind 并不是看起来那么简单。首先设置 Tailwind 编译器：

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ["./src/**/*.{html,js}"],

  theme: {

    extend: {},

  },

  plugins: [],

}

之后，我们就可以使用预定义的 Tailwind 编写 CSS 类：

export function Tailwind() {

  const ContactTextArea = ({

    row,

    placeholder,

    name,

    defaultValue,

  }: {

    row: number;

    placeholder: string;

    name: string;

    defaultValue: string;

  }) => {

    return (

      

        


          

            rows={row}

            placeholder={placeholder}

            name={name}

            className="w-full resize-none rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"

            defaultValue={defaultValue}

          />

        

      

    );

  };



const ContactInputBox = ({

    type,

    placeholder,

    name,

  }: {

    type: string;

    placeholder: string;

    name: string;

  }) => {

    return (

      

        


          

            type={type}

            placeholder={placeholder}

            name={name}

            className="w-full rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"

          />

        

      

    );

  };

  return (

    


      


        


          

            

            

              type="text"

              name="email"

              placeholder="Your Email"

            />

            

              type="text"

              name="phone"

              placeholder="Your Phone"

            />

            

              row={6}

              placeholder="Your Message"

              name="details"

              defaultValue=""

            />

            


              

                type="submit"

                className="w-full rounded border border-primary bg-primary p-3 text-white transition hover:bg-opacity-90"

                Send Message

              

            

          

          

        

      

    

  );

}