为设计师不知道如何编写代码或不喜欢编写代码使用可视化编辑器可以非常有吸引力。可视化编辑器允许您将组件拖放到画布,你(立即)看到活的预览您的web页面。大多数人知道如何代码怀疑可视化编辑器,因为它们通常不会导致干净的HTML。
看哪个是最好的引导可视化编辑器我将简要讨论他们的特性。我也做了一些简单的测试,看看他们在实践中执行和输出的质量是什么样子。在本帖中,你将看到一个总结表的特点最有趣的编辑器。
LAYOUTIT
LAYOUTIT特性
Layoutit有容易理解的图形界面。从左边的面板选择并拖动元素右边的画布。画布上清楚显示元素,如容器,行和列。除了引导基础CSS和JavaScript组件大约一半的引导程序可以使用插件。元素的分组在左边的面板几乎一样引导网站便于选择。
Layoutit没有代码编辑器。界面并显示一个开发者按钮,但仍然只显示了一个视觉预览和没有代码。
Layoutit你限于拖放元素。你不能改变组件。不过你可以选择几个选项,一些组件(如导航的位置)。
目前没有CSS样式或选择适用Layoutit附带一个主题。
LAYOUTIT在实践中
乍一看新元素添加到画布看起来容易。但一旦你试图改变现有的布局或尝试其他元素之间插入一个新元素很难得到正确的布局。
我还发现组件并不总是正确(例如得到3缩略图或2媒体对象一旦当你试图插入一个)。既然你不能正确Layoutit编辑器中的代码,您需要下载代码,然后纠正它在另一个编辑器。
BOOTPLY
bootp特性
bootp可视化编辑器可用之后注册一个免费帐户。可视化编辑器你选择基础CSS元素和组件从一个丝带在顶部(基础CSS左边右边和组件)。当你悬停在画布上你可以看到以前的轮廓插入行和列。然后您可以单击行/列之前让看到它的轮廓里面拖拽一个新元素。
在可视化视图中您可以拖放模式或预览模式之间切换。虽然你´d希望能够检查你的反应设计与可视化编辑器你实际上需要切换代码视图,然后点击相应的图标预览在另一个决议。
bootp不仅为你提供了一个可视化编辑器,而且代码编辑器。你点击一个按钮在顶部之间切换视觉——代码编辑器。元素的分组在代码编辑器不同于可视化编辑器(从引导网站本身),使其成为一个更艰难的选择。除了引导元素还可以插入图标、图像占位符,添加引导类和引导2代码转换为引导3 bootp的代码编辑器。
bootp的特色是,它包含了大量的片段(也称为“厚度”)和评估其他bootp用户创建的。您还可以编写和运行自己的CSS规则集和javascript(年代)。你的作品会自动添加到公开的厚度。bootp的设置还允许您使用不同版本的引导或jQuery,甚至与其他包括AngularJS的像jQuery UI。
目前只有3个主题,您可以应用到你的厚度。
DIVSHOT
DIVSHOT特性
Divshot有一个非常专业的图形界面。可视化编辑器你可以插入组件从右边面板。点击面板组件的名称将(在适当的时候)揭示子组件,可以选择。
Divshot包含所有的引导3组件而不是JavaScript插件。
拖拽一个网格行到容器中,你会看到一系列预设出现在右边的上面板(如:一列宽屏,2列与侧栏)。点击列在右边的帆布和顶部面板将显示您所有的网格可以指定类(xs,sm、md、lg、补偿等)。
你可以选择哪个元素的工作通过选择一个从顶部的面包屑。你可以设置组件的属性检查器面板。单击画布和检查员面板中的元素(右上图)将向您展示它的属性和他们的选择。
Divshot包含一个代码编辑器。您可以使用代码编辑器相关的HTML,CSS和javascript文件。在左边的导航面板您可以创建新文件或上传现有的文件和文件夹。
Divshot入门之旅已经了解它的特性和用户手册。旅游会让你通过的所有步骤和监控每一步是否正确执行。
与Divshot您可以选择一个Bootswatch主题从左边的面板和看到一个预览的主题或决定激活它。
PINGENDO
PINGENDO特性
Pingende是一个可安装的应用程序。免费下载安装后你可以选择从起动器模板开始。你可以拖拽引导3组件从顶部的酒吧。没有一个JavaScript插件提供。Pingendo还包含一个代码编辑器。
Pingendo还提供了Bootswatch主题风格页面(s)。
专门针对Pingendo(除了可安装)是dom树面板中,您可以使用它们来指定您想要插入一个新的组件。
PINGENDO在实践中
插入元素的容器,行和列的Pingendo帆布主要是非常简单的。你清楚地看到父元素和元素本身的轮廓后已经下降。不幸的是,列元素是不正确的。当然你可以纠正这种代码编辑器。但是因为大多数的布局需要你添加一些列元素这个错误可以很快成为公害。
代码编辑器也并不容易。它不显示块元素的视觉层次。
JETSTRAP
JETSTRAP特性
Jetstrap可视化编辑器包含基础CSS和引导组件。这些可以选择从左边的面板。这个面板不幸的是并不是组织在分组或其他逻辑结构使它有点难以选择一个元素(如行元素顶部和底部的容器元素面板)。引导Jetstrap JavaScript插件不可用。
当你点击一个元素在画布上右边的面板显示了它的属性。网格行这也允许您选择一个网格(类)或创建一个自定义。
切换到预览或选择另一个屏幕分辨率是用按钮在顶部。
除了visual editor Jetstrap还包含一个代码编辑器,可用于编辑HTML、CSS和JavaScript。
JETSTRAP在实践中
在实践中我发现可视化编辑器有点困难。正确地插入一个新行了更多在它内部的大屏幕或在容器之外。
Jetstrap是唯一的可视化编辑器不提供免费的计划。因为评估是基于演示和提供的信息在网站上我不能说任何关于如何清理HTML结果。
还不包括一些引导组件和导航组件不包含任何链接。
PINEGROW
PINEGROW特性
Pinegrow不同于大多数其他可视化编辑器,它是一个应用程序安装在您的计算机上。
Pinegrow非常容易使用的图形界面。左边你会看到一个面板的引导和HTML元素。徘徊在一个元素,您将看到一个预览。在右边你看到一个面板与DOM树。拖拽一个元素从左边中间的画布。或继续拖到DOM树(更精确的定位)。
最新版本的Pinegrow包含所有的引导3组件和JavaScript插件。
<br style=”color: rgb(67, 67, 67); font-family: Tahoma, Arial, 宋体, ‘Malgun Gothic’; font-size: 12px; line-height: 24px; text-align: justify; white-space: norm
