Bootstrap Studio提供網(wǎng)頁設(shè)計(jì)功能，可以幫助用戶在軟件上設(shè)計(jì)各種網(wǎng)站，軟件提供豐富的編輯功能，可以在軟件直接設(shè)計(jì)html頁面，可以編輯文本，可以添加組件，可以設(shè)計(jì)動(dòng)畫，可以調(diào)整頁面窗口大小，可以附加圖像，可以設(shè)計(jì)圖標(biāo)，可以添加交互圖圖表，可以設(shè)計(jì)響應(yīng)式頁面，功能非常豐富，用戶啟動(dòng)主程序就可以進(jìn)入設(shè)計(jì)界面，可以選擇查看官方的引導(dǎo)指南，也可以直接新建一個(gè)設(shè)計(jì)項(xiàng)目開始工作，為用戶設(shè)計(jì)網(wǎng)頁提供更多幫助，這里小編推薦的是Bootstrap Studio免費(fèi)版，適合個(gè)人學(xué)習(xí)使用！

軟件功能

　　編輯代碼

　　對(duì)于某些事情，拖放是不夠的。這就是為什么 Bootstrap Studio 可以讓您在需要時(shí)完全控制標(biāo)記的原因。您可以在我們的Sublime Text類編輯器中導(dǎo)入和編輯CSS，SASS，JavaScript和HTML。

　　專為引導(dǎo)程序 3、4 和 5 而構(gòu)建

　　Bootstrap Studio 知道如何構(gòu)建有效的 Bootstrap 頁面并自動(dòng)編寫正確的 HTML。它支持 Bootstrap 3、Bootstrap 4 和 Bootstrap 5，并且可以將您的設(shè)計(jì)從一個(gè)轉(zhuǎn)換為另一個(gè)。

　　高級(jí) CSS 和 SASS 編輯器

　　我們先進(jìn)的CSS編輯界面支持自動(dòng)建議和規(guī)則驗(yàn)證，并在任何給定時(shí)間顯示活動(dòng)和繼承的規(guī)則。

　　JavaScript 編輯

　　在我們的Sublime Text類編輯器中編寫JavaScript。您的所有更改都會(huì)與預(yù)覽同步，因此您可以編寫代碼并試用，而無需重新加載瀏覽器。

　　網(wǎng)頁編輯

　　使用我們強(qiáng)大的自定義代碼組件，您可以直接編寫 HTML，而無需通過我們的拖放界面。您還可以在需要時(shí)將頁面的任何部分轉(zhuǎn)換為自定義代碼。

　　導(dǎo)入現(xiàn)有網(wǎng)站

　　如果您有以前開發(fā)過的網(wǎng)站，則可以將其導(dǎo)入。只需將 HTML、CSS、JS 文件和圖像拖放到 Bootstrap Studio 中，它們就會(huì)被添加到您的項(xiàng)目中。

　　連接外部編輯器

　　更喜歡在編輯器中編寫 CSS？沒關(guān)系！只需單擊一下，您就可以連接visual studio Code，Sublime Text，Atom，IntelliJ等。

　　鍵盤快捷鍵

　　Bootstrap Studio全面支持鍵盤快捷鍵，可讓您大大加快工作流程。

　　一鍵發(fā)布

　　您可以將您的設(shè)計(jì)導(dǎo)出為靜態(tài)網(wǎng)站，也可以一鍵將其發(fā)布到我們的下一代托管平臺(tái)。它提供HTTPS，自定義域，密鑰，并且完全免費(fèi)！

　　網(wǎng)格工具

　　該應(yīng)用程序具有用于處理引導(dǎo)網(wǎng)格的專用工具。輕松創(chuàng)建列、調(diào)整列的大小和偏移列，并應(yīng)用響應(yīng)式可見性類。

　　平滑動(dòng)畫

　　在我們的應(yīng)用程序中，您可以創(chuàng)建在瀏覽器滾動(dòng)或懸停時(shí)觸發(fā)的流暢 CSS 動(dòng)畫。我們還有一個(gè)特殊的視差組件，用于漂亮的圖像背景。

　　谷歌網(wǎng)絡(luò)字體

