+8613426109659

webmaster@21cto.com

登录注册

2024 年排名前 5 的 CSS 框架

场长

前端 0 8473 2024-02-02 08:22:05

导读：本文介绍 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
              
            

          
          
        

      

    

  );
}

3. Foundation

https://get.foundation/

Foundation是一个开源、响应式前端框架，可创建能够任何设备上运行的令人惊叹的响应式网站、Web应用程序或电子邮件的设计等。

许多公司，包括 Facebook、еBay、Mozilla、Adobе 以及迪士尼，都在其项目中使用了 Foundation。

它包括一个强大且灵活的响应式网格，其中包含许多方便的选项、模式、排版、导航组件和表单元素，设计人员可以将这些元素快速集成到他们的产品中。 Foundation 也是模块化的，

以下是 Foundation 的一些独特功能：

具有灵活性的响应式网格系统。
模块化架构，易于定制。
用于样式化的 Sass 预处理器。
内置组件和响应式导航。
Flexbox 和block网格支持。
helper函数库。

可以将 Foundation 集成到自己的项目中，类似如下所示：

import { Menu, MenuItem } from 'react-foundation';
export function Foundation() {  return (               Home                 Blog                 About                Contact          );}

4. Bulma

https://bulma.io/

Bulma是一个轻量级 CSS 框架，因其简单性、响应能力和自定义选项而在众多框架中脱颖而出。

与其他 UI 框架不同，Bulma 构建于 Flexbox 之上，Flexbox 是一种 CSS 布局模型，可根据容器的宽度调整页面元素的宽度。这使得创建网格等任务变得非常简单，并有助于框架的轻量级性质。

以下是Bulma的一些主要特点：

基于 Flexbox 的现代 CSS 框架。
易于使用且直观的语法。
没有 JavaScript 依赖性。
带有内置修改器的响应式设计。
导航栏、模式和选项卡等组件。
可通过 Sass 进行扩展。

可以将 Bulma 集成到自己的项目中，如下所示：

import 'bulma/css/bulma.min.css';
export function Bulma() {  return (                            Previous                          Next Page                                                    1                      
                      …          
                                    45                      
                                    href="/"              className="pagination-link is-current"              aria-label="Page 46"              aria-current="page"              46                      
                                    47                      
                      …          
                                    86                      
        
      
    
  );}

5. UIKit

https://getuikit.com/

UIKit 是一个开源框架，用于构建 Web 应用程序之用户界面。

它的结构和设计理念与其他 UI 框架不同。与遵循传统 BEM 方法的其他框架不同，UIkit 使用基于组件的结构。这允许组件具有更大的灵活性和可重用性，从而可以显着减少构建复杂用户界面所需的代码量。

以下是 UIKit 的一些主要功能：

模块化和轻量级框架。
响应式网格系统。
预先设计的组件（导航栏、滑块、模式）。
基于 Flexbox 的布局。
动画和过渡效果。
可定制和主题化。

可以将 UIKit 集成到自己的项目中，如下代码所示：

import 'uikit/dist/css/uikit.min.css';
export function Uikit() {  return (                  type="button"        className="uk-button uk-button-default uk-margin-left"        onClick={() => alert('Cancel clicked!')}        Cancel          
  );}