2024 年排名前 5 的 CSS 框架

文章目录

    • 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应用程序,提高开发效率和用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822684.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 usePrevious 实现 React 函数组件中上一状态值的追踪

在 React 开发过程中&#xff0c;有时我们需要在函数组件的某个阶段或事件处理函数中访问到上一次的状态值。然而&#xff0c;React 并未提供直接获取上一状态的内置机制。为了解决这个问题&#xff0c;我们可以采用一种名为 usePrevious 的自定义 Hook。本文将详细介绍 usePre…

mac apktool安装

在macOS上安装Apktool需要几个步骤。以下是安装Apktool的一般指南&#xff1a; 安装Java&#xff1a; 确保你的Mac上安装了Java。你可以通过在终端运行java -version来检查Java是否已经安装。如果还没有安装&#xff0c;你可以从Oracle官网下载并安装Java。 下载Apktool&#…

最新Latex2024安装教程 超简单

Latex是一款常用的论文写作工具&#xff0c;今天小菜介绍Latex的安装配置过程。 1. 来到官网下载镜像文件 https://www.tug.org/texlive/ 按步骤点击&#xff1a; 就会进入一个最近的镜像网站&#xff0c;选择textlive2024.iso即可 下载完成之后解压&#xff0c;安装路径…

Linux02(项目部署,手动和自动部署,JDK版本问题,安装软件,安装软件,安装JDK,Tomcat,MySQL,Irzsz)

目录 一、安装软件 1. 安装准备工作 1 Linux里的软件安装方式 2 上传软件到Linux 3 拍照虚拟机快照 2. 安装JDK 1 卸载自带jdk 2 解压JDK 3 配置环境变量 4 测试JDK 3. 安装Tomcat 1 解压Tomcat 2 修改防火墙设置 3 测试Tomcat 启动Tomcat 访问Tomcat 查看Tom…

javascript 统计按钮点击量

要实现计算按钮被点击的次数&#xff0c;我们可以借助JavaScript中的事件监听器。事件监听器可以帮助我们捕获用户在网页上的各种操作&#xff0c;如点击按钮、输入文本等。通过监听按钮的点击事件&#xff0c;我们可以在每次点击时进行相应的操作&#xff0c;例如增加点击计数…

Python 配置文件config.ini用法详解

1、介绍config.ini文件 config.ini是一种配置文件&#xff0c;常用于存储程序或系统的配置信息。它通常采用键值对的形式&#xff0c;每一行表示一个配置项&#xff0c;用等号&#xff08;&#xff09;将键和值分隔开。config.ini文件可以包含多个节&#xff08;section&#x…

git 小记

一、 github新建仓库 git clone 。。。。。。。。。。。 &#xff08;增删查补&#xff0c;修改&#xff09; git add . git commit -m "修改” git push (git push main) 二、branch 分支 branch并不难理解&#xff0c;你只要想像将代码拷贝到不同目录…

如何在Python中使用环境变量? —— Python环境变量的应用:安全和灵活的配置方法

在Python中&#xff0c;可以使用os模块来访问和操作环境变量。 要访问一个环境变量的值&#xff0c;可以使用os.environ字典。例如&#xff0c;要获取PATH环境变量的值&#xff0c;可以使用os.environ[PATH]。 要设置一个环境变量的值&#xff0c;可以使用os.environ字典的索…

vue一键复制实现(实测)

vue一键复制实现&#xff08;实测&#xff09; 描述&#xff1a;能够通过点击事件完成复制链接的功能 1. 安装clipboard npm install clipboard --save 2. 在vue组件中使用 <template><button class"btn" :data-clipboard-text"link">复制&…

MongoDB的CURD(增删改查操作)

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 ✈️如果喜欢这篇文章的话 &#x1f64f;大大们可以动动发财的小手&#x1f449;&#…

刷代码随想录有感(34):前k个高频元素

本题代码涉及到了多个陌生概念&#xff0c;题干如下&#xff1a; 代码; class Solution { public:class mycomparison{//自定义规则&#xff0c;使优先队列可以自动排序public:bool operator()(pair<int, int> & lhs, pair<int, int> & rhs){return lhs.s…

第十五届蓝桥杯大赛软件赛省赛 C/C++ 大学 B 组(基础题)

试题 C: 好数 时间限制 : 1.0s 内存限制: 256.0MB 本题总分&#xff1a;10 分 【问题描述】 一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位 &#xff09;上 的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位 &…

SQLSERVER对等发布问题处理

问题1&#xff1a; 无法对 数据库Sast_Business 执行 删除&#xff0c;因为它正用于复制。 (.Net SqlClient Data Provider) 处理&#xff1a; USE [master]; GO EXEC sp_replicationdboption dbname NSast_Business, optname Npublish, value Nfalse; EXEC sp_replica…

如何保障UDP传输中数据文件不丢失?

UDP协议因其低时延和高速传输的特性&#xff0c;在实时应用和大量数据传输领域中发挥着不可或缺的作用。但是&#xff0c;由于UDP是一种无连接的通讯协议&#xff0c;它并不确保数据包的顺序、完整性和可靠性。 为了解决UDP传输中数据一致性的问题&#xff0c;技术专家们进行了…

【Linux系统编程】第四弹---基本指令(二)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、echo指令 2、cat指令 3、more指令 4、less指令 4、head指令 5、tail指令 6、时间相关的指令 7、cal指令 8、find指…

前端错误监控的方法有哪些

前端错误监控是指通过各种手段收集、分析和处理前端应用运行中发生的错误 常用的前端错误监控的方法有 使用 try catch 方法 捕获特定代码块中的错误多用于处理特定函数或代码段可能抛出的异常&#xff0c;尤其是异步代码网络请求错误监控 promise.catchtry catch全局错误处理…

Wix在国内受限?为何不使用中国版WIX自助建站,wix的国产替代工具

wix是一款知名的在线网站建站工具&#xff0c;能让用户在其网络上网站编辑器中拖放工具创建HTML5网站。用户可在他们的网站编辑器中加入额外的功能&#xff0c;例如社交网络按钮、电子商务功能、联系表格、电子报及社群论坛等。 但wix在国内不能用&#xff0c;或打开速度很慢&a…

事务相关:TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();

1&#xff09;当我们需要对一个事件增加事务时&#xff0c;可以使用Transactional(rollbackFor Exception.class)&#xff0c;但此时由于抛出了异常&#xff0c;return方法无法继续执行。 2&#xff09;此时&#xff0c;我们就需要手动触发事务&#xff0c;看代码如下&#x…

蓝桥杯C/C++A组省赛历年真题题解(2020~2024)

刷题整理2020~2024蓝桥A组真题。 20202021202220232024门牌制作卡片&#xff08;模拟题&#xff09;裁纸刀幸运数(数字&#xff09;艺术与蓝球(模拟)既约分数直线&#xff08;数学枚举&#xff09;灭鼠先锋有奖问答(dfs)五子棋对弈(dfs)蛇形填数货物摆放(因子暴力枚举&#xf…

关于无界在vue中的应用

无界的链接地址&#xff1a;https://wujie-micro.github.io/doc/ 当我们配置好我们的页面是子应用的时候 1.处理好路由 1.对于我们定义的微前端服务&#xff0c;我们处理方式 if (v.frame true && !v.children.length && !v.unNeedMicroView) {v.component…