　　Bootstrap Studio與Google Webfonts集成，為您提供了一種導(dǎo)入和管理字體的簡(jiǎn)便方法。字體系列名稱甚至可以在我們的 css 編輯器中自動(dòng)建議。

　　命令面板

　　使用我們的命令面板加快您的工作流程！按 Ctrl/Cmd+P 并創(chuàng)建/打開文件，插入具有類似 Emmet 的 CSS 語法的組件，生成 Lorem ipsum 文本并觸發(fā)菜單命令。

　　主題和圖標(biāo)

　　該應(yīng)用程序具有許多內(nèi)置的Bootstrap主題，圖標(biāo)字體，模板和組件，您可以將它們組合成美觀而獨(dú)特的設(shè)計(jì)。

軟件特色

　　智能拖放

　　Bootstrap Studio 知道哪些 Bootstrap 組件可以相互嵌套，并為您提供建議。它會(huì)自動(dòng)生成漂亮的 HTML，看起來就像是由專家手寫的。

　　創(chuàng)建您自己的組件

　　您可以將設(shè)計(jì)片段提取為自定義組件，并準(zhǔn)備好將它們放入您創(chuàng)建的任何設(shè)計(jì)中。您還可以將這些組件導(dǎo)出為文件并共享它們。

　　在線圖書館

　　如果您需要我們庫中不存在的組件，只需單擊組件面板中的“在線”選項(xiàng)卡。在那里，您會(huì)發(fā)現(xiàn)由社區(qū)構(gòu)建和共享的數(shù)千個(gè)組件。你也可以 上傳您自己的。

　　鏈接組件

　　這是一項(xiàng)強(qiáng)大的功能，允許您同步組件，因此更改一個(gè)組件將自動(dòng)更改另一個(gè)組件。這對(duì)于您需要跨頁面更新的頁眉和頁腳等內(nèi)容特別有用。

　　漂亮的模板

　　該應(yīng)用程序帶有許多高級(jí)，完全響應(yīng)的模板，您可以自定義這些模板。每個(gè)模板都由多個(gè)頁面和小部件組成，您可以選擇并匹配到完美的網(wǎng)站中。

　　界面

　　Bootstrap Studio有一個(gè)美麗而強(qiáng)大的界面，它是圍繞拖放的簡(jiǎn)單性構(gòu)建的。這使其成為原型設(shè)計(jì)和設(shè)計(jì)網(wǎng)頁和應(yīng)用程序的完美工具。

破解方法

　　1、將Bootstrap Studio直接安裝到電腦，等等軟件安裝結(jié)束

　　2、將破解文件app.asar復(fù)制到C:Users%username%AppDataLocalProgramsbstudioresources替換

　　3、打開軟件就看見一引導(dǎo)內(nèi)容，點(diǎn)擊Getting Started Guide立即打開官方的引導(dǎo)教程

　　4、Bootstrap Studio 窗口分為多個(gè)功能區(qū)域：

　　組件面板 – 它由工作室和在線選項(xiàng)卡組成。包含所有可用組件，您可以將這些組件拖放到舞臺(tái) （6） 和概述 （2） 上。

　　概述面板 – 它為您提供頁面上所有組件的快速概覽。此處的組件可以拖動(dòng)和重新排序。

　　編輯器面板 – 包含 HTML 和樣式選項(xiàng)卡。您可以單擊以展開它，并將其分離為單獨(dú)的窗口。

　　設(shè)計(jì)面板 – 包含設(shè)計(jì)的所有頁面、CSS、SASS 文件和圖像。雙擊時(shí)，頁面將在舞臺(tái) （6） 和其他資源中打開 - 在編輯器面板 （3） 中打開。

　　選項(xiàng)面板 – 顯示所選組件的選項(xiàng)，并為您提供輕松的可視化自定義控件。

　　舞臺(tái) - 這是您看到頁面預(yù)覽，拖放組件和編輯文本的地方。

　　您可以按照主導(dǎo)航中的一些教程了解有關(guān)面板的更多信息。

官方教程

　　CSS 編輯

