17611538698
webmaster@21cto.com

2024 年排名前 5 的 CSS 框架

前端 0 134 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 (
);}


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
);}


结语


除了我们在这里讨论的框架之外,市面上还有很多 CSS 框架。这里只列举了一部分重要的和流行的,也是希望你能选择正确的。


在这个新的一年,希望这篇文章对大家都有所帮助。感谢你的阅读。


作者:场长


评论