Bootstrap Studio(动态网页设计工具)

　　Bootstrap Studio是一款强大的网站设计软件，通过这款软件用户可以轻松的设计和制作各种类型的网站；它内置了丰富的功能组件，通过简单的拖放方式就可以使用这些组件快速搭建一个响应式的网页；这款软件是基于Bootstrap框架上进行开发的，要知道Bootstrap框架是一种深受设计师们欢迎的一种程序开发架构，使用这种架构最大的好处就是用户可以轻松的导出干净的HTML；不管是对于初学者还是经验丰富的设计师，这款软件无疑是一个非常高效的网站搭建工具，如果您想提升您的工作效率，非常欢迎您下载这款软件使用。

软件功能

　　编辑代码

　　对于某些事情，仅靠拖放是不够的，因此bootstrap studio可以在需要时完全控制您的标签，您可以在诸如编辑器之类的崇高文本中导入和编辑CSS，sass，JavaScript和HTML。

　　高级CSS和Sass编辑器

　　我们先进的CSS编辑界面支持自动建议和规则验证，并在任何给定时间显示活动和继承的规则。

　　JavaScript编辑

　　在诸如编辑器之类的崇高文字中编写JavaScript。您所做的所有更改都将与预览同步，因此您可以编写代码并尝试尝试而无需重新加载浏览器。

　　HTML编辑

　　借助我们强大的自定义代码组件，您可以直接编写HTML，而无需通过我们的拖放界面。您还可以在需要时将页面的任何部分转换为自定义代码。

　　导入现有网站

　　如果您有以前开发的站点，则可以导入它。只需将HTML，CSS，JS文件和图像拖放到bootstrap studio中，它们就会被添加到您的项目中。

　　连接外部编辑器

　　倾向于在编辑器中编写CSS？没问题！只需单击一下，您就可以连接到Visual Studio代码，崇高文本，atom，IntelliJ等。

　　键盘快捷键

　　Bootstrap Studio提供对键盘快捷键的全面支持，这可以大大加快您的工作流程。

软件特色

　　1、它同时支持引导加载程序3和引导加载程序4，使您可以将设计从一种切换到另一种。

　　2、您可以一键将设计导出为静态网站，或发布到我们的下一代托管平台。

　　3、它提供HTTPS，自定义字段，密码，并且完全免费。

　　4、该应用程序具有用于处理启动网格的特殊工具。

　　5、Bootstrap studio与Google webfonts集成在一起，为您提供了一种导入和管理字体的简便方法。

　　6、CSS编辑器会自动建议甚至字体系列名称。

　　7、该应用程序具有许多内置的引导程序主题，图标，字体，模板和组件，您可以将它们组合成美观独特的设计。

　　8、Bootstrap Studio会自动更新，因此您始终具有最新版本。我们每个月都会发布更新，包括新功能，组件和改进。

使用方法

　　在Bootstrap Studio中编写HTML

　　Bootstrap Studio像拖放编辑器一样闪耀。但是有时您需要对布局和标记进行额外的控制。在这种情况下，您可以使用Bootstrap Studio强大的HTML编辑功能。

　　使用自定义代码编写HTML

　　自定义代码是功能强大的组件，可让您完全控制其内容。您可以使用它快速将HTML代码段添加到页面。

　　要将组件添加到设计中，请在“组件”面板中找到它，并将其拖放到页面中。

　　当你双击一个自定义代码组件（或当你右击它并选择编辑代码），它将打开应用程序窗口底部的代码编辑器。

　　在这里，您可以完全控制代码。该编辑器支持Sublime Text和其他流行的编辑器所了解和喜爱的大多数键盘快捷键。当您点击“ 应用”时，所做的更改将被添加到页面中。

　　注意：出于安全原因，如果在Bootstrap Studio中显示“自定义代码”，则会清理HTML并禁用JS。在“ 预览”中，导出时，“自定义代码”包含在未经修改的页面中，完全按照您编写它的方式进行。

　　将组件转换为HTML

　　Bootstrap Studio像可视化的拖放编辑器一样闪耀，但它还使您能够将页面的一部分转换为HTML，并可以使用键盘快捷键和实时预览享受不受限制的代码编辑。

