Bootstrap Builder是一款原型設(shè)計(jì)軟件，可以幫助用戶在電腦上設(shè)計(jì)多種原型，您可以設(shè)置網(wǎng)頁(yè)上的CSS原型，可以設(shè)計(jì)手機(jī)上的原型，內(nèi)置排版工具、指定元件尺寸、定位元素:概述、CSS多欄布局控制、背景:漸變和圖像、邊界和邊界半徑、效應(yīng):規(guī)模,歪斜,翻譯等等等功能，讓用戶在設(shè)計(jì)的時(shí)候可以優(yōu)化原型圖像；這里小編推薦的是官方發(fā)布的最新版本，打開(kāi)就可以免費(fèi)使用，需要的朋友可以下載體驗(yàn)！

軟件功能

　　1、CSS控件

　　通過(guò)簡(jiǎn)單的可點(diǎn)擊控件，充分利用CSS的全部設(shè)計(jì)能力

　　2、使用P表示和性能

　　Picture元素提供特定于設(shè)備的圖像

　　3、調(diào)色板管理

　　從屏幕上的任何位置抓取顏色，并將它們組織成可重復(fù)使用的調(diào)色板。

　　4、印刷完美

　　谷歌字體，后備，內(nèi)聯(lián)編輯，視囗相關(guān)的大小調(diào)整以及您可以想到的所有其他排版樣式控件。

　　5、定位控件

　　從顯示和絕對(duì)定位，清除或浮動(dòng)，到令人驚嘆的Flexbox控件。

　　6、易于布局管理

　　添加，刪除，合并和移動(dòng)行和列。調(diào)整跨度寬度，偏移量和推拉設(shè)置。

軟件特色

　　斷點(diǎn)管理在 縮放工具放置在斷點(diǎn)按鈕的左側(cè)?？s小有助于從較小的計(jì)算機(jī)（如筆記本電腦）設(shè)計(jì)大屏幕，并顯示斷點(diǎn)，否則可能隱藏在窗格后面甚至是屏幕外。

　　在當(dāng)前視口的寬度 -滑塊手柄的位置-是縮放工具下清晰可見(jiàn)。

　　當(dāng)設(shè)備類型在當(dāng)前寬度更常見(jiàn)時(shí)，右側(cè)的三個(gè)設(shè)備圖標(biāo)變得更亮。由于臺(tái)式機(jī)顯示器，平板電腦和手機(jī)都有各種尺寸，因此僅供參考。沒(méi)有特定的手機(jī)或平板電腦寬度，也無(wú)法“設(shè)計(jì)手機(jī)”。

　　相反，響應(yīng)式設(shè)計(jì)必須看起來(lái)很好并且在每個(gè)寬度上都表現(xiàn)良好 - 圖標(biāo)僅僅表示在滑塊的當(dāng)前位置可以使用什么類型的設(shè)備來(lái)查看站點(diǎn)。

　　斷點(diǎn)是進(jìn)行布局或設(shè)計(jì)更改的位置。它們由滑塊上方的小點(diǎn)或“點(diǎn)”表示。紫色圓點(diǎn)是Bootstrap框架的默認(rèn)斷點(diǎn)。白點(diǎn)是自定義斷點(diǎn)

　　當(dāng)點(diǎn)亮?xí)r，斷點(diǎn)處于活動(dòng)狀態(tài) - 當(dāng)點(diǎn)上方有一個(gè)小黑圈時(shí)。在上圖中，這是左起第四個(gè)點(diǎn)。當(dāng)滑塊放在它的右側(cè)并且直到到達(dá)下一個(gè)斷點(diǎn)時(shí)，斷點(diǎn)變?yōu)榛顒?dòng)狀態(tài)。任何布局或設(shè)計(jì) 更改僅適用于該（中斷）點(diǎn)。它們適用于比活動(dòng)斷點(diǎn)位置更寬的所有屏幕，但可以進(jìn)一步更改任何下一個(gè)斷點(diǎn)。

安裝方法

　　1、下載responsive-bootstrap-builder-full-win-en-2.5-308.exe軟件啟動(dòng)安裝，點(diǎn)擊next

