Bootstrap Builder是一款實用的原型設(shè)計軟件。這款軟件擁有多款實用小工具，可定制的Bootstrap組件和符號同步，支持從屏幕上的任何位置抓取顏色，并將它們組織成可重復使用的調(diào)色板。功能非常豐富實用，可以幫助用戶簡單快速的進行創(chuàng)建，感興趣的朋友千萬不要錯過了。

功能介紹

1、CSS控件

通過簡單的可點擊控件，充分利用CSS的全部設(shè)計能力

2、使用P表示和性能

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

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

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

4、印刷完美

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

5、定位控件

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

6、易于布局管理

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

使用方法

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

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

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

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

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

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

　　2、5個控制窗格。

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

　　4、工具欄

　　二、工作區(qū)

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

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

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

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

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

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

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

　　三、控制窗格

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

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

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

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

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

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

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

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

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

　　四、內(nèi)容第一

　　“內(nèi)容”窗格

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

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

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

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

　　1、元素：文字

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

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

　　可以通過在文本編輯模式下鍵入或粘貼文本塊來替換占位符文本。Tripple單擊文本元素將啟動文本編輯器?；蛘撸梢允褂?ldquo;設(shè)計”窗格上的“編輯”按鈕或使用右鍵單擊菜單。

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

　　2、元素：圖像

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

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

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

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

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

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

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

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

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

　　3、要素：共同點

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

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

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

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

　　4、元素：互動

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

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

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

　　5、元素：布局

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

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

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

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

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