Bootstrap Builder是一款非常便于使用的原型設(shè)計(jì)軟件，主要用于web原型設(shè)計(jì)，內(nèi)置了的CSS工具FLEXbox，可以對(duì)所有的內(nèi)容進(jìn)行調(diào)整，還支持?jǐn)帱c(diǎn)、放大和滑塊，用戶就可以盡情發(fā)揮您的想象。

　　Bootstrap Builder是一款功能強(qiáng)大的原型、建立和設(shè)計(jì)軟件。在你的設(shè)計(jì)工作流程中加入Bootstrap Builder，會(huì)讓你的項(xiàng)目質(zhì)量和速度都得到極大的提高。Bootstrap Builder為 流行的Bootstrap 3和4前端框架提供了實(shí)時(shí)可視化設(shè)計(jì)環(huán)境。與進(jìn)一步增強(qiáng)功能(如寬度滑塊，自定義斷點(diǎn)，全局內(nèi)容更新，可自定義的預(yù)構(gòu)建組件等)一起，這將大大改善設(shè)計(jì)工作流程，使創(chuàng)造力蓬勃發(fā)展。使用使用業(yè)界最著名的前端框架創(chuàng)建真實(shí)的數(shù)字體驗(yàn)。通過(guò)在實(shí)時(shí)瀏覽器環(huán)境中工作，加快生產(chǎn)時(shí)間。沒(méi)有代碼可以擔(dān)心，探索設(shè)計(jì)替代方案既快又容易，導(dǎo)致殺手網(wǎng)站。精通代碼的設(shè)計(jì)人員和前端開(kāi)發(fā)人員將受益于直觀，快速的工作流程，可以進(jìn)行更多的實(shí)驗(yàn)和設(shè)計(jì)迭代。這導(dǎo)致更短的周轉(zhuǎn)時(shí)間和/或更真實(shí)，獨(dú)特的場(chǎng)地設(shè)計(jì)。

　　Bootstrap Builder的工作流程和界面與Responsive Site設(shè)計(jì)師和Foundation Framer非常相似。

軟件介紹

　　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è)置。

游戲特色

　　可定制的Bootstrap組件和符號(hào)同步。拖動(dòng)可自定義的預(yù)建組件，如蒸單，手風(fēng)琴，警報(bào)，選項(xiàng)卡面板，模態(tài)對(duì)話框等。視覺(jué)上也創(chuàng)造了自己的。組合元素，通過(guò)數(shù)據(jù)屬性和一些CSS添加點(diǎn)擊操作，以創(chuàng)建自己的屏幕外導(dǎo)航，彈性卡，信息彈出窗囗或圖庫(kù)

　　戰(zhàn)斗同一性發(fā)揮設(shè)計(jì)創(chuàng)意。響應(yīng)式網(wǎng)站往往遭受“相同”。手動(dòng)創(chuàng)建響應(yīng)式站點(diǎn)很難，靈活的創(chuàng)建工具很少。因此，框架代碼或模扳經(jīng)常被調(diào)整到足以創(chuàng)建適度適合的站點(diǎn)。但這些網(wǎng)站缺乏個(gè)性和真實(shí)性。他們都有同感。但不是了!使用Bootstrap Builder，您可以調(diào)整所有內(nèi)容并將Bootstrap框架轉(zhuǎn)換為支持獨(dú)特業(yè)務(wù)案例的獨(dú)一無(wú)二的創(chuàng)建。

　　手動(dòng)調(diào)整也是一種選擇!Bootstrap Builder是一個(gè)可視化應(yīng)用程序，但任何希望能夠潛入后端的代碼鑒賞家都有這個(gè)選項(xiàng)。導(dǎo)出到任何代碼編輯器以手動(dòng)編輯清晰和干凈的標(biāo)記。Sweet：在自定義樣式表中鏈接，重新導(dǎo)出時(shí)不會(huì)被覆蓋。

使用方法

