搜 索

一些比较实用的网页ui框架以及可视化编辑器

编辑:QTOOL.NET日期:2021-03-08322

以前在制作pc网页或移动端页面时,往往要自己要写大量的html代码,加上一些css样式,调来调去来布局整个页面,比较繁琐。

于是之后模块化的前端UI框架应运而生,它们的出现极大的减少了前端界面开发的时间,降低了网页设计制作的门槛。

如比较出名的:Twitter的Bootstrap

Bootstrap在现在各种流行的ui框架中可谓是首屈一指,它来自于Twitter.

Semantic UI

Semantic UI时一款语义化的ui前端框架,语义化的方式时的代码更加的可读与理解

Yahoo的Yahoo Pure

它的特点时以纯css代码编写,无需任何JavaScript代码

UIkit

UIkit基于LESS开发,体积小易于维护,模块化,便于维护.

Mint UI

Mint UI是饿了么推出的一款 移动端的ui组件库.

layui

layui是一款门槛比较低的前端框架,风格极简,内容丰富,非常适合快速开发页面


使用这些ui框架进行布局,虽然已经足够便捷了,但还是无法实时预览,dreamweaver可以实现页面布局可视化,但要安装以及下载,也需要一定的基础,于是更为方便的各种在线可视化ui设计器出现了。

以下分享了一些比较方便的Bootstrap可视化设计器即UI编辑器,它们的作用可以让网页布局更加的便捷简单,允许开发者们自由diy的快速设计框架界面。

1、layoutit

Bootstrap ui可视化编辑器,能够通过鼠标简单的拖拽实现快速布局网站页面。


2、BootSwatchr

BootSwatchr,支持从右到左语言显示Bootstrap自定义样式的构建,它可以从代码的底层创建Bootstrap的主题,是Drew Strickiand开发的。


3、Bootstrap Live Editor

Live Editor提供优雅的方法来编辑与美化html页面,包括了各种高级的选项配置、自定义义标签。

 

4、Bootstrap Magic

它使用了最新的Bootstrap版本与AngularJS组合提供一个可灵活修改预览的编辑器。包括了各式各样的导入、颜色选择器与预输入。

 

5、Style Bootstrap

Style Bootstrap是一个内置在浏览器的GUI工具,可以自定义Twitter Bootstrap 外观。能够根据用户的选择自定义风格\字体排版、按钮、导航、格式等等。除了非常简便的自定义操作,它还可以快速生成可下载的CSS文件.


6、Fancy Boot

它允许用户快速编辑Bootstrap的配置,实时预览修改。


7、Bootstrap ThemeRoller

它提供了一个可视化的界面,让用户可以按照自己的风格创建新的Bootstrap主题。它可以将创建的每种风格生成唯一的URL ,这样就可以保存设置,当用户离开的时候,可以停止或者恢复自己定制设计的页面。


8、Pingendo

Pingendo 提供了大量的现成美观时尚的布局,使用它们后可以拖拽元素的位置,调整大小和自定义的功能。可以自行优化设计页面,插入新的内容。


9、Bootply

 Bootply是一个比较实用的是可拖拽的可视化编辑器,它让用户编辑Bootstrap的CSS与HTML更加友好 。


10 Jetstrap

Jetstrap是一个实体模型工具,它可以不需要下载任何类型的软件,只需要登录,然后创建自己的项目,就能够随时访问了。用户可以很容易的通过Jetstrap生成时尚运行流畅的网站。


使用这些编辑器可以自由的在页面上构建的列表、段落、表单、表格、按钮,无需手动再编写大量的html与css代码,直接在设计器中托托拽拽即可,自动的得到自己设计页面的样式代码。

TAG标签:网页布局
此文章由QTOOL.NET编辑
最新文章

热门标签