有哪些类似bootstrap的纯css框架?

news2024/9/21 15:31:58

前言

下面是一些类似bootstrap的css框架,以及其开源的仓库和网址附上,整理不易,希望多多点一下赞同收藏喜欢哈~

1、Tailwind

Star:70.5k

Tailwind CSS 是一个实用的工具集,用于快速构建现代化的自定义用户界面。它提供了一系列预定义的样式类,可以直接应用于 HTML 元素上,从而减少了手动编写 CSS 的工作量

github地址:https://github.com/tailwindlabs/tailwindcss

官网:https://tailwindcss.com/

2、 HTML5 Boilerplate

Star:54.9k

"html5-boilerplate"是一个流行的HTML5项目模板和开发框架。它提供了一个预先配置好的HTML、CSS和JavaScript文件的基础结构,使得开发者可以快速开始构建一个现代化的、响应式的网站或应用程序

github地址:https://github.com/h5bp/html5-boilerplate

官网:https://html5boilerplate.com/

3、 Semantic UI

Star:50.7k

Semantic-UI是一款开源的现代化的 前端框架,它用于构建用户界面。它使用语义化的HTML来构建页面布局,并提供了丰富的CSS样式和JavaScript组件,以便开发人员能够快速、高效地构建出美观、易于使用的网页和应用程序

github地址:https://github.com/Semantic-Org/Semantic-UI

官网:https://semantic-ui.com/

4、 Bulma

Star:47.4k

Bulma是一个现代化的CSS框架,用于构建响应式的、移动优先的Web界面。它基于Flexbox布局,并提供了一组易于使用的预定义样式和组件,包括按钮、表格、表单、导航等。Bulma的设计风格简洁、精致,并且高度可定制,允许开发人员根据自己的需求进行个性化调整

github地址:https://github.com/jgthms/bulma

官网:https://bulma.io

5、Materialize

Star:38.8k

Materialize是一个现代化的 响应式前端框架,提供了一套用于构建各种Web应用程序和网站的CSS和JavaScript组件。它基于Google的Material Design设计原则,具有丰富的可定制化选项

github地址:https://github.com/Dogfalo/materialize

官网:https://materializecss.com/

6、 Pure

Star:23.1k

"pure-css"是一个开源的CSS库,它提供了一系列轻量级、可定制的CSS模块,用于构建现代化的网页界面。它致力于提供简洁、灵活和易于理解的CSS代码,同时避免使用过多的JavaScript。这样可以帮助开发者快速地创建具有 响应式布局和现代风格的网页。pure-css的设计理念是通过精简CSS代码来提高网页性能,并鼓励开发者编写更具语义性和组件化的CSS

github地址:https://github.com/pure-css/pure

官网:https://purecss.io/

7、 Skeleton

Star:18.9k

Skeleton是一个非常简便、响应式的起步框架,用于移动友好的开发

github地址:https://github.com/dhg/Skeleton

官网:http://getskeleton.com/

8、 UIkit

Star:17.9k

UIkit包含了一套用户界面元素、图形绘制和动画效果等工具,可以帮助开发者构建专业、美观的界面。通过使用uikit,开发者可以轻松地创建按钮、标签、文本框、图像视图等常见的用户界面组件,并且可以通过 自定义属性和方法来实现个性化的设计和交互

github地址:https://github.com/uikit/uikit

官网:https://getuikit.com

9、 Spectre

Star:11.2k

Spectre.css是一个开源的CSS框架,主要用于构建响应式的Web页面。它提供了一系列的CSS类和组件,可以优化网页的外观和交互效果。Spectre.css具有简洁轻量的特点,文件大小较小,并且没有依赖关系。它可以与其他框架和库配合使用,也可以作为单独的框架使用

github地址:https://github.com/picturepan2/spectre

官网:https://picturepan2.github.io/spectre/

10、Metro UI

Star:7k

Metro-UI-CSS是一个基于Metro 风格设计的CSS框架。Metro风格起源于微软公司的Windows Phone和Windows 8操作系统界面设计,注重简洁、平面化及大胆鲜明的颜色和标志性元素

github地址:https://github.com/olton/Metro-UI-CSS

官网:https://korzh.com/metroui

11、Bootflat

Star:4.3k

BOOTFLAT是一个基于Bootstrap 3.3.0 CSS框架的开源Flat UI KIT。它为Web开发人员提供了一种更快、更简便、更少重复的方式来创建优雅的Web应用程序

github地址:https://github.com/bootflat/bootflat.github.io

官网:http://bootflat.github.io/

12、Susy

Star:3.9k

Susy 是一个开源的 CSS 布局框架,它提供了一套灵活而强大的工具,用于创建自适应和响应式的网页布局

github地址:https://github.com/oddbird/susy

官网:https://www.oddbird.net/susy/

持续更新~

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

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

相关文章

IDEA偶尔编译的时候不识别lombok

偶尔IDEA启动项目的时候会识别不到lombok,识别不到get()跟set()方法 方案 在settings添加下面代码 -Djps.track.ap.dependenciesfalse

SAP 委外副产品业务

SAP 委外副产品业务 1.订单bom设置数量为负 2.采购收货时,副产品O库存增加,545 O 借:原材料 贷:委外加工-发出材料 3.从O库存调拨回本地库存,542

