2024年排名前5 CSS 框架：Bootstrap、Tailwind CSS…

2024-04-2609:21:24网站建设与开发Comments172 views字数 7353阅读模式

为您的项目选择正确的 CSS 框架至关重要。这为构建新 UI 组件所需的整体工作定下了基调。目前，最重要的是更快地发布新功能，让您的客户满意。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

因此，您需要一个易于使用并可能提供即用型 UI 元素的 CSS 框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

1. Bootstrap

2024年排名前5 CSS 框架：Bootstrap、Tailwind CSS…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

Bootstrap 是一个移动优先的 CSS 框架，可让您构建美观且响应灵敏的 Web 界面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

它配备了强大的网格系统，可以帮助开发人员为不同的屏幕尺寸制定适应性布局。此外，它还提供了即用型组件，例如导航栏、卡片和模式，从而加快了开发速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

这是 Bootstrap 的独特功能文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

响应式网格系统。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

广泛的预构建组件（导航栏、卡片、模式）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

用于快速造型的实用程序类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

用于增强功能的 JavaScript 插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

活跃的社区和广泛的文档。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

开发人员围绕 Bootstrap 创建了包装器以提供直接的框架支持。例如，如果您尝试将 Bootstrap 集成到 React 中，您可以轻松地将库 — React Bootstrap 安装到您的项目中并按如下方式利用它：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

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 (
    <div className="button">
      {['Primary', 'success', 'danger'].map((variant) => (
        <DropdownButton
          as={ButtonGroup}
          key={variant}
          id={dropdown-variants-${variant}}
          variant={variant.toLowerCase()}
          title={variant}
          <Dropdown.Item eventKey="1">Action</Dropdown.Item>
          <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
          <Dropdown.Item eventKey="3" active>
            Active Item
          </Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
        </DropdownButton>
      ))}
      <br />
      <Dropdown>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Dropdown Button
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
          <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
          <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

2. Tailwind CSS

2024年排名前5 CSS 框架：Bootstrap、Tailwind CSS…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

Tailwind CSS 是一个实用程序优先的 CSS 框架，它提供了一组低级实用程序类来构建自定义设计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

以下是 Tailwind CSS 的一些独特功能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

实用至上的造型方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

使用配置文件高度可定制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

没有预先构建的组件；从实用程序类创建样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

带断点的响应式设计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

用于优化生产构建的 PurgeCSS 集成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

通过 JIT（Just-In-Time）模式快速开发。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

集成 Tailwind 并不像看起来那么简单。您首先需要设置一个 Tailwind 编译器：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

之后，您就可以使用预定义的 Tailwind 编写 CSS 类：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

export function Tailwind() {
  const ContactTextArea = ({
    row,
    placeholder,
    name,
    defaultValue,
  }: {
    row: number;
    placeholder: string;
    name: string;
    defaultValue: string;
  }) => {
    return (
      <>
        <div className="mb-6">
          <textarea
            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}
          />
        </div>
      </>
    );
  };

const ContactInputBox = ({
    type,
    placeholder,
    name,
  }: {
    type: string;
    placeholder: string;
    name: string;
  }) => {
    return (
      <>
        <div className="mb-6">
          <input
            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"
          />
        </div>
      </>
    );
  };
  return (
    <section className="relative z-10 overflow-hidden bg-white py-20 dark:bg-dark lg:py-[120px]">
      <div className="w-full px-4 lg:w-1/2 xl:w-5/12">
        <div className="relative rounded-lg bg-white p-8 shadow-lg dark:bg-dark-2 sm:p-12">
          <form>
            <ContactInputBox type="text" name="name" placeholder="Your Name" />
            <ContactInputBox
              type="text"
              name="email"
              placeholder="Your Email"
            />
            <ContactInputBox
              type="text"
              name="phone"
              placeholder="Your Phone"
            />
            <ContactTextArea
              row={6}
              placeholder="Your Message"
              name="details"
              defaultValue=""
            />
            <div>
              <button
                type="submit"
                className="w-full rounded border border-primary bg-primary p-3 text-white transition hover:bg-opacity-90"
                Send Message
              </button>
            </div>
          </form>
          <div />
        </div>
      </div>
    </section>
  );
}

3. Foundation

2024年排名前5 CSS 框架：Bootstrap、Tailwind CSS…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

Foundation 是一个开源、响应式前端框架，可简化在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件的创建。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

