草庐IT

Bootstrap UI 编辑器

runoob 2023-04-05 原文

Bootstrap UI 编辑器

以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具。

1. Bootstrap Magic

这是一个 Bootstrap 主题生成器,使用最新的 Bootstrap 3 版本和 Angular JS 版本,提供一个鲜活的用户修改预览。它包括了各种各样的导入,一个颜色选择器和智能的预先输入。更神奇的是,Bootstrap 会根据用户的每个选择来重新建立框架,方便用户的下载和使用。

2. BootSwatchr

BootSwatchr 是由 Drew Strickiand 独立开发和维护的,是唯一支持从右到左语言显示的 Bootstrap 自定义构建工具,这也是它的特色之一。BootSwatchr 是个可视化的工具,可以从底层开始创建 Bootstrap 主题。

3. Bootstrap Live Editor

Bootstrap Live Editor 是个所见即所得的构建 Bootstrap 的编辑器。在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html,也因此它是个明智的选择。除此之外,它还包括高级的选项比如按钮配置,自定义标签和为用户做最明智最有益的选择。

4. Fancy Boot

Fancyboot 是个非常有用的 Bootstrap 自定义工具,允许用户编辑 Bootstrap 的配置,自动预览他们的修改结果。通过滑动菜单可以选择需要使用的插件和组件。当用户做好了相应的修改,可以下载一个包含用户所使用的 jQuery 插件的编译好的和简化后的 CSS 文件。

5. Style Bootstrap

Style Bootstrap 是个非常棒的内置浏览器的 GUI 实用工具,帮助用户自定义 Twitter Bootstrap 外观。它非常容易进行自定义操作。从 body 风格,字体排版,按钮,导航,格式,通知提示和其他用户很容易根据自己的意愿自定义的元素。除了强大的自定义功能,它还可以很容易生成可下载的 CSS 文件

6. Lavish

Lavish 是个帮助用户从一个图像中定制自己喜欢的 Bootstrap 配色方案。用户可以从图像中选择各种颜色用在 body 背景,链接,头部,菜单,标签,文本,下拉菜单等等元素上。一旦你确定了 Bootstrap 配色方案,就可以很方便的下载相应的 Boostrap.css 文件。

7. Bootstrap ThemeRoller

Bootstrap ThemeRoller 是个直观的 web 应用程序, 提供一个可视化的界面让用户按照自己的风格创建属于自己的 Bootstrap 主题。有了这个工具,用户可以自定义颜色,大小,字体,格式,表,按钮,警告信息,导航条,菜单等等元素。

这个应用还会帮用户创建的每种风格都生成唯一的一个 URL ,这样就可以保存用户所有的设置。更不可思议的是,当用户离开的时候,用户可以停止或者恢复自己定制的页面。

8. LayoutIt!

LayoutIt!拥有拖拽接口的功能,能简单迅速的构建一个 Bootstrap 前端代码。LayoutIt! 兼容任何的编程语言,允许用户下载 HTML ,在这里自由的进行编码设计。

 9. Pingendo

Pingendo 是个可视化的桌面应用程序,允许用户给予流行的 Twitter Bootstrap 框架创建响应式 web 页面原型。Pingendo 还提供大量的现成的布局,拖拽元素的位置,调整大小和自定义的功能。用户可以自行优化他们的页面,插入他们自己的内容。

10. Kickstrap

Kickstrap 是个 Bootstrap UI 编辑器,使用 Firebase 作为一个后台服务。它无缝的接合了 Bootstrap 和顶级的 web 技术。更厉害的是,它可以运行一个已验证的,不需要本地后台支持,数据库驱动的 web 应用。

11. Bootply

Bootply 是一款很棒的 Bootstrap UI 编辑工具,尽可能简单的让用户编辑 Bootstrap 友好的 CSS ,HTML 和 Javascript 。同时也是一个可拖拽的可视化编辑器,用来设计,创建原型和测试 Bootstrap 框架。Bootply 有个代码存储库,里面包括了 Bootstrap 代码片段,示例和模板。除了以上这些,更吸引人的是它有个非常活跃的 Bootply 社区,用户可以很方便的发现,分享和展示相关的代码和片段。

12. X-editable

X-Editable 是一个扩展库,允许用户创建可编辑的元素,比如页面弹出和内联模式。她提供本地的 Bootstrap,jQuery UI 或者是纯 jQuery 编辑功能。此 Bootstrap UI 编辑器拥有许多很强大的功能,包括客户端,服务端验证,支持键盘,live 事件,可定制的容器空间等等。总而言之,它提供非常快速的开发功能,易于删除字段,一个用来更新数据的简简单后台脚本。

13. Jetstrap

不要错误的以为 Jetstrap 只是个简单的实体模型工具,它是 100% 基于 web 接口的 Twitter Bootstrap 构建工具。用户不需要下载任何类型的软件就可以使用 Jetstrap。用户只需要登录,然后构建自己的项目,就可以随时随地进行访问了。构建功能主要是提供给开发者和设计者的,用户很容易就可以通过 Jetstrap 生成漂亮的网站,而且运行速度非常快

14. DivShot

DivShot 是个快速的,可视化的前端开发文本编辑器,跟 mockup 工具一样的简单整洁。包括各种框架需要的各种定制的组件库,这是它提供的最好的工具之一。除此之外还包括了一个主题转换器,允许用户修改主题。试验版本是免费的,过了试验期就需要自己付费维持原来的服务了。

15. PaintStrap

