这五个Web前端开发必不可少的开源框架，闭眼入

2023-02-19 17:34:01html-css028

这五个Web前端开发必不可少的开源框架，闭眼入,第1张

很多Web小白在学习、在选择适合自己的Web语言时，比较纠结。其实有很多流行的、强大的前端开源框架，帮助你轻松构建漂亮的网站前端。

1、Pure

Bootstrap，Patternfly和MDC Web是功能非常强大的CSS框架，但它们可能非常繁琐和复杂。如果你想要一个轻量级的CSS框架，可以尝试Pure.css，它本身更接近于CSS编程，但又可以帮助你构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架，它由Yahoo开发，根据BSD许可是开源的。

2、Foundation

Foundation声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司，组织都使用该框架，并且该框架具有大量可用的文档。

3、Skeleton

如果说还有什么框架比Pure更加轻量级，那一定是Skeleton。Skeleton库只有大约400行，并且该框架仅提供一些基本的CSS框架组件。尽管如此，Skeleton还是提供了详细的文档来帮助你快速上手。

4、Materialize

Materialize是一个基于Material Design风格的一个现代化的响应式前端框架，解决了最繁重的工作，结合你的自定义组件，为你提供默认的样式。Materialize的文档页面非常全面，并且很容易遵循。其组件页面包括按钮，卡片，导航等。

5、Bootstrap

Bootstrap无疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。使用Bootstrap，你可以将不同的组件和布局组合在一起，从而创建有趣的页面设计。它还提供了大量详细的文档。目前在Github上已经有1100多个贡献者，19000多个提交。

从默认网格入门

让我们先从一个基本的 HTML 开始，看看如何在上面应用默认网格。

<!DOCTYPE html>

<html>

<head>

<title>Fixed layout example with Bootstrap</title>

</head>

<body>

</body>

</html>

Bootstrap 使用 CSS 的 class "row" 来创建水平行，使用 CSS 的 class "spanx"（x 的值从 1 到 12）来创建垂直列。通过这两个就可以创建一个三列的网格（每一列包含一些文本内容），HTML 如下所示

<!DOCTYPE html>

<html>

<head>

<title>Fixed layout example with Bootstrap</title>

</head>

<body>

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>

</div>

</body>

</html>

下面是网格系统的图形表示

这样，我们就通过对每个列使用 "span4" class，创建好了一个三列网格。"container" class 是用来保存整个结构的。您可以在这里查看在线实例。从这一点，我们可以推导出用于创建给定数量列的 CSS class 的一般语法。

创建网格的一般语法：

inline elements like span, block level elements like p, div.

</div>

repeat <div class="spanx">y times.

其中 y 是您想要创建的列数以及 x 等于 12（这是您可以创建的最大的列数）的总和。x 必须是正整数，且值必须从 1 到 12。

例如，如果您有三个等宽的列，每个列都是 class="span4"，但是如果您想让第一个列比其他两个更大一些，第一个列可以使用 class="span6"，其他两个列使用 class="span3"。

如何在固定网格中创建行

接下来，在我们继续其他实例之前，先来看看在固定网格中用来创建行和列的 CSS 规则。

row class 如下所示

.row {

margin-left: -20px

*zoom: 1

}

设置左边距为负的 20px，且设置 "*zoom: 1"。这里的 "*" 表示所有元素的 zoom 属性都设置为 1，用来修复 IE6/7 的 bug。设置 zoom 属性为 1，即设置了一个名为 hasLayout 的内部属性，用于修复 IE6/7 的许多缩放/渲染问题。

.row:before,

.row:after {

display: table

line-height: 0

content: ""

}

Bootstrap 使用前面的 CSS 代码来创建行。它使用 ":before" 和 ":after" 的 CSS 属性。这两个是伪元素。":before" 用于在目标元素之前插入一些内容，":after" 用于在目标元素之后插入一些内容。"display:table" 使得元素以表格形式呈现。通过设置 "line-height: 0" 来确保每个行没有自己的行高，通过使用 'content: ""' 来确保元素前后没有内容被插入。

