适合小白的前端框架大总结

最新推荐文章于 2024-02-20 10:51:24 发布

Joshua_yi

最新推荐文章于 2024-02-20 10:51:24 发布

阅读量4.3k

点赞数 2

分类专栏： web开发文章标签： css

本文链接：https://blog.csdn.net/weixin_44984664/article/details/105097375

版权

web开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

推荐一个超级厉害的前端网站

http://www.fly63.com/nav
适合像我一样的小白入门
在这里插入图片描述
他已经按模块将很多的前端相关的网站都总结了
内容非常丰富 d=====(￣▽￣*)b
下面是小编搜集的一些相关的框架和项目

15种CSS框架

1. Bootstrap

https://getbootstrap.com
在这里插入图片描述
最初被称为Twitter Blueprint的Bootstrap，是作为内部团队使用的工具而创建的。它是最著名的前端框架之一。自公开发布以来，Bootstrap的使用率逐年攀升。

Bootstrap提供了报警、按钮、轮播、下拉式菜单、以及表单等设计模板。借助Bootstrap的移动优先(mobile-first)功能，您可以轻松地创建响应式布局，进而保证在横跨多个设备上的设计一致性。

2. Skeleton

http://getskeleton.com/
在这里插入图片描述
Skeleton号称“简单的响应式样板”。由于此框架只有大约400行代码，因此它更适合于小型项目，以及开发人员需要创建轻量级内容的应用场景。

由于布局简单，Skeleton对于那些刚开始使用前端框架的人来说，是一个不错的选择。当然，也正是缺少CSS设计模板、预处理器、以及整体功能，受限的Skeleton不太适合大型的项目。

3. ZURB Foundation
https://get.foundation
在这里插入图片描述
如果您正在寻找一种响应迅速的前端框架，那么ZURB Foundation就比较适合。该框架将允许您为所有的设备创建各种生产环境的代码和原型。通过支持具有“准系统结构(barebone structure)”的流行框架，ZURB Foundation让用户能够使用简单的方法及其入门模板，来快速生成产品原型。由于提交量不少于14,000次，而且贡献者超过了940名，因此ZURB在GitHub上也有着大量的支持。目前，《华盛顿邮报》和《国家地理》等知名网站都使用的是该框架。

4. UI Kit
https://getuikit.com
在这里插入图片描述
UI Kit以具有高度可定制的轻量级元素而闻名。它的各种模板能够让您轻地松构建各类Web界面。UI Kit的安装包里包含了CSS、HTML和JavaScript文件、以及Sublime Text和Atom编辑器的软件包。另外，它还提供了30多种模块化的组件，用户可以对其进行混合与匹配，以实现多种功能。也就是说，您不必反复搜索那些标记和类名。

与Bootstrap和Foundation等其他框架不同，UI Kit并非使用12列网格设置，而是将其布局分为了弹性、网格和宽度三个部分。当然，由于缺乏资源，该框架更适合于那些具有丰富经验的开发人员。

5. Bulma
https://bulma.io
在这里插入图片描述
作为最常用的框架之一，Bulma得到了超过15万名开发人员的支持。它是基于Flexbox的免费开源框架之一。由于Bulma框架仅完全能够满足开发响应式网站的最低要求，因此它对于初学者来说十分容易上手。另外，得益于在GitHub上有着庞大的用户社区，Bulma具有良好的技术支持。

6. Materialize
https://materializecss.com
在这里插入图片描述

该前端CSS框架是根据Google的设计规范创建的。Materialize带有易于使用的IZ列网格，以便很好地用于布局设计。它的程序包中包括有按钮、卡片、表格、图标、以及许多其他可供按需使用的组件。此外，您还可能用到的功能包括：拖出式移动菜单、涟漪效果动画、以及SASS mixins等。而且，Materialize可以在任何类型的设备上被使用。

7. Semantic UI
https://semantic-ui.com
在这里插入图片描述
由于是一款较新的框架，因此Semantic UI在代码中使用到了自然语言，而且备受初学者的钟爱。它的继承系统(inheritance system)带有一个高级的主题变量，为您提供了设计时的完全自由度。

