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

功能介紹

1、CSS控件

通過簡(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è)置。

使用方法

　　如果您正在應(yīng)用程序中閱讀此內(nèi)容，那么您目前正在查看Bootstrap Builder中觀看次數(shù)最多的部分：實(shí)時(shí)畫布。畫布 在下圖中標(biāo)記為#1，是基于瀏覽器的工作區(qū)。一個(gè)主要優(yōu)點(diǎn)是，您正在創(chuàng)建的內(nèi)容，外觀和感覺與網(wǎng)站上實(shí)際發(fā)布的內(nèi)容相同。畫布主要用于實(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ì)過程最初集中在最左側(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)編碼，那么這將是顯而易見的。如果不放心，我們稍后會(huì)詳細(xì)介紹。

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

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

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

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

　　4、工具欄

　　二、工作區(qū)

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

　　此區(qū)域可視化網(wǎng)站訪問者在登錄頁(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)!

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

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

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

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

　　三、控制窗格

　　布局，內(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è)置(見下文)對(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)題，段落，按鈕，圖像和視頻(以及更多)等元素可以插入到畫布上的任何列中。

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

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

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

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

　　四、內(nèi)容第一

　　“內(nèi)容”窗格

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

　　選擇“內(nèi)容”窗格時(shí)，默認(rèn)情況下會(huì)打開最常用的“ 元素”子窗格。在此窗格中，您可以添加標(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í)例也將更改。例如，這允許通過一次編輯更新所有頁(yè)面的頁(yè)腳。

　　1、元素：文字

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

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

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

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

　　2、元素：圖像

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　列表容器是無序列表，每個(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è)大的鏈接元素。