许多公司，包括 Facebook、еBay、Mozilla、Adobе 甚至 Disney，都在其项目中使用 Foundation。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

它包括一个强大且灵活的响应式网格，其中包含许多方便的选项、模式、排版、导航组件和表单元素，设计人员可以将这些元素快速集成到他们的产品中。该基础也是模块化的，这意味着您可以根据需要使用尽可能少或尽可能多的基础。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

以下是 Foundation 的一些独特功能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

具有灵活性的响应式网格系统。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

模块化架构，易于定制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

用于样式化的 Sass 预处理器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

内置组件和响应式导航。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

Flexbox 和块网格支持。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

辅助功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

您可以将 Foundation 集成到您的项目中，如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

import { Menu, MenuItem } from 'react-foundation';

export function Foundation() {
  return (
   <Menu style={{ marginLeft: '34px' }}>
     <MenuItem>
       <a href="/">Home</a>
     </MenuItem>
     <MenuItem>
       <a href="/">Blog</a>
     </MenuItem>
     <MenuItem>
       <a href="/">About</a>
     </MenuItem>
     <MenuItem>
      <a href="/">Contact</a>
     </MenuItem>
   </Menu>
  );
}

4. Bulma

2024年排名前5 CSS 框架：Bootstrap、Tailwind CSS…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

Bulma 是一个轻量级 CSS 框架，因其简单性、响应能力和自定义选项而脱颖而出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

与其他 UI 框架不同，Bulma 构建于 Flexbox 之上，Flexbox 是一种 CSS 布局模型，可根据容器的宽度调整页面元素的宽度。这使得创建网格等任务变得非常简单，并有助于框架的轻量级特性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

以下是布尔玛的一些主要特点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

基于 Flexbox 的现代 CSS 框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

易于使用且直观的语法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

没有 JavaScript 依赖性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

带有内置修改器的响应式设计。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

导航栏、模式和选项卡等组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

可通过 Sass 进行扩展。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

您可以将 Bulma 集成到您的项目中，如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

import 'bulma/css/bulma.min.css';

export function Bulma() {
  return (
    <div>
      <nav className="pagination" role="navigation" aria-label="pagination">
        <a href="/" className="pagination-previous">
          Previous
        </a>
        <a href="/" className="pagination-next">
          Next Page
        </a>
        <ul className="pagination-list">
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 1">
              1
            </a>
          </li>
          <li>
            <span className="pagination-ellipsis">&hellip;</span>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 45">
              45
            </a>
          </li>
          <li>
            <a
              href="/"
              className="pagination-link is-current"
              aria-label="Page 46"
              aria-current="page"
              46
            </a>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 47">
              47
            </a>
          </li>
          <li>
            <span className="pagination-ellipsis">&hellip;</span>
          </li>
          <li>
            <a href="/" className="pagination-link" aria-label="Goto page 86">
              86
            </a>
          </li>
        </ul>
      </nav>
    </div>
  );
}

5. UIKit

2024年排名前5 CSS 框架：Bootstrap、Tailwind CSS…文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

UIKit 是一个开源框架，用于构建 Web 应用程序的用户界面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

它的结构和设计理念与其他 UI 框架不同。与遵循传统 BEM 方法的其他框架不同，UIkit 使用基于组件的结构。这允许组件具有更大的灵活性和可重用性，从而可以显着减少构建复杂用户界面所需的代码量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

以下是 UIKit 的一些主要功能：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

模块化和轻量级框架。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

响应式网格系统。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

预先设计的组件（导航栏、滑块、模式）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

动画和过渡效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

可定制和主题化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

您可以将 UIKit 集成到您的项目中，如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

import 'uikit/dist/css/uikit.min.css';

export function Uikit() {
  return (
    <div className="uk-flex uk-flex-center uk-margin-top">
      <button
        type="button"
        className="uk-button uk-button-default uk-margin-left"
        onClick={() => alert('Cancel clicked!')}
        Cancel
      </button>
    </div>
  );
}

Wrapping up

除了我们在这里讨论的框架之外，还有很多 CSS 框架。但是，重要的是要确保您选择正确的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

我可以提供的一个技巧是为每个 CSS 框架创建概念验证，以评估学习曲线，以及它是否适合您的项目。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

通过这样做，您可以为您的项目选择正确的 CSS 框架！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/63370.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/cms/63370.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定