Bootstrap Studio是一款Bootstrap框架创建响应式网站的功能强大的桌面应用程序。Bootstrap Studio可帮助您创建漂亮的网站。它配备了大量内置组件,您可以通过拖放来组装响应式网页。它建立在非常受欢迎的Bootstrap框架之上,并输出干净和语义化的HTML。数千名开发人员和设计师每天都在使用它。
帮助用户轻松构建网站
1、漂亮的模板
该应用程序带有许多您可以自定义的高级,完全响应模板。每个模板都包含多个页面和小部件,您可以将它们挑选并匹配到理想的网站中。
2、美丽的组件
Bootstrap Studio附带了大量用于构建响应页面的漂亮组件。我们有页眉,页脚,画廊,幻灯片,甚至还有诸如span和div之类的基本元素。请在下面查看其中的一些。
3、智能拖放
Bootstrap Studio知道哪些Bootstrap组件可以相互嵌套,并提供建议。它会自动为您生成漂亮的HTML,看起来就像是由专家手工编写的。
4、创建自己的组件
您可以将设计的各个部分提取为“自定义组件”,并准备将其放入您创建的任何设计中。您也可以将这些组件导出为文件并共享。
5、网上图书馆
如果您需要库中不存在的组件,只需单击组件面板中的联机选项卡。在那里,您会发现社区构建和共享的数千个组件。您也可以上传自己的。
6、链接组件
这是一项强大的功能,可让您同步组件,因此更改一个组件将自动更改另一个组件。这对于需要跨页更新的页眉和页脚之类的东西尤其有用。
7、实时预览
软件有一项强大的功能,称为“预览”。有了它,您可以在多个Web浏览器和设备中打开设计,并且您在应用程序中所做的每项更改都会即时显示在任何地方。
8、编辑代码
对于某些事情,拖放是不够的。这就是为什么Bootstrap Studio可以在需要时完全控制您的标记。您可以在我们的Sublime Text-like编辑器中导入和编辑CSS,SASS,JavaScript和HTML。
众多高级编辑器
1、高级CSS和SASS编辑器
我们先进的CSS编辑界面支持自动建议和规则验证,并在任何给定时间显示活动和继承的规则。
2、JavaScript编辑
在我们的Sublime Text-like编辑器中编写JavaScript。您所做的所有更改都将与预览同步,因此您无需重新加载浏览器即可编写代码并进行尝试。
3、HTML编辑
使用我们强大的自定义代码组件,您可以直接编写HTML,而无需通过我们的拖放界面。您还可以在需要时将页面的任何部分转换为自定义代码。
4、导入现有网站
如果您拥有以前开发的网站,则可以导入它。只需将HTML,CSS,JS文件和图像拖放到Bootstrap Studio中,它们就会被添加到您的项目中。
5、连接外部编辑器
喜欢在编辑器中编写CSS?没问题!只需单击一下,您就可以连接Visual Studio Code,Sublime Text,Atom,IntelliJ等。
6、键盘快捷键
Bootstrap Studio对键盘快捷键提供了全面的支持,可让您极大地加快工作流程。
7、更多功能
还有很多功能可以下载体验!
完善的使用方法
1.应用窗口
窗口分为三个部分。 左侧有两个面板 - 组件和概述; 右侧的两个面板 - 设置和设计,以及保存舞台的中心区域。舞台用于查看页面预览,拖放组件和编辑文本。
2.选择组件
通过单击选择组件。选择组件会在其周围显示蓝色轮廓,以及一个快速操作的栏
通过这些操作,您可以快速移动项目,编辑文本并复制它。 请记住,并非所有操作都适用于每个组件。 例如,图像上不显示文本编辑。 选择组件后,右侧的“设置”面板将更新。 在这里您可以修改komponent的样式,控制各种属性甚至创建动画。
“设置”面板中有三个选项卡 - 外观,选项和动画。这些threetab中提供的设置使您可以对组件的设计和行为进行大量控制。 但是如果您需要更多控制,那么编写CSS就适合您(有关详细信息,请参阅“帮助”>“教程和指南”菜单)。
要记住的一件事是,Bootstrap的一些组件实际上是由其他组件组成的,例如下拉列表:
如果你试图选择它,你实际上会选择里面的按钮。如果你想看到Dropdown的选项,你需要去一个组件。单击“向上”按钮(个)很容易做到 在所选组件上,或在痕迹导航栏中的条目,显示在“设置”面板的顶部:
3.编辑文本
可以在富文本编辑器中编辑段落,跨度和按钮等元素。 您可以将文本设置为粗体,斜体,带下划线,添加链接和纯粹。
只需双击元素即可编辑其内容,或在组件聚焦时按下铅笔按钮()。
提示:您可以在选择了元素时按Enter键开始编辑,按Ctrl + D / Cmd + D复制,删除删除。 我们网站上有高级用户支持的键盘快捷键列表。
4. DRAG AND DROP
选择元素后,您可以通过移动手柄抓取它以将其拖放到其他组件中。
某些元素(如HTML和Body)已锁定且无法移动(您可以通过“概述”面板中的小挂锁识别它们)。 这样做是为了不会错误地破坏页面。
Bootstrap Studio知道可以删除组件的位置,并自动添加Bootstrap Framework期望的CSS类和其他属性。 你甚至不必考虑它。
提示:您可以从舞台拖动并删除“概述”面板上的组件以获得更高的精度。
5.组件
您可以使用大量组件。 您可以在“组件”面板的“Studio”选项卡中看到它们。 支持所有标准的Bootstrap组件,甚至是基本的HTML元素,如span,div,section等。
组件被组织成可折叠组 - 文本,图像,表单等。您还有一个特殊的“用户”组,您可以在其中放置您自己创建的组件。
这是提取您经常需要的设计的好方法。 我们将在“帮助”>“教程和指南”>“自定义组件”教程中介绍此内容。
“在线”选项卡包含大量的社区贡献组件,如页眉,页脚,定价表等,您可以搜索和安装这些组件。
6.打开和保存您在Bootstrap Studio中创建的文档称为Designs。您可以打开它们并将它们保存为扩展名为.bsdesign的文件。
双击文件管理器中的其中一个文件将在Bootstrap Studio中打开它们。您可以复制设计并同时处理多个版本。
键盘快捷键一览
Bootstrap Studio中有大量可用的键盘快捷键,这是在创建Web设计时加快工作流程的好方法。
行动 在Windows / Linux 苹果电脑
节省设计 Ctrl + S. Command + S.
开放式设计 Ctrl + O. Command + O.
新设计 Ctrl + N. Command + N.
出口设计 Ctrl + E. Command + E.
关闭设计 Ctrl + W Command + W
复制所选组件 Ctrl + C. Command + C.
粘贴组件 Ctrl + V. Command + V.
粘贴链接组件 Ctrl + Shift + V. Command + Shift + V.
添加组件标签 Ctrl + L. Command + L.
聚焦父组件 Ctrl +向上箭头 Command +向上箭头
聚焦儿童组件 Ctrl +向下箭头 Command +向下箭头
关注下一个兄弟姐妹 Ctrl +右箭头 Command +右箭头
关注以前的兄弟姐妹 Ctrl +向左箭头 Command +左箭头
重复的聚焦组件 Ctrl + D. Command + D.
删除聚焦组件 删除 转发删除
放大 Ctrl + 命令+
缩小 Ctrl - 命令 -
重置缩放 Ctrl + 0 命令+ 0
文本编辑快捷方式
行动 在Windows / Linux的 苹果电脑
编辑文本元素 输入 输入
空文本元素和编辑 退格 删除
胆大 Ctrl + B. Command + B.
斜体 Ctrl + I 命令+我
强调 Ctrl + U. Command + U.
切换链接 Ctrl + K. Command + K.
删除左词 Ctrl + Backspace 选项+删除
删除正确的词 Ctrl + Delete 选项+转发删除
移动到行首 家 Command +左箭头
移到行尾 结束 Command +右箭头
移到上一个单词 Ctrl +向左箭头 选项+左箭头
移到下一个单词 Ctrl +右箭头 选项+右箭头
选择上一个单词 Ctrl + Shift +向左箭头 选项+ Shift +向左箭头
选择下一个单词 Ctrl + Shift +向右箭头 选项+ Shift +右箭头
选择所有文本 Ctrl + A. Command + A.