　　2、軟件的安裝協(xié)議如圖所示，點(diǎn)擊next

　　3、提示安裝的地址設(shè)置，默認(rèn)C:Program FilesCoffeeCup SoftwareResponsive Bootstrap Builder

　　4、軟件即將安裝到你的電腦，點(diǎn)擊next就可以執(zhí)行安裝

　　5、提示安裝進(jìn)度界面，等待軟件安裝結(jié)束吧

　　6、軟件已經(jīng)安裝結(jié)束。點(diǎn)擊finish退出軟件

使用方法

　　1、Bootstrap Builder軟件界面如圖所示，直接在軟件界面查看官方提供的幫助

　　2、設(shè)計(jì)界面如圖所示，可以在這里設(shè)計(jì)為原型，點(diǎn)擊file建立新的項(xiàng)目

　　3、軟件的界面如圖所示， 直接在軟件添加原型參數(shù)，可以調(diào)整風(fēng)格

　　4、默認(rèn)模式、禁用所有斷點(diǎn)、啟用單個(gè)斷點(diǎn)、768px、992px、1200像素

　　5、X射線模式、選擇大綱、容器結(jié)構(gòu)、元素結(jié)構(gòu)、空Dropzone模式、網(wǎng)格排水溝、網(wǎng)格行、網(wǎng)格列

　　6、菜單功能都是常用的，可以選擇指數(shù)下一頁(yè)、上一頁(yè) 添加空白頁(yè)、 重復(fù)當(dāng)前頁(yè)面、管理項(xiàng)目

　　7、這會(huì)將產(chǎn)品圖像和描述區(qū)域放在一起。選擇其中一列，然后在“布局”窗格中查看跨越此斷點(diǎn)時(shí)跨度編號(hào)的更改方式。

使用說(shuō)明

　　寬度滑塊

　　在需要的地方進(jìn)行布局和設(shè)計(jì)更改的能力是任何響應(yīng)式設(shè)計(jì)的關(guān)鍵。在更寬的屏幕上，可能需要將列放在彼此旁邊而不是堆疊?？赡苄枰黾幼煮w大小，并用較大的圖像替換小圖像。該寬度滑塊可以用來(lái)查看網(wǎng)站在任何可能的寬度，并幫助決定是否任何這樣的改變將提高設(shè)計(jì)的用戶體驗(yàn)。只需抓住手柄即可向左或向右移動(dòng)滑塊，并查看視口和畫布的更改。您也可以單擊它并使用鍵盤箭頭鍵逐個(gè)像素地向左或向右移動(dòng)它。

　　CSS預(yù)覽應(yīng)用于所選元素的CSS在檢查器窗格的下半部分是可見(jiàn)的。通過(guò)在所有斷點(diǎn)處提供應(yīng)用于所選元素的CSS，檢查員可以讓您了解“引擎蓋下”究竟發(fā)生了什么。

　　檢查員窗格

　　此窗格非常類似于 Chrome和Firefox等瀏覽器中的Web檢查器。檢查器窗格的上半部分顯示DOM樹; 頁(yè)面元素及其嵌套的列表。將鼠標(biāo)懸停在元素上會(huì)突出顯示該元素，并在畫布上顯示其選擇器和尺寸。元素本身以藍(lán)色/灰色突出顯示，并使用玫瑰色區(qū)域顯示邊距

　　也可以選擇元素并將其移動(dòng)到其他位置。選中后，畫布會(huì)自動(dòng)滾動(dòng)到元素位置。雙擊該元素將顯示該元素的“設(shè)計(jì)”窗格。

　　要移動(dòng)元素或元素組，只需單擊并拖動(dòng)即可移動(dòng)元素。拖動(dòng)時(shí)，灰色指示條將表示放置時(shí)元素的放置位置。

　　當(dāng)在樹中選擇元素時(shí)，所有復(fù)制和復(fù)制和粘貼功能都有效。例如，鍵盤快捷鍵CMD / CTRL + C將復(fù)制它。然后選擇要放置它的元素，并使用CMD / CTRL + V粘貼它（或使用右鍵單擊菜單）。

