Bootstrap Builder(原型设计软件)

　　Bootstrap Builder是一款原型设计软件，可以帮助用户在电脑上设计多种原型，您可以设置网页上的CSS原型，可以设计手机上的原型，内置排版工具、指定元件尺寸、定位元素:概述、CSS多栏布局控制、背景:渐变和图像、边界和边界半径、效应:规模,歪斜,翻译等等等功能，让用户在设计的时候可以优化原型图像；这里小编推荐的是官方发布的最新版本，打开就可以免费使用，需要的朋友可以下载体验！

软件功能

　　1、CSS控件

　　通过简单的可点击控件，充分利用CSS的全部设计能力

　　2、使用P表示和性能

　　Picture元素提供特定于设备的图像

　　3、调色板管理

　　从屏幕上的任何位置抓取颜色，并将它们组织成可重复使用的调色板。

　　4、印刷完美

　　谷歌字体，后备，内联编辑，视囗相关的大小调整以及您可以想到的所有其他排版样式控件。

　　5、定位控件

　　从显示和绝对定位，清除或浮动，到令人惊叹的Flexbox控件。

　　6、易于布局管理

　　添加，删除，合并和移动行和列。调整跨度宽度，偏移量和推拉设置。

软件特色

　　断点管理在 缩放工具放置在断点按钮的左侧。缩小有助于从较小的计算机（如笔记本电脑）设计大屏幕，并显示断点，否则可能隐藏在窗格后面甚至是屏幕外。

　　在当前视口的宽度 -滑块手柄的位置-是缩放工具下清晰可见。

　　当设备类型在当前宽度更常见时，右侧的三个设备图标变得更亮。由于台式机显示器，平板电脑和手机都有各种尺寸，因此仅供参考。没有特定的手机或平板电脑宽度，也无法“设计手机”。

　　相反，响应式设计必须看起来很好并且在每个宽度上都表现良好 - 图标仅仅表示在滑块的当前位置可以使用什么类型的设备来查看站点。

　　断点是进行布局或设计更改的位置。它们由滑块上方的小点或“点”表示。紫色圆点是Bootstrap框架的默认断点。白点是自定义断点

　　当点亮时，断点处于活动状态 - 当点上方有一个小黑圈时。在上图中，这是左起第四个点。当滑块放在它的右侧并且直到到达下一个断点时，断点变为活动状态。任何布局或设计 更改仅适用于该（中断）点。它们适用于比活动断点位置更宽的所有屏幕，但可以进一步更改任何下一个断点。

安装方法

　　1、下载responsive-bootstrap-builder-full-win-en-2.5-308.exe软件启动安装，点击next

　　2、软件的安装协议如图所示，点击next

　　3、提示安装的地址设置，默认C:Program FilesCoffeeCup SoftwareResponsive Bootstrap Builder

　　4、软件即将安装到你的电脑，点击next就可以执行安装

　　5、提示安装进度界面，等待软件安装结束吧

　　6、软件已经安装结束。点击finish退出软件

使用方法

　　1、Bootstrap Builder软件界面如图所示，直接在软件界面查看官方提供的帮助

　　2、设计界面如图所示，可以在这里设计为原型，点击file建立新的项目

　　3、软件的界面如图所示， 直接在软件添加原型参数，可以调整风格

　　4、默认模式、禁用所有断点、启用单个断点、768px、992px、1200像素

　　5、X射线模式、选择大纲、容器结构、元素结构、空Dropzone模式、网格排水沟、网格行、网格列

　　6、菜单功能都是常用的，可以选择指数下一页、上一页 添加空白页、 重复当前页面、管理项目

　　7、这会将产品图像和描述区域放在一起。选择其中一列，然后在“布局”窗格中查看跨越此断点时跨度编号的更改方式。

使用说明

　　宽度滑块

　　在需要的地方进行布局和设计更改的能力是任何响应式设计的关键。在更宽的屏幕上，可能需要将列放在彼此旁边而不是堆叠。可能需要增加字体大小，并用较大的图像替换小图像。该宽度滑块可以用来查看网站在任何可能的宽度，并帮助决定是否任何这样的改变将提高设计的用户体验。只需抓住手柄即可向左或向右移动滑块，并查看视口和画布的更改。您也可以单击它并使用键盘箭头键逐个像素地向左或向右移动它。