　　如果您正在應(yīng)用程序中閱讀此內(nèi)容，那么您目前正在查看Bootstrap Builder中觀看次數(shù)最多的部分：實(shí)時(shí)畫(huà)布。畫(huà)布 在下圖中標(biāo)記為#1，是基于瀏覽器的工作區(qū)。一個(gè)主要優(yōu)點(diǎn)是，您正在創(chuàng)建的內(nèi)容，外觀和感覺(jué)與網(wǎng)站上實(shí)際發(fā)布的內(nèi)容相同。畫(huà)布主要用于實(shí)時(shí)設(shè)計(jì)視圖，選擇或重新排序元素以及編輯文本。

　　該應(yīng)用程序的其余部分用于管理工作區(qū)域中發(fā)生的事情。在右側(cè)有5個(gè)窗格，標(biāo)記為#2，每個(gè)窗格都具有可視化管理內(nèi)容，HTML，CSS和Javascript的特定角色。

　　在工作區(qū)域的正上方，您會(huì)看到一個(gè)名為 “The Responsifier” 的酒吧 。標(biāo)記為#3的此欄包含許多用于管理所有可能設(shè)備寬度的設(shè)計(jì)的工具。

　　Bootstrap框架是“移動(dòng)優(yōu)先”。這意味著設(shè)計(jì)過(guò)程最初集中在最左側(cè)紫色點(diǎn)左側(cè)寬度的小型(移動(dòng))設(shè)備上。然后，當(dāng)斷點(diǎn)變?yōu)榛顒?dòng)時(shí)，可以對(duì)更大的屏幕進(jìn)行調(diào)整 - 當(dāng)紫色點(diǎn)顯示黑色中心時(shí)。如果您已使用Bootstrap進(jìn)行手動(dòng)編碼，那么這將是顯而易見(jiàn)的。如果不放心，我們稍后會(huì)詳細(xì)介紹。

　　標(biāo)記為#4的工具欄可以作為頁(yè)面管理器訪問(wèn)功能，可用于在多種設(shè)計(jì)模式之間切換并在特定瀏覽器中啟動(dòng)預(yù)覽。在本文檔的下一部分中，我們將總結(jié)每個(gè)指定區(qū)域的用途及其創(chuàng)建響應(yīng)式設(shè)計(jì)的功能。

　　1、畫(huà)布：基于瀏覽器的工作區(qū)，具有實(shí)時(shí)更新。

　　2、5個(gè)控制窗格。

　　3、寬度滑塊和斷點(diǎn)管理器。

　　4、工具欄

　　二、工作區(qū)

　　查看元素。單擊以選中或使用下拉列表。編輯文字。

　　此區(qū)域可視化網(wǎng)站訪問(wèn)者在登錄頁(yè)面時(shí)將體驗(yàn)到的內(nèi)容。結(jié)合Slider(The Responsifier的一部分)， 可以在設(shè)計(jì)時(shí)預(yù)覽每個(gè)設(shè)備寬度。

　　如果您有興趣了解設(shè)計(jì)的特定部分在不同屏幕寬度下的行為，請(qǐng)選擇該部分中的任何元素。在普通瀏覽器中，調(diào)整大小時(shí)內(nèi)容將流出視圖，但在Bootstrap Builder中，所選內(nèi)容將自動(dòng)滾動(dòng)回視圖。一個(gè)小但非常方便的BB特權(quán)!

　　在畫(huà)布上，可以通過(guò)單擊它們或從動(dòng)態(tài)下拉列表中選擇它們來(lái)選擇元素?？梢詫⑦x定元素拖放到不同的位置或列中。所選元素也可以復(fù)制或復(fù)制并粘貼到不同的區(qū)域。

　　文本編輯器處于活動(dòng)狀態(tài)時(shí)，可以在適當(dāng)?shù)奈恢镁庉嬑谋驹?。編輯器可以通過(guò)多種方式激活。右鍵單擊文本元素將彈出一個(gè)上下文菜單，可以訪問(wèn)常用功能，包括文本編輯。