今天小编要跟大家分享的文章是关于Web前端开发必备的开源框架有哪些。大多数人想到Web开发时，通常会想到HTML或JavaScript，往往忽略了CSS，根据Wikipedia的说法，CSS既是网页中最重要也是最常被遗忘的部分之一，尽管它是万维网的三大基础技术之一。

今天就和大家分享9个流行的、强大的前端开源框架，帮助你轻松构建漂亮的网站前端。下面来和小编一起看一看吧!

1、Bootstrap

Bootstrap无疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。

使用Bootstrap，你可以将不同的组件和布局组合在一起，从而创建有趣的页面设计。它还提供了大量详细的文档。目前在Github上已经有1100多个贡献者，19000多个提交。(Github地址：https://github.com/twbs/bootstrap)

2、PatternFly

PatternFly是Red

Hat的开源CSS框架，和Bootstrap不同的是，Bootstrap是为那些想要创建漂亮网站的人而设计的，而PatternFly主要专注于企业应用程序开发人员，提供诸如条形图、图表、导航之类的组件，实际上Red

Hat就是使用它创建了OpenShift。

除了静态HTML，PatternFly还支持ReactJS框架，这是Facebook开发的流行JavaScript框架。PatternFly具有许多适用于企业级应用程序的高级组件，如条形图，图表，模式和布局。

PatternFly在GitHub上一共有1,050多个提交和44个贡献者。(Github地址：https://github.com/patternfly/patternfly)

3、MaterialComponentsfortheweb

MaterialComponentsfortheweb(MDCWeb)，是谷歌专为Web设计的全新前端框架。MDC

Web可帮助开发人员执行Material

Design，组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立可靠的开发工作流程，以构建美观且功能强大的Web项目。

MDC

Web在Github上共有5700多个提交和349个贡献者。(Github地址：https://github.com/material-components/material-components-web)

4、Pure

Bootstrap，Patternfly和MDC

Web是功能非常强大的CSS框架，但它们可能非常繁琐和复杂。如果你想要一个轻量级的CSS框架，可以尝试Pure.css，它本身更接近于CSS编程，但又可以帮助你构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架，它由Yahoo开发，根据BSD许可是开源的。

Pure在Github上共有565多个提交和59个贡献者。(Github地址：https://github.com/pure-css/pure)

5、Foundation

Foundation在Github上有将近17000个提交和1000个贡献者。(Github地址：https://github.com/foundation/foundation-sites)

6、Bulma

Bulma是一个基于Flexbox的开源框架，可根据MIT许可证开源。Bulma是一个非常轻量级的框架，因为它只需要一个CSS文件。Bulma拥有简洁明了的文档，可轻松选择你想要的主题。它还具有许多Web组件，你可以在设计中使用它们。

Bulma在Github上有1400多个提交和300个贡献者。(Github地址：https://github.com/jgthms/bulma)

7、Skeleton

Skeleton在Github上共有167个提交和22个贡献者，但它不是最活跃的项目，它最新一次的更新是在2014年。(Github地址：https://github.com/dhg/Skeleton)

8、Materialize

Materialize是一个基于Material

Design风格的一个现代化的响应式前端框架，解决了最繁重的工作，结合你的自定义组件，为你提供默认的样式。Materialize的文档页面非常全面，并且很容易遵循。其组件页面包括按钮，卡片，导航等。

Materialize在Github上共有3800多个提交和250个贡献者。(Github地址：https://github.com/Dogfalo/materialize)

9、Bootflat

Bootflat是从Twitter的Bootstrap派生的开源CSS框架。与Bootstrap相比，Bootflat更简单，并且更加轻量级。Bootflat的文档似乎几乎受到了IKEA的启发，大部分都是图像，没有太多的文字。

Bootflat是在MIT许可证下开源的，在Github上有159个提交和8个贡献者。(Github地址：https://github.com/bootflat/bootflat.github.io)

以上就是小编今天为大家分享的关于Web前端开发必备的开源框架有哪些的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！

开源最前线(ID：OpenSourceTop)猿妹编译

链接：#/article/20/4/open-source-css-frameworks

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：win7旗舰版怎么关闭135和445端口？

# 下一篇：css怎么做斜线

推荐阅读

热门文章

最新发布

标签列表

这五个Web前端开发必不可少的开源框架，闭眼入

给您推荐相同类型的内容：