　　Bootstrap Studio 通過使用“外觀”面板和組件選項(xiàng)，為您提供了一種完全可視化的方式來構(gòu)建網(wǎng)頁。但是，如果您需要額外的控制和可自定義性，則可以直接在編輯器面板中編寫CSS代碼。

　　內(nèi)置在Bootstrap Studio中的CSS編輯器對(duì)于任何使用過瀏覽器開發(fā)人員工具的人來說都很熟悉。您可以在“樣式”選項(xiàng)卡中編輯 CSS 代碼，也可以在“設(shè)計(jì)”面板中創(chuàng)建的 CSS 文件中編輯 CSS 代碼。

　　#“樣式”選項(xiàng)卡

　　樣式是“編輯器”面板中兩個(gè)不可關(guān)閉的選項(xiàng)卡之一。它為您提供了設(shè)計(jì)中與當(dāng)前所選組件匹配的CSS塊列表。這是一種方便的方法，可以發(fā)現(xiàn)哪些 CSS 塊正在影響所有文件中的組件以及應(yīng)用程序生成的代碼。

　　請(qǐng)注意，應(yīng)用生成的樣式（標(biāo)記為“引導(dǎo)程序”）是鎖定的，用戶不可編輯。您可以通過單擊塊的三點(diǎn)菜單并將其復(fù)制到您自己的樣式表中來覆蓋它們。

　　#CSS 文件

　　創(chuàng)建一個(gè)新的 CSS 文件很容易。只需右鍵單擊“樣式”標(biāo)簽并選擇菜單。New > CSS File

　　要導(dǎo)入現(xiàn)有的CSS文件，只需將其拖放到應(yīng)用程序窗口中即可。它將被解析并添加到您的設(shè)計(jì)中。

　　您可以根據(jù)需要?jiǎng)?chuàng)建/導(dǎo)入任意數(shù)量的文件，并將它們組織到文件夾中以使其更易于管理。

　　#CSS 文件順序

　　使用多個(gè)CSS文件時(shí)，您遲早會(huì)遇到需要控制文件優(yōu)先級(jí)的情況。要更改應(yīng)用 CSS 文件的順序，請(qǐng)右鍵單擊“樣式”組，然后選擇 。Include Order

　　在這里，您可以根據(jù)需要對(duì)文件重新排序，然后單擊“保存”按鈕。這些更改將應(yīng)用于設(shè)計(jì)中的所有頁面。

　　注意

　　雖然它沒有顯示在對(duì)話框中，但 Bootstrap 框架 css 文件始終首先包含在頁面中，然后是樣式表。

　　#能見度

　　右鍵單擊CSS文件時(shí)，您將獲得幾個(gè)用于控制其可見性的選項(xiàng)。

　　啟用/禁用 - 使用此選項(xiàng)，您可以禁用樣式表，使其不適用于您的任何頁面。

　　能見度。。- 這將打開一個(gè)對(duì)話框，讓您選擇應(yīng)將樣式表添加到設(shè)計(jì)的哪些頁面。

　　#鏈接外部 CSS

　　您可以在 Bootstrap Studio 中鏈接外部托管的樣式表。只需右鍵單擊樣式組并選擇 。在對(duì)話框中，您可以將URL粘貼到外部托管的樣式表中，該URL將被添加到您的設(shè)計(jì)中。Link External CSS

　　選項(xiàng)菜單

　　當(dāng)您單擊每個(gè)CSS塊右上角的三個(gè)點(diǎn)時(shí)，您將看到一個(gè)帶有選項(xiàng)的菜單。您有復(fù)制、移動(dòng)和刪除等基本操作，還可以選擇添加媒體查詢和啟用/禁用塊。

　　編寫媒體查詢

　　媒體查詢是創(chuàng)建響應(yīng)式布局的重要工具。在 Bootstrap Studio 中，媒體查詢是逐塊分配的。為此，請(qǐng)從“選項(xiàng)”菜單（塊右上角的三個(gè)點(diǎn)）中進(jìn)行選擇。Add Media Query

　　查詢將預(yù)填充 或，具體取決于階段的當(dāng)前寬度。min-widthmax-width

　　提示