　　转换为HTML

　　要将组件转换为HTML，请右键单击它，然后从菜单中选择“ 转换为HTML”选项。

　　这将获取所选组件的HTML，并将其放置在新的“自定义代码”组件中。原稿将被删除。您可以像上一篇文章中讨论的那样双击并编辑Custom Code组件。

　　向元素添加属性

　　编写CSS时，必须在元素中添加自己的类和ID。您还可以使用Bootstrap的数百种实用程序类，这可以使您的生活更轻松。

　　Bootstrap Studio提供了一种向HTML元素添加属性的简便方法。为此，请单击HTML选项卡底部的“ 属性”面板。

　　注意：您可以添加所需的任何CSS类，但是有些类（如上图所示）已被锁定。要在Bootstrap Studio中更改锁定的类，您需要在“ 选项”面板中修改组件的设置。

　　要浏览“属性”表单，请使用Tab，Shift + Tab和Enter。这些属性将自动应用于元素，并保留完整的撤消/重做历史记录。

　　转移属性

　　为了方便起见，您可以在元素之间复制/粘贴属性。只需右键单击HTML树中的元素，然后选择“复制属性”。

　　从这一点开始，您可以使用“粘贴属性”选项将这些属性粘贴到其他元素上，并将它们添加到新元素中。这是传输大量属性和类名称的快速方法，而不必将组件链接在一起。

　　注意：出于安全原因，“ on”事件属性被禁用。您可以通过使用jQuery编写JS代码来附加事件侦听器。

　　导入HTML页面

　　除了可以在Bootstrap Studio中编辑HTML的两种方式（通过添加自定义代码组件，并将部件转换为HTML）之外，该应用程序还允许您导入整个HTML页面。

　　为此，在“ 设计面板”中，右键单击“ 页面”，然后选择“导入HTML文件”。然后导航到要导入的文件。

　　导入的文件将作为常规页面添加到“ 页面”组中。唯一的限制是HTML文件的内容将放置在“自定义代码”块中，在该块中“拖放”功能不可用，但是您可以在我们的HTML编辑器中双击它来对其进行编辑。

　　建立一个网站

　　第一步是在我们的平台上创建一个免费网站。您可以从Bootstrap Studio中的“ 云”>“管理网站”菜单中执行此操作。这将打开“ 管理网站”对话框。

　　我们没有配置任何网站，因此我们按添加网站按钮。这将打开“ 创建网站”对话框。

　　您有两种类型的域名可供选择：

　　xxx.bss.design子域。这很简单，是本教程要使用的选项。

　　自定义域名。这样，您可以将自己的example.com域名指向我们的托管服务。这涉及更多，我们已经在自定义域教程中进行了介绍。

　　如上图所示，您还有其他一些选择：

　　子域。xxx.bss.design您希望网站显示在其下的子域。

　　自动删除。这是可以启用的可选设置。有了它，您可以将站点设置为自动删除，例如，如果您希望创建一个临时站点以向客户展示您的设计，但是您不希望它长期存在。您可以将此设置为永不。

　　密码保护。如果您希望限制您的网站，使其只能在输入密码后才能查看。在我们的密码保护教程中了解有关此选项的更多信息。您可以稍后通过编辑站点来更改密钥或启用/禁用该选项。

　　要创建您的网站，只需点击“ 创建”按钮，它将显示在您的网站列表中。您可以通过单击右侧的3个点触发的菜单来编辑和删除站点。删除站点将为新站点腾出空间。

　　您可以继续并关闭此对话框。现在，让我们发布我们的设计！

　　发布网站

　　如果执行了上述步骤，则您现在可以使用一个可以正常运行的网站。发布本身很简单。只需打开要在线发布的设计，然后单击右上角的“ 发布”按钮即可。

　　注意：此外，快捷键Ctrl + P（在macOS上为Cmd + P）可加快工作流程。查看该应用程序支持的所有键盘快捷键。

　　如果这是您首次发布设计，则该应用程序将提示您选择要发布到的网站。

　　只需选择您想要发布到的站点，然后点击发布按钮即可。该应用程序使用有效的数据传输协议，并且仅上传自上次发布以来所做的更改。这使得过程闪电般快速。