ITPub博客

首页 > 应用开发 > IT综合 > 好程序员web前端干货之web前端开发框架汇总

好程序员web前端干货之web前端开发框架汇总

原创 IT综合 作者:好程序员IT 时间:2019-05-20 15:21:18 0 删除 编辑

  好程序员 web 前端干货之 web 前端开发框架汇总,其实 一个前端开发框架其实就是一系列产品化的 HTML/CSS/JavaScript 组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写得很棒。为了 大家 看的更明白 ,下文列举了目前应用最广泛的几款前端开发框架。记住,这些框架并不仅仅是 CSS 栅格之类的一些东西,它们包括的是整套的前端开发框架。

   一、 Bootstrap

   Boostrap 绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的 Web 设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的 UI 组件,栅格系统以及一些常用的 JavaScript 插件。

   Bootstrap 是用动态语言 LESS 写的,主要包括四部分的内容:

   脚手架 ——全局样式,响应式的 12 列栅格布局系统。记住 Bootstrap 在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。

   基础 CSS ——包括基础的 HTML 页面要素,比如表格 (table) ,表单 (form) ,按钮 (button) ,以及图片 (image) ,基础 CSS 为这些要素提供了优雅,一致的多种样式。

   组件 ——收集了大量可以重用的组件,如下拉菜单 (dropdowns) ,按钮组 (button groups) ,导航面板 (navigation control) ——包括: tabs,pills,lists 标签,面包屑导航 (breadcrumbs) 以及页码 (pagination) ,缩略图 (thumbnails) ,进度条 (progress bars) ,媒体对象 (media objects) 等等。

   JavaScript ——包括一系列 jQuery 的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口 (modals) ,提示效果 (tool tips) ,“泡芙”效果 (popovers) ,滚动监控 (scrollspy) ,旋转木马 (carousel) ,输入提示 (typeahead) ,等等。

   Bootstrap 已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用 Bootstrap 进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。

   jQuery UI Bootstrap —— 对于 jQuery Bootstrap 爱好者来说这是个非常好的资源,能够把 Bootstrap 的清爽界面组件引入到 jQuery UI 中。

   jQuery Mobile Bootstrap Theme —— 和上面提到的 jQuery UI 主题类似,这是一个为 jQuery Mobile 建立的主题。如果你想让用 Bootstrap 开发的网站在手机端也可以优雅访问,那么这个资源对你来说很方便易用。

   Fuel UX —— 它为 Bootstrap 添加了一些轻量的 JavaScript 控件。 Fuel UI 安装,修改,更新以及优化都很简单方便。

   StyleBootstrap.info —— Bootstrap 提供了自己的几种界面风格, StyleBootstrap 提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。

   BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的 URL 方便你与他人分享,你也可以在任意时刻修改你的主题。

   Bootswatch —— 提供大量免费的 Bootstrap 主题。

   Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于 Bootstrap HTML/CSS/JavaScript 架构的免费元素。

   LayoutIt —— 通过界面拖放生成器简便快捷地创建基于 Bootstrap 的前端代码。通过拖放动作将 Bootstrap 风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,简单便捷。

   二、 Fbootstrapp

   Fbootstrapp 基于 Bootstrap 并且提供了跟 Facebook iframe apps 和设计相同的功能。包含用于所有标准组件的基本的 CSS HTML ,包括排版、表单、按钮、表格、栅格、导航等等,风格与 Facebook 类似。

   三、 BootMetro

   BootMetro 框架的灵感来自于 Metro UI CSS ,基于 Bootstrap 框架构建,用于创建 Windows 8 Metro 风格的网站。它包括所有 Bootstrap 的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。

   四、 Kickstrap

   Kickstrap Bootstrap 的一个变体。它基于 Bootstrap ,并在它的基础上添加了许多 app ,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。

   App 是一些页面加载完成之后加载运行的 JavaScript CSS 打包文件。默认加载的 app Knockout.js, Retina.js, Firebug Lite, and Updater ,你也可以自行添加更多的 app

   选择不同的主题可以让你的网站在众多 Bootstrap 构建的类似网站中显得与众不同。

   附加功能是一些用来扩展 Bootstrap UI 库的附件,它们的语法基本相同或者相似。

   五、 Foundation

   Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过 Foundation 快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及 app Foundation 在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用 Zepto 类库来取代 jQuery ,这样可以带来更好的用户体验,并且提高运行的速度。

   Foundation 拥有一套 12 列的灵活可嵌套的网格系统,你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义了很多的样式,比如字体排版,按钮,表单,以及多种多样的导航控件。它也提供了很多的 CSS 组件,例如操作面板 (panels) ,价格表 (price tables) ,进度条 (progress bars) ,表格 (tables) 以及可以适应不同设备的可伸缩视频 (flex video) 。与此同时, Foundation 还包括了很多的 JavaScript 插件,如下拉菜单 (dropdowns) joyride( 网站功能引导插件 ) magellan( 网站固定导航插件 ) orbit( 支持触摸的响应式图片轮播插件 ) reveal( 弹出框插件 ) sections( 强大的 tab 插件 ) 以及 tooltips( 工具提示 ) 等。

   Foundation 框架还提供了很多有用的扩展。

   模板 (Stencils) —— Foundation 框架中的所有 UI 元素都有 Omnigraffle stencils 以及矢量 PDF 两种格式的下载,你可以用它们来方便快捷的绘制线框图和原型图。

   HTML 模板 —— HTML 模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码,然后丢到页面的标签之间就好了。

   图标字体 (Icon Fonts) —— 包含自定义图标的一种网页字体。

   SVG 社交网络图标 (Social Icons) —— 一组不依赖分辨率的社交网络图标 ( 可缩放矢量图标 )

   响应式表格 —— Foundation 框架中响应式表格的实现机制是固定表格的左边第一列,然后表格的其他列可以通过滚动条拖拉进行访问。

   关闭帆布布局 (Off-Canvas Layouts) —— 这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏,当浏览屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候,网页内容或者导航控件将会滑动出现。

   如你所见,对于 Web 开发者以及设计师来说, Foundation 就像是一个巨大的宝藏。在下载框架的时候,你可以自定义下载框架的内容。

   六、 GroundworkCSS

   GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于 Sass Compass 的一个高级响应式的 HTML5 CSS 以及 JavaScript 工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和 app

   GroundworkCSS 拥有一个灵活,可嵌套的流式网格系统,方便你创建任何布局。这个框架有很多让人印象深刻的功能,比如在平板以及移动端上的网格系统,当屏幕的宽度小于 768 或者 480 像素时,页面中原本并列排版的表格列 (grid column) 会自动变为独立的行,而不是折叠在一起。另一个很酷的功能是 jQuery 的响应式文本 (ResponsiveText) 插件,这个插件可以动态调整页面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。

   GroundworkCSS 包含了大量的 UI 组件,如 tabs 、响应式数据表格导航、按钮、表单、响应式导航控件、 tiles( 一套替代 radio 按钮以及其他默认表单元素的优雅组件 ) 、工具提示、对话框、 Cycle2( 一款强大的,响应式的内容滑块 ) 以及其他很多的有用组件。它还提供了很多矢量社交网络图标以及图标字体。

   你可以通过切换页面上方的导航按钮选择不同的浏览设备要来查看这款框架的效果。通过这种方式,你可以测试在不同的浏览设备上各种组件的响应式布局情况。

   GroundworkCSS 的文档写的非常好,并且包含着很多的示例,为了让你更快的上手,他还提供了多种响应式的模板。对于这款框架,唯一我可以想到的缺点就是不能自定义要下载的框架内容。

   七、 Gumby

   Gumby 是一款基于 Sass Compass 的简单灵活并且稳定的前端开发框架。

   它的流式 - 固定布局 (fluid-fixed layout) 可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。 Gumby 提供两套 PSD 的模板,方便你在 12 列和 16 列的网格系统上进行设计。

   Gumby 提供了一个功能丰富的 UI 工具包,包括按钮,表单,移动端导航, tabs ,跳转链接 (skip links) ,拨动开关 (toggles and switches ,可以方便快捷地切换元素的 class ,而不需要进行额外的 js 操作 ) ,抽屉功能 (drawers) ,响应式图片以及 retina 图片等等。为了紧跟最近的设计潮流, Gumby UI 元素中还包括了 Metro 风格的扁平化设计,你也可以用 Pretty 风格的渐变设计,或者按照你的想法糅合两种设计风格。该框架还提供了一套出众的响应式,拥有独立分辨率的 Entypo 图标,你可以在自己的 Web 项目中尽情使用。

   Gumby 有一个很好自定义下载选择器,你可以自行配置各个组件的颜色,并且按自己的需求方便地下载。

   八、 HTML KickStart

   HTML Kickstart 是一款可以用来方便创建任何布局的集合 HTML5 CSS jQuery 的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。

   这款框架提供了多种样式表,包括网格,排版,表单,按钮,表格,列表以及一些跨浏览器兼容的 Web 组件比如 JavaScript 的幻灯片功能, tabs ,面包屑导航,包含子菜单的菜单以及工具提示等等。

   你可以使用 99Lime UIKIT 提供的 UI 组件来搭建你的产品线框图。

   九、 IVORY

   IVORY 是一款轻量,简单但是强大的前端框架,可以用于 320 1200 像素宽度的响应式布局。它基于 12 列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。

   当你需要一款轻量灵活,不需要额外的其他功能,并且适应不同浏览设备的框架时, IVORY 是你最好的选择。

   十、 Kube

   最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。 Kube 是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些 Web 元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。

   Kube 框架包括一个简洁的 CSS 文件用于方便地创建响应式布局,还包括了两个 JS 文件来完成 tab 以及页面的按钮操作。如果你希望得到 Kube 最大化的灵活性以及个性化定制,那么你可以下载开发者版本 (developer version) ,这个版本包括了 LESS 文件 ( 包括各种变量, mixins 以及模块 )

   希望本篇文章能够对正在从事 Web 前端工作的小伙伴们有所帮助。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2644943/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-03-20

  • 博文量
    200
  • 访问量
    155038