首页 前端知识 2024 年排名前 5 的 CSS 框架

2024 年排名前 5 的 CSS 框架

2024-04-22 09:04:28 前端知识 前端哥 504 171 我要收藏

文章目录

    • 1、Bootstrap
    • 2、Tailwind CSS
    • 3、Foundation
    • 4、Bulma
    • 5、UIKit


在这里插入图片描述

1、Bootstrap

在这里插入图片描述
Bootstrap框架是由Twitter的设计师Mark Otto和Jacob Thornton合作开发的,于2011年8月在GitHub上发布。它是目前最受欢迎的前端框架之一,被广泛应用于各种Web项目中。Bootstrap框架提供了优雅的HTML和CSS规范,以及丰富的JavaScript插件和组件,使得开发人员可以更高效地构建Web应用程序。

Bootstrap框架优点

  • 响应式布局:Bootstrap框架支持响应式布局,可以根据不同的设备屏幕大小自动调整页面布局,提高用户体验。

  • 移动设备优先:自Bootstrap 3起,移动设备优先的样式贯穿于整个库,使得Web应用程序在移动设备上获得最佳的体验。

  • 浏览器支持:主流浏览器都支持Bootstrap,包括IE、Firefox、Chrome、Safari等。

  • 学习成本低:要学习Bootstrap,只需读者具备HTML和CSS的基础知识。

  • 良好的代码规范:为开发人员创建接口提供了一个简洁统一的解决方案,减少了测试的工作量。

  • 组件丰富:Bootstrap包含了功能强大的内置组件,如网格系统、按钮、表单、导航等。

  • 定制性强:开发人员可以定制Bootstrap的组件、LESS变量和jQuery插件来得到一套自定义的版本。

这是 Bootstrap 的独特功能

  • 响应式网格系统

  • 广泛的预构建组件(导航栏、卡片、模式)

  • 用于快速造型的实用程序类

  • 用于增强功能的 JavaScript 插件

  • 活跃的社区和丰富的开发文档

Bootstrap框架简单示例

下面是一个简单的示例,演示如何使用Bootstrap框架创建一个响应式布局的Web页面:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <!-- 引入Bootstrap框架的CSS文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Another card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere else</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Yet another card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere else again</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入Bootstrap框架的JavaScript文件 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在上述示例中,我们首先在HTML页面的<head>部分引入了Bootstrap框架的CSS文件,然后在<body>部分使用了Bootstrap框架的栅格系统(container、row和col-md-*)来创建一个响应式布局。在栅格系统中,我们使用了Bootstrap框架的卡片组件(card)来展示一些内容。最后,我们在HTML页面的底部引入了Bootstrap框架的JavaScript文件,以启用框架的交互功能。

通过使用Bootstrap框架,开发人员可以更高效地构建响应式和移动优先的Web应用程序,提高开发效率和用户体验。

2、Tailwind CSS

在这里插入图片描述

Tailwind CSS框架是由Adam Wathan和Steve Schoger开发的,于2017年发布。它是一个现代化的CSS框架,旨在帮助开发者更高效地构建用户界面。与传统的CSS框架不同,Tailwind CSS框架不提供预定义的组件,而是提供了一组原子化的CSS类,开发者可以通过组合这些类来创建自己的组件。

Tailwind CSS框架优点

  • 原子化CSS类:Tailwind CSS框架提供了一组原子化的CSS类,开发者可以通过组合这些类来创建自己的组件,而不是使用预定义的组件。这种方式使得开发者可以更好地控制用户界面的样式和布局。

  • 高性能:由于Tailwind CSS框架只提供了一组原子化的CSS类,而不是大量的预定义组件,因此它的性能非常高。在构建用户界面时,开发者只需要使用所需的CSS类,减少了不必要的样式和布局的加载。

  • 可定制:Tailwind CSS框架允许开发者根据自己的需求进行定制。开发者可以根据自己的设计系统和品牌需求,自定义颜色、字体、间距等样式。

  • 可扩展:Tailwind CSS框架提供了丰富的插件和工具,开发者可以根据自己的需求进行扩展。例如,可以使用Tailwind CSS插件来添加自定义的CSS类,或者使用Tailwind CSS工具来优化构建过程。

  • 可维护:由于Tailwind CSS框架使用了原子化的CSS类,因此代码更加简洁、可读性和可维护性更高。开发者可以更好地理解和修改代码,减少了代码的冗余和耦合。

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

  • 实用至上的造型方法

  • 使用配置文件高度可定制

  • 没有预先构建的组件;从实用程序类创建样式

  • 带断点的响应式设计

  • 用于优化生产构建的 PurgeCSS 集成

  • 通过 JIT(Just-In-Time)模式快速开发

