2020-12-25 11:26:39
H5的基本框架是什么?h5制作需要了解哪些框架呢?下面就和小编一起来看看吧!
1.bootstrap绝对是目前最流行、使用最广泛的框架。它是一个美观、直观、功能强大的网页设计工具包,可以用来开发跨浏览器兼容、美观的网页。关于免费建站,它提供了很多流行的UI组件,样式简单,网格系统和一些常用的JavaScript插件。Bootstrap用动态语言LESS编写,主要包括四个部分:脚手架-全局风格,响应性12列网格布局系统。请记住,默认情况下,引导不包括响应布局功能。因此,如果您的设计需要实现响应布局,您需要手动打开此功能。基本的CSS-包括基本的HTML页面元素,如表格、表单、按钮和图像。基本CSS为这些元素提供了优雅且一致的样式。组件——收集了大量可重用的组件,比如下拉、按钮组、分页控件——包括标签、球、列表标签、面包屑、页码、缩略图、进度条等。JavaScript-包含一系列jQuery插件,可以实现组件的动态页面效果。插件主要包括modals窗口、tips、popovers、scrollspy、carousel、typeahead等。Bootstrap足够强大,可以实现各种形式的Web界面。许多工具和资源可以一起使用,以便更方便地与Bootstrap一起开发。这里有一些。JQueryUIBootstrap-这是一个非常好的JQuery和Bootstrap爱好者的资源,可以把Bootstrap的刷新接口组件引入JQueryUI。jquerymobilebiotstraptheme——类似于上面提到的jQueryUI主题,这是为jQueryMobile建立的一个主题。如果你希望用Bootstrap开发的网站可以在手机上优雅地访问,那么这个资源对你来说非常方便易用。fuelux——它给Bootstrap添加了一些轻量级的JavaScript控件。FuelUI易于安装、修改、更新和优化。StyleBootstrap。info-Bootstrap提供了几种接口样式,StyleBootstrap提供了新的颜色匹配选项,您可以对每个组件应用不同的颜色匹配。bootswatchr-有了这个工具,你可以立刻看到修改后的主题的效果。对于每一个改变的效果,这个应用都会生成一个唯一的URL给你和别人分享,你可以随时修改你的主题。bootsatch-提供大量免费的引导主题。BootstrapHTML/CSS/JavaScript架构的免费元素,是一款在线前端框架交互组件制作工具,面向设计人员和开发人员。layoutit-通过界面拖放生成器,简单快速地创建基于Bootstrap的前端代码。通过拖放将Bootstrap样式组件添加到您的个人设计中既简单又方便。
2.fboottrappfBootstrapp基于bootstrap,提供与Facebookiframeapps和design相同的功能。包含所有标准组件的基本CSS和HTML,包括排版、表单、按钮、表格、网格、导航等。风格类似于Facebook。
3.BootMetroBootMetro框架的灵感来源于MetroUICSS,MetroUICSS基于Bootstrap框架,用于创建Windows8的Metro风格网站。它包含了所有Bootstrap功能,并增加了几个附加功能,如页面平铺、应用栏等。
4.KicktrapKicktrap是Bootstrap的变体。它以Bootstrap为基础,增加了很多应用、主题和附加功能。这使得该框架可以单独用于构建网站,而无需任何额外的安装。关于网站模板,你只需要把它放在你的网站上,然后使用它。App是页面加载后加载运行的JavaScript和CSS打包文件。默认加载的应用有knowledge.js、retina.js、firebuglite、updater,可以添加自己的应用。选择不同的主题可以让你的网站像Bootstrap一样脱颖而出。附加函数是用来扩展BootstrapUI库的附件,语法基本相同或相似。
5.FoundationFoundation是一个功能强大的前端开发框架,支持响应性布局。您可以通过Foundation快速创建原型,并使用其中包含的大量布局框架、元素和最佳范例,快速创建可以在各种设备上正常运行的网站和应用程序。基金会成立时,坚持移动第一战略。它有很多实用的语义功能,用Zepto类库代替jQuery,可以带来更好的用户体验,提高运行速度。Foundation有一个灵活可嵌套的12列网格系统,可以用来快速创建适合各种浏览设备的布局。它有很多功能。它定义了许多样式,如字体布局、按钮、表单和各种导航控件。它还提供了许多CSS组件,如操作面板、价格表、进度条、表格和灵活的视频,可以适应不同的设备。与此同时,基金会还包括许多JavaScript插件,如下拉菜单、joyride、麦哲伦、轨道、显示、部分和工具提示。基础框架还提供了许多有用的扩展。模板——基础框架中的所有UI元素都下载在Omnigrafflestencils和vectorPDF中,可以方便快捷的绘制线框和原型图。HTML模板——HTML模板可以用来快速创建页面布局。您所要做的就是复制模板代码,并将其放在页面的标签之间。图标字体-包含自定义图标的网页字体。SVG社交图标——一组不依赖分辨率的社交图标(可伸缩矢量图标)。响应式表——Foundation框架中响应式表的实现机制是将第一列固定在表的左侧,然后拖动滚动条就可以访问表的其他列。off-CanvasLayouts)———这些布局可以允许在移动设备上默认隐藏一些网页内容或导航控件,当浏览屏幕变大或用户执行相应操作时,这些内容会重新出现。当用户执行相关操作时,网页内容或导航控件会滑动。如你所见,对于网页开发人员和设计师来说,基础就像一个巨大的宝藏。下载框架时,可以自定义下载框架的内容。
6.GroundworkCSSGroundworkCSS是前端框架系列中的一款新的小清新框架。它是一个基于Sass和Compass的高级响应HTML5、CSS和JavaScript工具包,可以用来快速创建原型,构建可以在各种浏览设备上正常工作的网站和应用。地面工作中心有一个灵活的可嵌套的流式网格系统,方便您创建任何布局。这个框架有很多令人印象深刻的功能,比如平板电脑和移动终端上的网格系统。当屏幕宽度小于768或480像素时,原本并排放置在页面中的网格列将自动成为独立的行,而不是折叠在一起。另一个很酷的特性是jQuery的ResponsiveText插件,它可以动态调整页面文本大小,以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题和创建响应表特别有用。基础工作包含大量的用户界面组件,如选项卡、响应数据表导航、按钮、表单、响应导航控件、切片(一组替换单选按钮和其他默认表单元素的优雅组件)、工具提示、对话框、Cycle2(一个强大且响应迅速的内容滑块)和许多其他有用的组件。它还提供了许多矢量社交网络图标和图标字体。您可以通过切换页面顶部的导航按钮来选择不同的浏览设备,以查看此框架的效果。这样,您可以在不同的浏览设备上测试各种组件的响应布局。《基础工作》文件写得很好,包含了许多例子。为了让您快速入门,它还提供了各种响应模板。对于这个框架,我能想到的唯一缺点就是不能自定义要下载的框架内容。
7.gumbyumby是一个简单、灵活、稳定的基于Sass和Compass的前端开发框架。它的流体固定布局可以根据桌面和移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括混合列的嵌套模式。Gumby为了方便,提供了两套PSD模板。