PaintStrap 使用 Adobe kuler/COLOURlovers 颜色组合来生成漂亮的 Twitter Bootstrap 主题。这个工具特别容易安装,同时很容易下载 CSS 文件并且也很容易替换成另一个标准的文件。  

有关Bootstrap UI 编辑器的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑,但在 OS X Mountain Lion 上找不到文件位置 - 2

    我使用“newapp_name”创建了一个新的Rails应用程序,我正在尝试编辑.gitignore文件,但在我的应用程序文件夹中找不到它。我在哪里可以找到它?我安装了Git。 最佳答案 .gitignore位于项目的root中,而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑,但在OSXMountainLion上找不到文件位

  3. ruby-on-rails - 如何在 vim 编辑器中使用 bundler 打开 gem 源代码 - 2

    尝试使用bundleopen命令打开gem源代码,accordingtoofficialdocumentationandinstruction.因此,我在.profile中导出编辑器:exportBUNDLER_EDITOR=viexportEDITOR=vi并尝试打开例如rails使用控制台的源代码:bundleopenrails出现错误CouldnotlocaleGemfile[ruby-2.1.1][~/]$:rails-vRails4.0.3[ruby-2.1.1][~/]$:bundle-vBundlerversion1.5.3[ruby-2.1.1][~/]$:bundle

  4. ruby-on-rails - Rails 编辑序列化的 JSON 数据 - 2

    我有一个存储JSON数据的列。当它处于编辑状态时,我不知道如何显示它。serialize:value,JSON=f.fields_for:valuedo|ff|.form-group=ff.label:short=ff.text_field:short,class:'form-control'.form-group=ff.label:long=ff.text_field:long,class:'form-control' 最佳答案 代替=f.fields_for:valuedo|ff|请使用以下代码:=f.fields_for:va

  5. ruby-on-rails - 尝试编辑时,Rails form_for 结果为 POST 而不是 PUT - 2

    我正在使用Rails4并遇到以下错误。RoutingErrorNoroutematches[POST]"/logs/1/meals/13/edit我正在使用:meal传递模型对象的form_for,并且编辑页面正确呈现。但是,Rails似乎并没有检查膳食对象是否已经保存,因此它一直尝试将表单发送到#create操作并尝试发出POST请求,而不是将表单发送到更新操作并进行当我点击提交时一个PUT请求。我如何让form_for识别我正在尝试更新现有对象并且需要PUT而不是POST?其他一切正常,我已经运行了所有迁移。我是Rails的新手,几乎一整天都在尝试自己解决这个问题。请帮忙!请注意,

  6. ruby-on-rails - 如何以一种形式编辑多个模型? - 2

    我从教练那里接到了任务。我想以一种形式编辑两个模型。例如,我们有两个实体学生和地址。在新学生部分,我想添加学生详细信息和地址。我如何通过ruby​​onrails中的脚手架实现这一目标? 最佳答案 您可以使用accepts_nested_attributes_for和fields_for建立一个表格来同时创建两个模型,所以你也可以编辑它们。这种形式称为嵌套形式。这里有一个关于Nestedform的引用给你,. 关于ruby-on-rails-如何以一种形式编辑多个模型?,我们在Stack

  7. ruby-on-rails - 如何将 h4 标签添加到 refinerycms 编辑器? - 2

    我正在尝试向refinerycms所见即所得编辑器添加一个h4标签。我该怎么做呢?找不到任何关于此的文档。我假设我必须对这个配置变量做一些事情:config.wymeditor_whitelist_tags={} 最佳答案 以下说明适用于RefineryCMS2.x.x和3.x.x版。但是,在版本3.x.x中,您将需要使用custom_visual_editor_boot_options而不是custom_wymeditor_boot_options。使用此文件:https://github.com/refinery/refiner

  8. ruby-on-rails - ActiveAdmin - 在不更改密码的情况下编辑设计用户 - 2

    我尝试这样做。不幸的是,我在覆盖更新方面遇到了问题,我不知道如何正确地做到这一点。我在另一个地方这样做的方式是:ifparams[:user][:password].blank?params[:user].delete("password")params[:user].delete("password_confirmation")end#...user.save!所以我尝试重写updatedefupdateifparams[:user][:password].blank?params[:user].delete("password")params[:user].delete("pass

  9. ruby-on-rails - 编辑链接不适用于编辑 ruby​​ on rails 博客中的评论 - 2

    我正在尝试在博客中实现编辑评论功能。我能够在文章上创建评论并显示它们。当我点击一篇文章的特定评论的“编辑”链接时,它会带我编辑评论表单,但它不包含任何内容。就像我们在堆栈溢出上编辑任何评论或问题一样,它需要我们编辑包含内容的页面。但就我而言,我需要编辑评论页面,但它是空的(不包含评论内容)。以下是我的代码文件。评论Controller.rbclassCommentsController"edit"endenddefdestroy@comment=Comment.find(params[:id])@article=Article.find(params[:article_id])@com

  10. ruby-on-rails - 使用 Form Object 时应该如何处理编辑和更新操作? - 2

    我有以下表单对象来管理复杂的嵌套表单。表单=simple_form_for(@profile_form,:url=>profiles_path)do|f|...路线resources:profilesControllerclassProfilesController表单对象classProfileFormincludeActiveModel::ValidationsincludeActiveModel::ConversionextendActiveModel::Namingdefinitialize(profile_id=nil)ifprofile_id@profile=Profile

随机推荐