　　如果您發(fā)現(xiàn)我們的 CSS 編輯器過于嚴(yán)格，您可以隨時(shí)切換到編寫 SASS 代碼。

　　CSS 變量

　　Bootstrap Studio 內(nèi)置了對(duì)CSS 自定義屬性 （打開新窗口）（也稱為變量）。它們?yōu)槟峁┝艘环N簡(jiǎn)單的方法，可以在整個(gè)設(shè)計(jì)中重復(fù)使用特定顏色，并從中心位置進(jìn)行更改。

　　Bootstrap 框架主要使用自定義屬性進(jìn)行顏色和字體自定義。下面您可以看到 Bootstrap 5 的一些可用變量，每個(gè)變量都以前綴開頭。bs-

　　定義自己的自定義屬性或覆蓋內(nèi)置屬性非常簡(jiǎn)單。您可以通過在其中一個(gè) css 文件中編寫如下代碼來做到這一點(diǎn)：

　　要使用CSS變量，只需將它們包含在您需要該值的位置即可。這樣，如果您選擇將來進(jìn)行更改，它將自動(dòng)應(yīng)用于所有位置。

　　您還可以在“外觀”面板中所有與顏色相關(guān)的選項(xiàng)下找到對(duì)已定義變量的有用引用。

　　在線發(fā)布您的網(wǎng)站

　　引導(dǎo)工作室網(wǎng)站 （打開新窗口）是我們強(qiáng)大的在線發(fā)布網(wǎng)站的托管平臺(tái)。它非常快，為您提供HTTPS，密碼保護(hù)，托管自定義域的能力，最重要的是，該應(yīng)用程序的所有用戶都是免費(fèi)的！

　　發(fā)布您的設(shè)計(jì)非常簡(jiǎn)單 - 只需創(chuàng)建和配置一個(gè)新站點(diǎn)，然后點(diǎn)擊應(yīng)用程序中的“發(fā)布”按鈕。在本文中，我們將指導(dǎo)您完成整個(gè)過程。

　　注意

　　Bootstrap Studio Sites并不是在線上傳網(wǎng)站的唯一方式。您可以簡(jiǎn)單地將您的設(shè)計(jì)導(dǎo)出為靜態(tài)網(wǎng)站，并通過FTP將其上傳到標(biāo)準(zhǔn)的虛擬主機(jī)帳戶。但是，我們的平臺(tái)要方便得多，我們邀請(qǐng)您嘗試一下。

　　#創(chuàng)建網(wǎng)站

　　第一步是在我們的平臺(tái)上創(chuàng)建一個(gè)免費(fèi)網(wǎng)站。您可以從 Bootstrap Studio 中的菜單中執(zhí)行此操作。這將打開“管理網(wǎng)站”對(duì)話框。Cloud > Manage Websites

　　我們沒有配置任何網(wǎng)站，因此我們按“添加網(wǎng)站”按鈕。這將打開“創(chuàng)建網(wǎng)站”對(duì)話框。

　　您有兩種類型的域名可供選擇：

　　xxx.bss.design 子域。這很簡(jiǎn)單，是我們?cè)诒窘坛讨惺褂玫倪x項(xiàng)。

　　自定義域名。這樣，您可以將自己的域名指向我們的托管服務(wù)。這有點(diǎn)復(fù)雜，我們已經(jīng)在自定義域教程中介紹了它。example.com

　　如上圖所示，您還有其他一些選項(xiàng)可供選擇：

　　子域。您希望您的網(wǎng)站在其下展示的 xxx.bss.design 子域。

　　自動(dòng)刪除。這是您可以啟用的可選設(shè)置。有了它，您可以將網(wǎng)站設(shè)置為自動(dòng)刪除，例如，如果您希望創(chuàng)建一個(gè)臨時(shí)網(wǎng)站來向客戶展示您的設(shè)計(jì)，但您不希望它長(zhǎng)期存在。您可以將此項(xiàng)設(shè)置為從不。

　　密鑰保護(hù)。如果您希望限制您的網(wǎng)站，以便只能在輸入密鑰后查看它。在我們的密碼保護(hù)教程中了解有關(guān)此選項(xiàng)的更多信息。您可以稍后通過編輯站點(diǎn)來更改密鑰或啟用/禁用該選項(xiàng)。