由于自带有大量的第三方软件库，因此在使用Semantic UI时，您不必调用其他的库，便可以让Web开发的过程更加便捷。这也是许多初学者和经验丰富的开发人员喜欢它的原因所在。

8. Tailwind CSS
https://www.tailwindcss.cn/
在这里插入图片描述

Tailwind CSS与其他框架的不同之处在于，它的软件包并没有预建UI组件。该框架更关注于实用性。它包含有各种专注于颜色、大小和位置的CSS类。Tailwind适合于那些不满足于预设组件，但希望能够完全自由地定制Web设计的开发人员。

9. Picnic CSS
https://picnicss.com
在这里插入图片描述
该框架非常轻巧，其压缩后的代码不到10KB。同时，Picnic CSS还带有基于Flexbox的网格布局和许多UI元素。您可以使用它们来启动自己的Web开发项目。另外，Picnic的模式窗口和导航栏，也对初学者非常友好。

10. Ionic
https://ionicframework.com
在这里插入图片描述

该开源的移动UI框架，可以让用户在不更改代码库的情况下，开发出适用于Android和iOS原生的，以及具有网络高性能的应用。Ionic带有直观的UI组件，可协助用户加快网站或应用程序的开发过程。由于提供了卓越的原生功能和速度，Ionic可以与社区、主流分析平台、身份验证服务、插件以及其他集成平台，很好地配合使用。

11. Pure.css
https://purecss.io
在这里插入图片描述
美国雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目.该框架专注于移动优先的理念。由于Pure.css是模块化的，因此您可以轻松地按需导入元素包。同时，您还可以获取它的各种可供下载与安装的布局。以轻便闻名的Pure.css框架，在压缩后只有3.8KB。

12. mini.css
https://minicss.org
在这里插入图片描述

mini.css同样提供全面的功能和轻巧的框架。虽然它在压缩后只有10KB，但仍然可以提供丰富的布局和UI元素。如果您想对它的工作原理做进一步了解，那么请查阅它的联机文档。

13. Base
https://getbase.org
在这里插入图片描述
如果您的主要任务是为所有的应用程序和Web开发项目打下坚实的基础，那么您应该尝试一下此模块化的框架。作为号称“坚如磐石”的响应框架，Base基于Normalize.css提供了基本的可自定义样式。您可以按需用它来实现简单的应用。

14. Concise CSS
https://concisecss.com
在这里插入图片描述
Concise CSS也是一款简单且实用的框架。该框架结构紧凑、明快、且无需额外添加。当然，如果您需要UI元素的话，也可以通过单独的工具包来轻松地进行追加。

15. Mobi.css
http://getmobicss.com/
在这里插入图片描述
压缩后的Mobi.css仅为2.6KB，它是目前您可以找到的最小的框架之一。Mobi的优势在于速度，尤其是在针对移动设备的应用场景中。由于Mobi.css内置了主题和插件系统，而且可以按需扩展，因此用户可以采用模块化的方法，在其基础上进行构建。

4种Bootstrap在线设计工具

1. Layoutit

在这里插入图片描述

LayoutIt通过使用我们的拖放界面生成器帮助您简单快速地创建Bootstrap前端代码。它陈列出Bootstrap的每个元素和组件，你只需要用鼠标拖曳到页面上即完成设计，让您的前端编码更容易，不需要你是javascript，HTML5或CSS3的专家。所有的设计可以是响应式的CSS和流体。设计完成后，您只需下载HTML即获得自己设计的源码。

LayoutIt有四个主要菜单，Grid网格系统，这是布局Layout方面，是你首先必须选择的，是单栏或左右分栏等；在Components组件中选择导航条；文字工作是选择"BASE CSS"，当你熟悉该工具以后，编写一个现代Html页面如同在Word里编辑文档一样方便容易。

2.Bootstrap Magic

在这里插入图片描述
Bootstrap Magic主题生成器充分兼容Bootstrap3和AngularJS。您可以轻松快速地创建您自己的Twitter Bootstrap主题。这是可视化的，页面上陈列出所有Bootstrap的组件样式，你能够立即改变，也立即看到你改变的内容效果。您还可以从谷歌Webfont添加更棒的webfonts。他们都包含神奇的typehead字体。当你设计好自己的主题后，能够发布分享你的主题。