　　元素組 - 行，列，容器和子網(wǎng)格 - 可以通過(guò)單擊箭頭折疊。

　　元素旁邊的橙色點(diǎn)表示它充當(dāng)符號(hào) - 對(duì)符號(hào)的更新將觸發(fā)“符號(hào)元素組”的所有實(shí)例。

　　效果效果部分包含許多控件，可以為設(shè)計(jì)的初始外觀添加漂亮的觸感?？丶部梢耘c懸停和視圖狀態(tài)結(jié)合使用（后者即將公開(kāi)發(fā)布......）。

　　下面的示例在圖像（分別是按鈕）懸停時(shí)使用縮放和旋轉(zhuǎn)效果。要在Bootstrap Builder中查看效果，請(qǐng)單擊工具欄中的“預(yù)覽”圖標(biāo)，然后將示例懸停。

　　按鈕使用了一點(diǎn)盒子陰影。此控件與文本陰影控件非常相似，但顧名思義，它適用于（元素）框而不是文本。

　　此外，可以在邊框內(nèi)的內(nèi)部元素上設(shè)置陰影。為此，只需單擊帶有向內(nèi)箭頭的圖標(biāo)即可。該價(jià)差將將導(dǎo)致陰影擴(kuò)大和做大。

　　就像背景和文字陰影一樣，盒子陰影也可以分層。結(jié)合陰影的定位，尺寸和著色的不同控制，這可以產(chǎn)生一些很酷的效果。還有一件事要知道：如果指定了border-radius，則框陰影采用相同的圓角。

　　該比例控制是CSS變換工具集的一部分。它修改元素或元素組的大小，增加或減少它。

　　的翻譯 功能側(cè)向移動(dòng)的元件，上和下，或它們的組合。這種“轉(zhuǎn)變”通常用于懸停或“滾動(dòng)到視圖”動(dòng)畫。有兩個(gè)主要原因，首先移動(dòng)具有translate的對(duì)象不會(huì)影響其他對(duì)象的位置，UI的其余部分將保持穩(wěn)定。其次，使用translate的移動(dòng)元素會(huì)減少CPU密集度并且對(duì)整體性能更好，那么，比方說(shuō)，移動(dòng)不可靠的定位元素。

　　邊界可以使用Border控件將邊框添加到元素。單擊圖標(biāo)中心的圓圈可選擇（或取消選擇）所有邊框。但這并不意味著邊界是啟用或禁用，它僅僅是一個(gè)的方式選擇與其他控件應(yīng)用樣式設(shè)置邊框（一個(gè)或多個(gè)）。

　　可以同時(shí)設(shè)置多個(gè)邊框的樣式。在圖像中，已選擇頂部，右側(cè)和左側(cè)邊框，并且已應(yīng)用邊框?qū)挾然?px。在邊框樣式是（一）固定（線）和指定的顏色是橙色的。

　　底部邊框 - 在圖像中取消選擇 - 具有相同的樣式和顏色，但寬度為6px。通過(guò)取消選擇其他邊框并單擊圖標(biāo)中的下邊框以選擇它，可以看到這一點(diǎn)。下面的示例顯示了border（和border-radius）定義的結(jié)果。

　　如果選擇了應(yīng)用了不同樣式的邊框，則在樣式不同的控件底部會(huì)顯示一條紅線。如果更改了這些樣式，它們將在所有選定的控件上同步，紅線將消失。

　　在選擇邊框方面，Radius控件的工作方式與Border控件完全相同。此控件可用于“圓化”元素的角。元素不需要具有邊框，在沒(méi)有邊框的情況下，這將應(yīng)用于元素的背景。

　　值越高，角落越圓。為角的水平（x）和垂直（y）部分設(shè)置不同的值和/或?yàn)椴煌慕窃O(shè)置不同的值可用于創(chuàng)建某些形狀。

　　要?jiǎng)?chuàng)建如彈性卡示例中所示的圓，請(qǐng)定義相等的寬度和高度，并結(jié)合高半徑值。