　　要?jiǎng)?chuàng)建您的網(wǎng)站，只需點(diǎn)擊 創(chuàng)建 按鈕，它將顯示在您的網(wǎng)站列表中。您可以從通過單擊右側(cè)的 3 個(gè)點(diǎn)觸發(fā)的菜單中編輯和刪除站點(diǎn)。刪除站點(diǎn)將為新站點(diǎn)釋放一個(gè)插槽。

　　#發(fā)布網(wǎng)站

　　完成上述步驟后，您現(xiàn)在擁有一個(gè)可以發(fā)布到的完全正常運(yùn)行的網(wǎng)站。發(fā)布本身很簡(jiǎn)單。只需打開您要在線發(fā)布的設(shè)計(jì)，然后點(diǎn)擊右上角的“發(fā)布”按鈕。

　　如果這是您第一次發(fā)布設(shè)計(jì)，應(yīng)用程序?qū)⑻崾灸x擇要發(fā)布到的網(wǎng)站。

　　只需選擇要發(fā)布到的站點(diǎn)，然后點(diǎn)擊“發(fā)布”按鈕。該應(yīng)用程序使用高效的數(shù)據(jù)傳輸協(xié)議，并僅上傳自上次發(fā)布以來所做的更改。這使得這個(gè)過程快如閃電。

　　就這樣，您的網(wǎng)站在線并托管在我們強(qiáng)大的托管平臺(tái)上。

　　#通過 SFTP 發(fā)布

　　如果您希望將您的網(wǎng)站發(fā)布到其他托管服務(wù)提供商，您可以利用 Bootstrap Studio 通過 SFTP 發(fā)布的能力。為此，您首先需要設(shè)置 SFTP 連接。

　　從“管理網(wǎng)站”對(duì)話框（從 Bootstrap Studio 中的菜單中訪問它）中，選擇選項(xiàng)卡。Cloud > Manage WebsitesSFTP Connections

　　然后按下按鈕。這將打開“創(chuàng)建連接”對(duì)話框。Add Connection

　　在這里，您需要輸入以下內(nèi)容：

　　主機(jī) - 這是 SFTP 服務(wù)器的 IP 地址或域/子域。

　　目錄 - 這是 Bootstrap Studio 連接到服務(wù)器后文件將寫入的目錄路徑。它可能是根目錄，或者類似于或的東西。請(qǐng)查閱托管服務(wù)提供商的文檔或通過 filezilla 連接并復(fù)制目錄路徑。/public_htmlwww

　　端口 - 運(yùn)行 SSH 服務(wù)的端口。默認(rèn)情況下為 22。

　　用戶名 - 您的 SFTP 或 SSH 用戶名。

　　身份驗(yàn)證 - 支持三種類型的身份驗(yàn)證：

　　密碼 - 只需輸入您的托管服務(wù)提供商為您生成的密碼。

　　SSH 密鑰 - 這是一種更安全的身份驗(yàn)證方法。它涉及生成公鑰/私鑰對(duì)并將其預(yù)配在服務(wù)器上。在這里，您可以選擇要使用的私鑰文件。如果您的密鑰有密碼短語，您可以在此處輸入。

　　SSH 代理 - 這是最安全且推薦的方法。如果您的計(jì)算機(jī)上運(yùn)行了SSH代理應(yīng)用程序，Bootstrap Studio將連接到該應(yīng)用程序進(jìn)行身份驗(yàn)證。這樣，應(yīng)用就不需要訪問您的 SSH 密鑰或密碼。如果您使用的是 macOS 或 Linux，則您已經(jīng)運(yùn)行了一個(gè) SSH 代理，只需將 SSH 密鑰添加到其中。如果你在Windows上，你將需要運(yùn)行Pageant，它隨Putty SSH客戶端一起提供。

　　填寫詳細(xì)信息后，您可以單擊該按鈕，Bootstrap Studio 將嘗試登錄到您的 SFTP 服務(wù)器。Test Connection

　　筆記

　　Bootstrap Studio 僅支持 SFTP 連接。不支持舊版 FTP 協(xié)議。

