十大前端开发框架

最新推荐文章于 2022-06-29 16:36:39 发布

dingshi7798

最新推荐文章于 2022-06-29 16:36:39 发布

阅读量222

点赞数

文章标签：前端 ui javascript ViewUI

（编者注：纯粹出于篇幅和可读性的考虑，本文是两部分的第一部分。本文主要介绍Bootstrap系列，第二部分将介绍更多内容。）

随着Web的成熟以及用于访问它的移动设备的范围迅速增长，我们作为Web设计师和开发人员的工作变得越来越复杂。

十年前，事情变得简单得多。然后，几乎可以肯定的是，我们的大多数用户都坐在办公桌前，看着一台大型显示器，正在访问我们的网站。 960像素或多或少被认为是网页的合适宽度。我们的主要工作是处理大约十二种台式机浏览器，并跳过一些额外的浏览器黑客程序，以支持古怪的Internet Explorer旧版本。但是现在，随着过去五到六年中手持电子设备的繁荣，一切都发生了变化。我们已经看到了各种尺寸的智能手机和平板电脑，电子阅读器，电视上的浏览器以及许多其他产品的介绍。多样性每天只会增加。

很快，与台式计算机相比，将有更多的人在移动和备用设备上访问Web。实际上，已经有大量的人使用手机作为唯一的Internet访问方式。这意味着对于我们的设计师和开发人员来说，重要的是要了解如何应对整个移动世界。而且，尽管在撰写本文时，我们还没有完全弄清楚如何使我们习惯于在办公桌上看到的所有内容在手持设备上提供同样令人愉悦的体验，但使该设备变得更好的技术和工具。

当我们处理未知视口大小时，我们使用的主要策略之一就是所谓的响应式Web设计。这是一种根据浏览器窗口的大小为设备提供自定义布局的机制。默认情况下，智能手机和平板电脑等小型设备上的大多数浏览器会缩小网页以适合屏幕大小，并提供缩放和在页面中移动的方法。尽管从技术上讲它是可行的，但这并不是一个很好的经验。文本太小而无法阅读，链接太小而无法点击，所有缩放和平移都或多或少地分散了注意力。

响应式Web设计的技术是通过基于屏幕大小应用不同的样式表，为所有设备提供单个HTML文档，以便为该设备提供最优化的布局。例如，当在大型桌面浏览器上查看页面时，可以将内容放入带有常规导航元素的多列中。但是，当在小型智能手机屏幕上查看同一页面时，该页面将显示在带有大链接的一列中，以便轻松点击。您可以在Media Queries画廊网站上看到响应式网页设计的工作原理。只需在浏览器中打开一个设计，然后将窗口调整得非常狭窄和非常宽，然后观察布局会根据窗口大小而变化。

到目前为止，我们已经看到，至少到目前为止，响应式网页设计是与不断增长的设备多样性作斗争的充分解决方案，但是在我们的设计中实现它的实际工具和技术是什么？我们需要成为网络专家来处理它，还是仅仅已经具备的基本技能就足够了？有什么工具可以帮助我们吗？

这是前端开发框架起作用的地方。响应式Web设计并不是很难实现，但是要使其在所有目标设备上都能正常工作可能会有些棘手。框架使这项工作变得容易。它们使您可以轻松创建响应快速，符合标准的网站，同时保持所有内容的简单和一致。框架为您带来了许多好处，例如速度和简便性，不同设备之间的一致性等等。最重要的优点之一是它们是如此易于使用，以至于即使是知识最少的人也可以毫无问题地使用它们。

简而言之，如果您对当今的Web开发很认真，那么必须使用框架，而不是选择。如今，您的网站必须非常灵活，才能满足不同的浏览器，平板电脑，智能手机和其他一系列手持设备的需求。

前端Web开发框架只是可以在设计中使用的可生产的HTML / CSS / JavaScript组件的集合。那里有很多框架，但其中一些与众不同。为了方便您，下面将概述一些当今最强大，最受欢迎的框架。请记住，这些不仅是CSS网格，还是功能齐全的前端开发框架。

1.引导程序

Bootstrap绝对是当今最受欢迎和广泛使用的框架。这是一个漂亮，直观且功能强大的Web设计工具包，用于创建跨浏览器，一致且美观的界面。它提供了许多流行的UI组件，这些组件具有明显的优雅风格，网格系统和适用于常见场景的JavaScript插件。

它使用LESS构建，包括四个主要部分：

脚手架–全局样式，响应式12列网格和布局。请记住，默认情况下，Bootstrap不包含响应功能。如果您的设计需要响应，则必须手动启用此功能。
基本CSS –包括基本的HTML元素，例如表格，表单，按钮和图像，并通过可扩展的类进行样式化和增强。
组件–可重用组件的集合，例如下拉菜单，按钮组，导航控件（选项卡，药丸，列表，面包屑，分页），缩略图，进度条，媒体对象等。
JavaScript –使上述组件栩栩如生的jQuery插件，以及过渡，模态，工具提示，弹出窗口，scrollspy（用于基于滚动位置自动更新导航目标），轮播，预输入（快速且功能齐全的自动完成库），词缀导航等等。

Bootstrap已经足够强大，可以支持任何Web界面。但是，为了更多地利用它并使开发过程更容易，您可以找到许多补充它的工具和资源。下面列出了其中一些：

jQuery UI Bootstrap – jQuery和Bootstrap爱好者的绝佳资源，结合了两者的强大功能。它很好地将Bootstrap的外观带到了jQuery UI小部件。
jQuery Mobile Bootstrap主题 –与上面的jQuery UI主题相似，这是为jQuery Mobile构建的主题。如果您具有使用Bootstrap构建的Web前端并希望为移动设备提供类似的外观，则这是一个方便的资源。
Fuel UX –通过其他轻量级JavaScript控件扩展了Bootstrap。它易于安装，自定义，更新和优化。
StyleBootstrap.info – Bootstrap有自己的自定义程序，但StyleBootstrap是一个更详细的自定义程序，具有颜色选择器和能够对每个组件进行不同样式设置的功能
BootSwatchr –一个Bootstrap主题滚轮，显示更改的即时结果。对于每种生成的样式，应用程序都会生成一个唯一的URL，以防您想与他人共享或稍后返回并进行编辑。
Bootswatch –一套不错的Bootstrap免费主题。
Bootsnipp –大量的Bootstrap设计元素和HTML代码段。它还提供了表单和按钮构建器。
LayoutIt –基于Bootstrap的元素和组件的拖放界面构建器。通过拖放将不同的元素放置并布置到布局中，它可以帮助您直观地设计，然后允许您编辑其属性。您获得了基本代码，然后将其展开。简单容易。