　　高級(jí)用戶將欣賞能夠使用鍵盤(pán)組合進(jìn)行菜單中可用的操作。完整的鍵盤(pán)快捷鍵列表將包含在本文檔中。

　　管理Canvas上的內(nèi)容和設(shè)計(jì)的最重要工具位于控制窗格中。我們接下來(lái)再看看它們。

　　三、控制窗格

　　布局，內(nèi)容，樣式，頁(yè)面設(shè)置，檢查員。

　　這與設(shè)計(jì)移動(dòng)優(yōu)先非常相似。設(shè)計(jì)移動(dòng)優(yōu)先的一個(gè)關(guān)鍵論點(diǎn)是小空間強(qiáng)制適當(dāng)?shù)膬?nèi)容優(yōu)先級(jí)。內(nèi)容優(yōu)先提出相同但不依賴于屏幕尺寸?！翱煞?jǐn)帱c(diǎn)”設(shè)置(見(jiàn)下文)對(duì)此有很大幫助。

　　在UI的右側(cè)，有5個(gè)窗格，每個(gè)窗格在創(chuàng)建響應(yīng)式設(shè)計(jì)時(shí)都有特定的作用。懸停時(shí)，圖標(biāo)將替換為窗格名稱。以下是每個(gè)窗格的概述，每個(gè)窗格的詳細(xì)信息將在下一節(jié)中提供。

　　最左側(cè)的窗格是“ 布局”窗格。此窗格包含用于使用Bootstrap網(wǎng)格的控件。在這里，您可以添加行，列(包含實(shí)際內(nèi)容元素)并指定列的寬度，并根據(jù)不同的顯示寬度進(jìn)行調(diào)整。

　　下一個(gè)窗格是“ 內(nèi)容”窗格。標(biāo)題，段落，按鈕，圖像和視頻(以及更多)等元素可以插入到畫(huà)布上的任何列中。

　　“ 內(nèi)容”窗格上還有項(xiàng)目組件。此子窗格可以訪問(wèn)項(xiàng)目中包含的所有預(yù)構(gòu)建組件，如導(dǎo)航，卡片和模態(tài)?？梢酝ㄟ^(guò)“內(nèi)容”窗格訪問(wèn)符號(hào)。符號(hào)是諸如購(gòu)買(mǎi)按鈕或諸如頁(yè)腳之類的組件之類的元素，它們?cè)陧?xiàng)目的所有位置和頁(yè)面中保持同步。

　　在五個(gè)窗格中，“ 設(shè)計(jì)”窗格可能是最常光顧的窗格。頂部用于配置元素的HTML /內(nèi)容部分。例如，Bootstrap類可以從預(yù)定義列表中“過(guò)濾”，可以添加自定義類或指定URL。第二部分包含控制元素設(shè)計(jì)的所有輸入，工具和控件，細(xì)分為版式，尺寸等部分。

　　最后一個(gè)窗格是“ 檢查器”窗格。頂部給出了一個(gè)樹(shù)，就像頁(yè)面上所有元素的概述一樣。它提供了一種快速選擇和重新排序元素的方法，例如，切換隱藏元素的可見(jiàn)性。底部部分提供了添加的CSS規(guī)則的預(yù)覽。

　　這僅涉及窗格提供的設(shè)計(jì)和創(chuàng)作可能性。有關(guān)它們的更多詳細(xì)信息，請(qǐng)參閱下一節(jié)。由于我們是設(shè)計(jì)內(nèi)容優(yōu)先*的忠實(shí)粉絲，讓我們開(kāi)始使用內(nèi)容窗格。

　　四、內(nèi)容第一

　　“內(nèi)容”窗格

　　內(nèi)容”窗格使用三個(gè)子窗格來(lái)組織各種網(wǎng)站構(gòu)建塊，一個(gè)用于內(nèi)容 元素，一個(gè)用于組件，一個(gè)用于符號(hào)。