　　私鑰的 SFTP 密碼和密鑰僅存儲(chǔ)在本地 Bootstrap Studio 副本中。它們不會(huì)上傳到我們的服務(wù)器。這意味著在重新安裝應(yīng)用程序或設(shè)置新計(jì)算機(jī)時(shí)，您需要再次輸入這些設(shè)置。

　　由于 SFTP 協(xié)議運(yùn)行在 SSH 之上，因此您可以設(shè)置 SFTP 發(fā)布到您具有 SSH 訪問權(quán)限的任何服務(wù)器（除非您的管理員為您的 SSH 帳戶禁用了 SFTP;請(qǐng)嘗試通過 FileZilla 連接以查看您的服務(wù)器是否確實(shí)支持 SFTP）。

　　Bootstrap Studio 僅支持 OpenSSH 格式的私鑰。以 Putty 格式生成的密鑰將不起作用，需要轉(zhuǎn)換。

　　保存連接后，您可以在發(fā)布設(shè)計(jì)時(shí)從下拉列表中選擇它。

　　有了這個(gè)，您現(xiàn)在可以發(fā)布到任何SFTP服務(wù)器，只需單擊一下即可使您的網(wǎng)站在線！

更新日志

　　版本5.9.2

　　2022年2月9日

　　新

　　一個(gè)新的引導(dǎo)主題組被添加到BS5設(shè)計(jì)的外觀中。它使您可以輕松地覆蓋所選組件及其子組件的Bootstrap的顏色和字體變量。

　　新的“重置面板”條目已添加到“視圖”菜單中。它可以讓您快速將應(yīng)用程序窗口重置為其初始狀態(tài)。

　　改進(jìn)

　　圖表組件現(xiàn)在支持堆疊條形圖。只需在數(shù)據(jù)集中填寫“堆棧ID”字段即可對(duì)其進(jìn)行分組。

　　單擊CSS編輯器中的Create按鈕現(xiàn)在可以生成更好的選擇器。

　　固定的，固定的

　　當(dāng)URL中省略index.html時(shí)，瀏覽器預(yù)覽現(xiàn)在提供正確的頁面。

　　重命名或移動(dòng)圖像時(shí)，SCSS文件中的引用將正確更新。

　　如果可以省略的話，站點(diǎn)地圖不會(huì)將“index.html”添加到頁面URL中。

　　小錯(cuò)誤修復(fù)。

　　版本5.9.1

　　2022年1月18日

　　改進(jìn)

　　SFTP連接現(xiàn)在有名稱，并且可以重復(fù)。

　　固定的

　　修復(fù)了阻止某些設(shè)計(jì)打開的問題。

　　對(duì)于帶有偽選擇器的塊，現(xiàn)在可以正確檢測(cè)CSS覆蓋。

　　版本5.9.0

　　2022年1月11日

　　新

　　SFTP支持在這里！您現(xiàn)在可以配置到SFTP服務(wù)器的連接，并通過單擊發(fā)布您的網(wǎng)站。從應(yīng)用程序菜單中，單擊“云>管理網(wǎng)站”進(jìn)行配置。

　　改進(jìn)

　　CSS編輯器得到了改進(jìn)。它現(xiàn)在支持模擬：hover、：active、：focus和其他狀態(tài)，并能更好地檢測(cè)CSS變量和overriden屬性。

　　按鈕、表格、選擇和輸入現(xiàn)在有一個(gè)“無樣式”選項(xiàng)，允許您在沒有任何引導(dǎo)類的情況下使用基本標(biāo)記。

　　添加了一個(gè)“導(dǎo)航（HTML）”組件，它為您提供了標(biāo)準(zhǔn)的導(dǎo)航HTML元素。

　　從Word和其他富文本編輯器粘貼得到了改進(jìn)，現(xiàn)在可以生成樣式正確的文本。

　　谷歌字體集成更新了最新的系列和樣式。

　　固定的，固定的

　　修復(fù)了在某些情況下導(dǎo)致“屬性”面板不顯示的錯(cuò)誤。

　　現(xiàn)在只有在必要時(shí)才包含bs-init.js腳本。