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

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

　　Bootstrap Builder的工作流程和界面與Responsive Site設計師和Foundation Framer非常相似。

軟件介紹

　　1、CSS控件：通過簡單的可點擊控件，充分利用CSS的全部設計能力

　　2、使用P表示和性能：Picture元素提供特定于設備的圖像

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

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

　　5、定位控件：從顯示和絕對定位，清除或浮動，到令人驚嘆的Flexbox控件。

　　6、易于布局管理：添加，刪除，合并和移動行和列。調(diào)整跨度寬度，偏移量和推拉設置。

游戲特色

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

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

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

使用方法

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

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

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

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

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

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

　　2、5個控制窗格。

　　3、寬度滑塊和斷點管理器。

　　4、工具欄

　　二、工作區(qū)

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

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

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

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

　　文本編輯器處于活動狀態(tài)時，可以在適當?shù)奈恢镁庉嬑谋驹亍＞庉嬈骺梢酝ㄟ^多種方式激活。右鍵單擊文本元素將彈出一個上下文菜單，可以訪問常用功能，包括文本編輯。

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

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

　　三、控制窗格

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

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

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

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

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

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

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

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

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

　　四、內(nèi)容第一

　　“內(nèi)容”窗格

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

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

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

　　符號 是特殊元素或元素組，在整個項目中保持完全相同。更新符號的一個實例時，項目中的所有其他實例也將更改。例如，這允許通過一次編輯更新所有頁面的頁腳。

　　1、元素：文字

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

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

　　可以通過在文本編輯模式下鍵入或粘貼文本塊來替換占位符文本。Tripple單擊文本元素將啟動文本編輯器。或者，您可以使用“設計”窗格上的“編輯”按鈕或使用右鍵單擊菜單。

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

　　2、元素：圖像

　　添加圖片元素時，最初使用占位符圖像。這允許快速實驗或原型設計，而無需立即花費時間來尋找，優(yōu)化等真實圖像。

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

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

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

　　您會注意到新添加的圖像不會超過200px。可以使用max-width控件在“設計”窗格上更改此設置。

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

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

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

　　控件大多是不言自明的，因為你會在畫布上實時看到你的編輯結(jié)果，請隨意玩一下。請記住，對于高效的工作流程，理解CSS選擇器將非常有益。更多關于設計窗格部分的內(nèi)容!

　　3、要素：共同點

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

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

　　該視頻元素允許在頁面中嵌入視頻響應。確實，響應是因為大多數(shù)其他視頻嵌入不會自動調(diào)整到不同的屏幕寬度!

　　目前，您可以嵌入來自最重要的視頻服務的視頻。如果您認為我們應該添加一個，請使用幫助下的“評價此應用程序”功能，并在評論中告訴我們我們可以為您做些什么。

　　4、元素：互動

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

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

　　在社會圖標都可以用來建立在社交網(wǎng)絡跟蹤和允許訪港共享信息。選擇“設計”窗格上的“關注”或“共享”選項(對于支持這些選項的網(wǎng)絡)，然后填寫各種選項。

　　5、元素：布局

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

　　本次網(wǎng)格單元會給出確切的相同的控制整體的引導電網(wǎng)，但該頁面的一個子集內(nèi)?？梢詫⒋嗽靥砑拥搅?甚至容器)以在該部分中創(chuàng)建自定義布局。正如可以重新配置主網(wǎng)格子網(wǎng)格一樣，例如，列寬可以在斷點處改變。這些更改也在“布局”窗格中進行管理。

　　列表容器是無序列表，每個列表項都是它自己的容器。它們通常用于構(gòu)建導航組件。

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

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