　　CSS预览应用于所选元素的CSS在检查器窗格的下半部分是可见的。通过在所有断点处提供应用于所选元素的CSS，检查员可以让您了解“引擎盖下”究竟发生了什么。

　　检查员窗格

　　此窗格非常类似于 Chrome和Firefox等浏览器中的Web检查器。检查器窗格的上半部分显示DOM树; 页面元素及其嵌套的列表。将鼠标悬停在元素上会突出显示该元素，并在画布上显示其选择器和尺寸。元素本身以蓝色/灰色突出显示，并使用玫瑰色区域显示边距

　　也可以选择元素并将其移动到其他位置。选中后，画布会自动滚动到元素位置。双击该元素将显示该元素的“设计”窗格。

　　要移动元素或元素组，只需单击并拖动即可移动元素。拖动时，灰色指示条将表示放置时元素的放置位置。

　　当在树中选择元素时，所有复制和复制和粘贴功能都有效。例如，键盘快捷键CMD / CTRL + C将复制它。然后选择要放置它的元素，并使用CMD / CTRL + V粘贴它（或使用右键单击菜单）。

　　元素组 - 行，列，容器和子网格 - 可以通过单击箭头折叠。

　　元素旁边的橙色点表示它充当符号 - 对符号的更新将触发“符号元素组”的所有实例。

　　效果效果部分包含许多控件，可以为设计的初始外观添加漂亮的触感。控件也可以与悬停和视图状态结合使用（后者即将公开发布......）。

　　下面的示例在图像（分别是按钮）悬停时使用缩放和旋转效果。要在Bootstrap Builder中查看效果，请单击工具栏中的“预览”图标，然后将示例悬停。

　　按钮使用了一点盒子阴影。此控件与文本阴影控件非常相似，但顾名思义，它适用于（元素）框而不是文本。

　　此外，可以在边框内的内部元素上设置阴影。为此，只需单击带有向内箭头的图标即可。该价差将将导致阴影扩大和做大。

　　就像背景和文字阴影一样，盒子阴影也可以分层。结合阴影的定位，尺寸和着色的不同控制，这可以产生一些很酷的效果。还有一件事要知道：如果指定了border-radius，则框阴影采用相同的圆角。

　　该比例控制是CSS变换工具集的一部分。它修改元素或元素组的大小，增加或减少它。

　　的翻译 功能侧向移动的元件，上和下，或它们的组合。这种“转变”通常用于悬停或“滚动到视图”动画。有两个主要原因，首先移动具有translate的对象不会影响其他对象的位置，UI的其余部分将保持稳定。其次，使用translate的移动元素会减少CPU密集度并且对整体性能更好，那么，比方说，移动不可靠的定位元素。

　　边界可以使用Border控件将边框添加到元素。单击图标中心的圆圈可选择（或取消选择）所有边框。但这并不意味着边界是启用或禁用，它仅仅是一个的方式选择与其他控件应用样式设置边框（一个或多个）。

　　可以同时设置多个边框的样式。在图像中，已选择顶部，右侧和左侧边框，并且已应用边框宽度或2px。在边框样式是（一）固定（线）和指定的颜色是橙色的。

　　底部边框 - 在图像中取消选择 - 具有相同的样式和颜色，但宽度为6px。通过取消选择其他边框并单击图标中的下边框以选择它，可以看到这一点。下面的示例显示了border（和border-radius）定义的结果。

　　如果选择了应用了不同样式的边框，则在样式不同的控件底部会显示一条红线。如果更改了这些样式，它们将在所有选定的控件上同步，红线将消失。

　　在选择边框方面，Radius控件的工作方式与Border控件完全相同。此控件可用于“圆化”元素的角。元素不需要具有边框，在没有边框的情况下，这将应用于元素的背景。

　　值越高，角落越圆。为角的水平（x）和垂直（y）部分设置不同的值和/或为不同的角设置不同的值可用于创建某些形状。

　　要创建如弹性卡示例中所示的圆，请定义相等的宽度和高度，并结合高半径值。