　　選擇“內(nèi)容”窗格時(shí)，默認(rèn)情況下會(huì)打開(kāi)最常用的“ 元素”子窗格。在此窗格中，您可以添加標(biāo)題，按鈕，圖像等。這些元素是最小的站點(diǎn)構(gòu)建塊。第1節(jié)提供了有關(guān)各種元素類型的更多詳細(xì)信息。

　　組件 通常由幾個(gè)元素組成。他們一起執(zhí)行更復(fù)雜的角色，例如導(dǎo)航菜單，(系列)卡片，手風(fēng)琴或標(biāo)簽。第2部分將更詳細(xì)地討論組件。

　　符號(hào) 是特殊元素或元素組，在整個(gè)項(xiàng)目中保持完全相同。更新符號(hào)的一個(gè)實(shí)例時(shí)，項(xiàng)目中的所有其他實(shí)例也將更改。例如，這允許通過(guò)一次編輯更新所有頁(yè)面的頁(yè)腳。

　　1、元素：文字

　　有6種不同的文本元素可用。按鈕右側(cè)帶有小箭頭的那些變化。單擊箭頭，例如，標(biāo)題1允許您從標(biāo)題1 - 6中進(jìn)行選擇。

　　每個(gè)元素執(zhí)行不同的(語(yǔ)義)角色。例如，標(biāo)題元素描述了后面部分的主題。段落通常是一個(gè)文本塊，依此類推。只需選擇您認(rèn)為最適合文本目的的元素。

　　可以通過(guò)在文本編輯模式下鍵入或粘貼文本塊來(lái)替換占位符文本。Tripple單擊文本元素將啟動(dòng)文本編輯器?；蛘?，您可以使用“設(shè)計(jì)”窗格上的“編輯”按鈕或使用右鍵單擊菜單。

　　文本編輯器還可用于添加內(nèi)聯(lián)鏈接和格式。以下鏈接提供了更多信息。

　　2、元素：圖像

　　添加圖片元素時(shí)，最初使用占位符圖像。這允許快速實(shí)驗(yàn)或原型設(shè)計(jì)，而無(wú)需立即花費(fèi)時(shí)間來(lái)尋找，優(yōu)化等真實(shí)圖像。

　　替換占位符發(fā)生在“設(shè)計(jì)”窗格上。雙擊圖像將打開(kāi)此窗格。使用Picture標(biāo)簽的下拉菜單，您可以在占位符和本地或在線圖像之間切換。

　　選擇本地圖像時(shí)，系統(tǒng)會(huì)要求您從文件系統(tǒng)中選擇一個(gè)圖像。所選圖像將添加到項(xiàng)目中，并顯示而不是占位符圖像。當(dāng)您選擇發(fā)布或上傳項(xiàng)目時(shí)，此圖像將包含在images文件夾中。

　　您還可以提供在線圖像的鏈接。在這種情況下，您可以在下拉列表下方的輸入框中將(過(guò)去)URL插入到圖像中。

　　您會(huì)注意到新添加的圖像不會(huì)超過(guò)200px?？梢允褂胢ax-width控件在“設(shè)計(jì)”窗格上更改此設(shè)置。

　　Bootstrap Builder使用brandnew 元素。這允許您在斷點(diǎn)處更改圖像，將較小的圖像提供給移動(dòng)設(shè)備以獲得更好的性能。我們自己的Suzanne寫(xiě)了一篇關(guān)于此的優(yōu)秀文章，請(qǐng)查看!

　　急于讓你的設(shè)計(jì)鞋現(xiàn)在，不是嗎?

　　在設(shè)計(jì)面板可能是在那里你將與引導(dǎo)生成器工作時(shí)，掛出的大部分時(shí)間。該窗格將在下面進(jìn)一步詳細(xì)討論。但是，我們已經(jīng)觸及了上面的內(nèi)容，開(kāi)始修改可視化CSS控件的誘惑可能很高。

　　控件大多是不言自明的，因?yàn)槟銜?huì)在畫(huà)布上實(shí)時(shí)看到你的編輯結(jié)果，請(qǐng)隨意玩一下。請(qǐng)記住，對(duì)于高效的工作流程，理解CSS選擇器將非常有益。更多關(guān)于設(shè)計(jì)窗格部分的內(nèi)容!