Tailwind CSS框架简单示例

下面是一个简单的示例,演示如何使用Tailwind CSS框架创建一个响应式布局的Web页面:

<!DOCTYPE html>
<html>
<head>
    <title>Tailwind CSS Example</title>
    <!-- 引入Tailwind CSS框架的CSS文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto">
        <div class="flex flex-col items-center justify-center h-screen">
            <h1 class="text-3xl font-bold text-center">Hello, Tailwind CSS!</h1>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
        </div>
    </div>
</body>
</html>

在上述示例中,我们首先在HTML页面的<head>部分引入了Tailwind CSS框架的CSS文件。然后,在<body>部分中,我们使用了Tailwind CSS框架的原子化CSS类来创建一个响应式布局的Web页面。在页面中,我们使用了一个容器(container),并在其中添加了一个水平居中(flex)的列(flex-col)。在列中,我们添加了一个标题(h1)和一个按钮(button),并为它们应用了相应的CSS类。最后,我们为页面添加了一个背景颜色(bg-gray-100)。

通过使用Tailwind CSS框架,开发者可以更高效地构建用户界面,提高开发效率和代码质量。同时,Tailwind CSS框架也为开发者提供了更多的灵活性和可定制性,使得开发者可以根据自己的需求进行扩展和优化。

3、Foundation

在这里插入图片描述
Foundation框架是一个用于开发响应式HTML、CSS和JavaScript的框架。它是一个易用、强大且灵活的框架,用于构建基于任何设备上的Web应用。Foundation框架以移动优先的方式设计,并提供了丰富的组件和工具,以帮助开发人员快速构建现代化的Web应用程序。

优点

  • 响应式设计:Foundation框架支持响应式设计,可以根据不同的设备屏幕大小自动调整页面布局,提高用户体验。

  • 移动优先:Foundation框架以移动优先的方式设计,特别适合移动设备的Web应用开发。

  • 丰富的组件和工具:Foundation框架提供了丰富的组件和工具,如网格系统、按钮、表单、导航等,可以帮助开发人员快速构建现代化的Web应用程序。

  • 易用性:Foundation框架的API设计简单易用,开发人员可以快速上手并进行开发。

  • 可定制性:Foundation框架允许开发人员根据自己的需求进行定制,以满足特定项目的需求。

  • 可扩展性:Foundation框架提供了丰富的插件和工具,开发人员可以根据自己的需求进行扩展。

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

  • 具有灵活性的响应式网格系统

  • 模块化架构,易于定制

  • 用于样式化的 Sass 预处理器

  • 内置组件和响应式导航

  • Flexbox 和block网格支持

  • helper函数库

简单示例

下面是一个简单的示例,演示如何使用Foundation框架创建一个响应式布局的Web页面:

<!DOCTYPE html>
<html>
<head>
    <title>Foundation Example</title>
    <!-- 引入Foundation框架的CSS文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.0/dist/css/foundation.min.css">
</head>
<body>
    <!-- 使用Foundation框架的网格系统创建一个响应式布局 -->
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell small-12 medium-6 large-4">
                <div class="callout">
                    <h3>Card 1</h3>
                    <p>Some content here.</p>
                </div>
            </div>
            <div class="cell small-12 medium-6 large-4">
                <div class="callout">
                    <h3>Card 2</h3>
                    <p>Some content here.</p>
                </div>
            </div>
            <div class="cell small-12 medium-6 large-4">
                <div class="callout">
                    <h3>Card 3</h3>
                    <p>Some content here.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入Foundation框架的JavaScript文件 -->
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.0/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

在上述示例中,我们首先在HTML页面的<head>部分引入了Foundation框架的CSS文件,然后在<body>部分使用了Foundation框架的网格系统(grid-container、grid-x和cell)来创建一个响应式布局。在网格系统中,我们使用了Foundation框架的卡片组件(callout)来展示一些内容。最后,我们在HTML页面的底部引入了Foundation框架的JavaScript文件,并使用jQuery来初始化Foundation框架。

通过使用Foundation框架,开发人员可以更高效地构建响应式和移动优先的Web应用程序,提高开发效率和用户体验。

4、Bulma

在这里插入图片描述
Bulma框架是一个开源的、简单、现代的CSS框架,它基于Flexbox模块,纯CSS没有JavaScript代码。Bulma框架的设计初衷是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复杂的内容布局。