数实融合 产业共创 | 竹云受邀出席“2023湾区数字科技50人论坛”

7月29日,“2023湾区数字科技50人论坛”在深圳湾科技生态园圆满举行!本届论坛由深圳市科学技术协会指导,中国鲲鹏产业源头创新中心、湾盟产业创新服务中心主办,深圳市金融攻关基地、广东赛迪工业和信息化研究院、香港科技大学深港协…

【Python】Python使用TK实现动态爱心效果

【Python】Python使用Tk实现动态爱心效果 画布使用了缓存机制,启动时绘制足够多的帧数,运行时一帧帧地取出来展示,明显更流畅,加快了程序执行速度。将控制跳动动画的函数从正弦函数换成了贝塞尔函数,贝塞尔函数更灵活…

vue中显示在页面顶部的进度条插件——NProgress

我们在一些网站中经常见到导航栏上方的进度条显示,大家仔细观察,其实csnd中也有类似的效果,如下图显示效果,我们现在就来一起看看这个功能需求是怎么实现的。 一、功能需求 首先,实现这个功能其实不难,说实…

独立成分分析ICA理论推导

Independent Component Analysis

刷题笔记 day3

力扣 11 盛水最多的容器 解法:使用对撞指针解题。 思路: 定义两个指针 left(指向数组首端)和 right(指向数组尾部),来计算其容积; 让对应数值较小的指针移动一步,再次…

发npm包

重点文件 .github -> workflow -> .yml文件 发自己的包 新建dev分支,合并到master后自动执行 fork别人的包 fork -> base dev新建本地rebase-dev分支 -> 提交push后合并至dev -> dev合并至master后自动执行 值得注意的是,fork别人的…

rsync 第一章

1.实验一 2.实验二

C++多态之——虚表地址所在内存空间的位置

众所周知,虚拟地址空间划分成了好几个部分,有堆区、栈区、常量区、静态区...... (500条消息) C/C代码内存分布图_程序分布图_橙予清的zzz~的博客-CSDN博客https://blog.csdn.net/weixin_69283129/article/details/126122989大家可以看这篇文章深入了解我…

食堂管理必备技巧,你学会了吗?

随着科技的不断进步和智能化的发展,各个领域都在积极探索如何将智能技术应用于实际生活中,学校食堂也不例外。 学校食堂作为学生日常生活的重要组成部分,其高效管理和优质服务对学生的学习和生活质量具有重要影响。为了满足学生和教职工对食堂…

docker容器的基本操作

一、查看Docker的版本信息 [roothuyang1 ~]# docker version 二、查看docker的详细信息 [roothuyang1 ~]# docker info 三、Docker镜像操作 Docker创建容器前需要本地存在对应的镜像,如果本地加载不到相关镜像,Docker默认就会尝试从镜像仓库https://hu…

3ds Max建模教程:模拟布料拖拽撕裂和用剑撕裂两种效果

推荐: NSDT场景编辑器 助你快速搭建可二次开发的3D应用场景 1. 拖拽撕布 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 在透视视口中创建平面。保持其长度 后座和宽度后座为 100。 创建平面 步骤 3 转到助手>假人并在 飞机的两侧。 助手>假人 步骤 4 选…

SpringBoot复习:(10)SpringApplication中的initializer成员变量是怎么初始化的?

initializers成员变量定义如下: 在构造方法里通过setInitializers setInitializers的代码很简单: 其中的参数通过getSpringFactoriesInstances来获取的,该方法的代码如下: 其中调用的重载的方法代码如下: 它调用…

python-网络爬虫.BS4

BS4 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库, 它能够通过你喜欢的转换器实现惯用的文档导航、查找、修改文档的方 式。 Beautiful Soup 4 官方文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 帮助手册&…

雷达信号处理技术汇总

系列文章目录 《雷达简单介绍》 《信号类型(雷达)——雷达波形认识(一)》 《信号类型(雷达)——连续波雷达(二)》 《信号类型(雷达)——脉冲雷达&#xf…

clickhouse查询缓存

为了实现最佳性能,数据库需要优化其内部数据存储和处理管道的每一步。但是数据库执行的最好的工作是根本没有完成的工作!缓存是一种特别流行的技术,它通过存储早期计算的结果或远程数据来避免不必要的工作,而访问这些数据的成本往…

C++高级编程

本阶段主要针对C泛型编程和STL技术做详细讲解,探讨C更深层的使用 1 模板 1.1 模板的概念 模板就是建立通用的模具,大大提高复用性 模板的特点: 模板不可以直接使用,它只是一个框架模板的通用并不是万能的 1.2 函数模板 C另一…

前端页面---滑动分离登录页面

效果图如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equ…

电脑e盘不见了怎么办?3个方法帮你找回!

“很奇怪很奇怪&#xff0c;为什么我电脑上的e盘莫名其妙就没了呢&#xff1f;我有些文件还保存在里面呢&#xff0c;现在有什么方法能帮我把e盘找回来吗&#xff1f;” E盘通常是我们存储数据和文件的重要驱动器之一。如果电脑e盘不见了&#xff0c;我们可能也会感到很焦虑。虽…