Bootstrap 的檔案結構包括：預編譯的 Bootstrap下載編譯後的 Bootstrap 後，解壓縮 ZIP 檔案，您將看到以下檔案/目錄結構 -Bootstrap 原始碼Bootstrap 原始碼具有以下原始碼 -

要使用 Bootstrap，請按照以下步驟操作 - 下載 Bootstrap 的最新版本，從官方網站下載。到達頁面後，點選當前版本 4.1.1 的“下載”。點選上面的“下載”後，您有兩個選項：下載 Bootstrap - 點選此選項，您可以下載 Bootstrap CSS、JavaScript 和字型的預編譯和壓縮版本。不包括文件或原始原始碼檔案。下載原始碼 - 點選此選項，您可以直接從 GitHub 獲取最新的 Bootstrap LESS 和 JavaScript 原始碼。

Bootstrap 是一款簡潔、直觀且功能強大的移動優先前端框架，可以更快、更容易地進行 Web 開發。它使用 HTML、CSS 和 JavaScript。Bootstrap 由 Twitter 的 Mark Otto 和 Jacob Thornton 開發。它於 2011 年 8 月在 GitHub 上作為開源產品釋出。Bootstrap 的響應式設計，

Ionic 是一個針對構建混合移動應用程式的 HTML5 移動應用程式開發框架。可以將 Ionic 視為處理應用程式需要的所有外觀和感覺以及 UI 互動的前端 UI 框架。有點像“原生 Bootstrap”，但支援各種常見的原生移動元件、流暢的動畫和漂亮的設計。Ionic 框架需要原生包裝器才能在移動裝置上執行Ionic 僅針對移動裝置構建和測試。Internet Explorer 不支援 Ionic 的所有功能。對桌面和移動裝置使用單獨的應用程式。 閱讀更多

結合垂直/內聯欄位的 Bootstrap 表單 - 左側 右側 較長的表單 較短的表單 較短的表單 較短的表單 較短的表單 右側

要使用 HTML 建立表單，我們使用以下內容 - 詳細資訊： 學生姓名 考試日期和時間 要使用 jQuery 和 HTML 建立表單，請新增輸入型別文字，如下所示 - $form.append(''); 一個更好的例子是 - $myform = $(""); $myform.append(''); $('body').append($myform);

要更改導航欄顏色，請設定導航欄背景 - navbarBackground: #c79810 ; 設定導航欄背景高亮 - navbarBackgroundHighlight: #eab92d ; 設定導航欄文字顏色 - navbarText: #f9ed9d ; 設定導航欄連結顏色 - navbarLinkColor: #f9ed9d ;

要截斷表格行中的長文字，請使用以下 CSS - .table td.demo { max-width: 177px; } .table td.demo span { overflow: hidden; text-overflow: ellipsis; display: inline-block; white-space: nowrap; max-width: 100%; } 以下是 HTML - 這是一個演示文字，我們將其設定為長文字以進行演示。

要整合，請使用 Initializr。它是一個 HTML5 模板生成器。您還可以使用 Workless，這是一個開源的 HTML、CSS 和 JS 框架，可以更快地開發前端 Web 應用程式。Workless 使用 Font Awesome 網頁字型圖示，並允許您在專案中新增大量圖示。它可以自動為您設定表單樣式。

您可能已經注意到，每當您開啟下拉選單並在其他任何地方點選時，下拉選單都會關閉。透過使用以下程式碼，可以在點選後保持下拉選單開啟 - $('#myDropdown').on('hide.bs.dropdown', function () { return false; }); 另一種選擇是處理 click 事件 - click 事件也可以透過使用以下程式碼來處理。event.stopPropagation() 方法阻止事件冒泡到父元素。它阻止執行任何父事件處理程式 - $('#myDropdown .dropdown-menu').on({ "click":function(e) { e.stopPropagation(); } });