Bulma框架优点

  • 响应式设计:Bulma框架为电脑、平板和手机提供响应式设计,使得网站在不同设备上都有良好的用户体验。

  • 纯CSS框架:Bulma框架是一个纯CSS框架,没有JavaScript代码,使得网站加载速度更快,性能更好。

  • 代码优雅简洁:Bulma框架的代码简洁、易读,遵循模块化的设计原则,使得开发人员可以更高效地编写和维护代码。

  • 丰富的组件和工具:Bulma框架提供了丰富的预定义组件和工具,如按钮、表单、卡片、菜单等,可以帮助开发人员快速构建现代化的Web应用程序。

  • 可定制性:Bulma框架允许开发人员根据自己的需求进行定制,以满足特定项目的需求。

  • 可扩展性:Bulma框架提供了丰富的插件和工具,开发人员可以根据自己的需求进行扩展。

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

  • 基于 Flexbox 的现代 CSS 框架

  • 易于使用且直观的语法

  • 没有 JavaScript 依赖性

  • 带有内置修改器的响应式设计

  • 导航栏、模式和选项卡等组件

  • 可通过 Sass 进行扩展

Bulma框架简单示例

下面是一个简单的示例,演示如何使用Bulma框架创建一个响应式布局的Web页面:

<!DOCTYPE html>
<html>
<head>
    <title>Bulma Example</title>
    <!-- 引入Bulma框架的CSS文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
    <div class="container">
        <div class="columns">
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <h3 class="title is-3">Card 1</h3>
                        <p>Some content here.</p>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <h3 class="title is-3">Card 2</h3>
                        <p>Some content here.</p>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <h3 class="title is-3">Card 3</h3>
                        <p>Some content here.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

在上述示例中,我们首先在HTML页面的<head>部分引入了Bulma框架的CSS文件,然后在<body>部分使用了Bulma框架的网格系统(container、columns和column)来创建一个响应式布局。

在网格系统中,我们使用了Bulma框架的卡片组件(card)来展示一些内容。通过使用Bulma框架,开发人员可以更高效地构建响应式和移动优先的Web应用程序。

5、UIKit

在这里插入图片描述

UIKit框架是由YOOtheme团队开发的,它提供了全面的HTML、CSS及JS组件,使用简单,容易定制和扩展。UIKit框架基于LESS开发,代码结构清晰简单,易于扩展和维护。它具有体积小、反应灵敏的响应式组件,可以根据UIKit基本的风格样式,轻松地自定义创建出自己喜欢的主题样式。

UIKit框架优点
体积小:UIKit框架的体积非常小,只有约50kb,可以显著减少页面加载时间并提高性能。

  • 模块化:UIKit框架遵循模块化的设计原则,提供了30多个模块化并可扩展的组件,如栅格系统、选项卡、表单、按钮、图标等,可以根据需要选择使用。

  • 响应式设计:UIKit框架具有完全响应式并可以嵌套的流体网格布局,可以根据不同的屏幕分辨率和上网设备自动做出响应,提供一致的体验。

  • 可定制性:UIKit框架可以根据UIKit基本的风格样式,轻松地自定义创建出自己喜欢的主题样式。

  • 易用性:UIKit框架的使用非常简单,只需要在HTML中添加一些简单的类名即可实现丰富的UI效果。

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

  • 模块化和轻量级框架

  • 响应式网格系统

  • 预先设计的组件(导航栏、滑块、模式)

  • 基于 Flexbox 的布局

  • 动画和过渡效果

  • 可定制和主题化

下面是一个简单的示例,演示如何使用UIKit框架创建一个响应式布局的Web页面:

<!DOCTYPE html>
<html>
<head>
    <title>UIKit Example</title>
    <!-- 引入UIKit框架的CSS文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.6.0/css/uikit.min.css">
</head>
<body>
    <!-- 使用UIKit框架的网格系统创建一个响应式布局 -->
    <div class="uk-container">
        <div class="uk-grid">
            <div class="uk-width-1-3">
                <div class="uk-panel">
                    <h3>Card 1</h3>
                    <p>Some content here.</p>
                </div>
            </div>
            <div class="uk-width-1-3">
                <div class="uk-panel">
                    <h3>Card 2</h3>
                    <p>Some content here.</p>
                </div>
            </div>
            <div class="uk-width-1-3">
                <div class="uk-panel">
                    <h3>Card 3</h3>
                    <p>Some content here.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入UIKit框架的JavaScript文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.6.0/js/uikit.min.js"></script>
</body>
</html>

在上述示例中,我们首先在HTML页面的<head>部分引入了UIKit框架的CSS文件,然后在<body>部分使用了UIKit框架的网格系统(uk-container、uk-grid和uk-width-*)来创建一个响应式布局。在网格系统中,我们使用了UIKit框架的面板组件(uk-panel)来展示一些内容。最后,我们在HTML页面的底部引入了UIKit框架的JavaScript文件,以启用框架的交互功能。

通过使用UIKit框架,开发人员可以更高效地构建响应式和移动优先的Web应用程序,提高开发效率和用户体验。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5701.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!