　　3、要素：共同點(diǎn)

　　好吧，也許不是那么常見(jiàn)......水平規(guī)則肯定是，但我們需要更多地談?wù)凥TML en Video元素。

　　該HTML元素可用于從其他應(yīng)用程序添加自定義的代碼段或出口。這可以是CoffeeCup應(yīng)用程序，如Web Form Builder， Responsive Content Slider或第三方應(yīng)用程序。為了不干擾頁(yè)面上的其他元素，顯示占位符視覺(jué)。我們希望在不久的將來(lái)在下一版本的BB中更新它。

　　該視頻元素允許在頁(yè)面中嵌入視頻響應(yīng)。確實(shí)，響應(yīng)是因?yàn)榇蠖鄶?shù)其他視頻嵌入不會(huì)自動(dòng)調(diào)整到不同的屏幕寬度!

　　目前，您可以嵌入來(lái)自最重要的視頻服務(wù)的視頻。如果您認(rèn)為我們應(yīng)該添加一個(gè)，請(qǐng)使用幫助下的“評(píng)價(jià)此應(yīng)用程序”功能，并在評(píng)論中告訴我們我們可以為您做些什么。

　　4、元素：互動(dòng)

　　組中的元素通常在與訪問(wèn)者或用戶交互之后執(zhí)行和動(dòng)作。一個(gè)按鈕鏈接可以打開(kāi)一個(gè)菜單，揭示隱藏的元素或顯示模態(tài)對(duì)話框。它還可以將用戶帶到不同的位置，頁(yè)面，站點(diǎn)或完全不同的站點(diǎn)。組件(見(jiàn)下文)通常包含此交互行為。

　　例如，表單容器和提交按鈕可用于構(gòu)建自定義HTML Paypal支付按鈕。它還可以包含在Input下拉列表下找到的其他表單元素。請(qǐng)注意，表單(元素)可以連接 - 設(shè)計(jì)窗格中提供了此輸入。但是，表單腳本或創(chuàng)建功能完整的表單超出了此應(yīng)用程序的范圍。為此，我們參考Web Form Builder(即將推出令人興奮的消息......)。

　　在社會(huì)圖標(biāo)都可以用來(lái)建立在社交網(wǎng)絡(luò)跟蹤和允許訪港共享信息。選擇“設(shè)計(jì)”窗格上的“關(guān)注”或“共享”選項(xiàng)(對(duì)于支持這些選項(xiàng)的網(wǎng)絡(luò))，然后填寫(xiě)各種選項(xiàng)。

　　5、元素：布局

　　布局元素提供對(duì)頁(yè)面布局的更精細(xì)控制。它們還用于構(gòu)建具有特定角色功能的元素或組的邏輯組，例如頁(yè)腳或卡組件。

　　本次網(wǎng)格單元會(huì)給出確切的相同的控制整體的引導(dǎo)電網(wǎng)，但該頁(yè)面的一個(gè)子集內(nèi)。可以將此元素添加到列(甚至容器)以在該部分中創(chuàng)建自定義布局。正如可以重新配置主網(wǎng)格子網(wǎng)格一樣，例如，列寬可以在斷點(diǎn)處改變。這些更改也在“布局”窗格中進(jìn)行管理。

　　列表容器是無(wú)序列表，每個(gè)列表項(xiàng)都是它自己的容器。它們通常用于構(gòu)建導(dǎo)航組件。

　　容器通常用作相關(guān)元素的“包裝”。在創(chuàng)建卡片(組件)時(shí)，容器通常會(huì)封裝一個(gè)或多個(gè)文本元素，一個(gè)圖像，一個(gè)按鈕，有時(shí)還包含帶有其他元素的子容器。我們將在“組件”部分中更詳細(xì)地介紹這一點(diǎn)。

　　鏈接Container的 功能與容器完全相同，但包含在標(biāo)簽中，使其成為一個(gè)大的鏈接元素。