在這篇文章中，我們將看到一個 Bootstrap 站點的佈局 展示這個開源框架的驚人功能。 在 以前的文章 我們已經安裝了一個開發環境和必要的插件來促進我們的工作。
請記住，作為內容經理 Linux Adictos 它不允許我插入我上傳到 GitHub 的範例程式碼。要下載它們，您必須在您的發行版上安裝 Git 包，然後編寫以下命令：
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
您需要定期運行這兩個命令來下載新文件。
分析代碼
現在在文件資源管理器中使用 VSCodium 打開 example2.html。 （用右鍵打開）我們看到以下內容：
- 在第 1 行中，我們告訴瀏覽器文檔的類型，以便它知道如何呈現它。
- 第 2 行指示網站的語言，它向瀏覽器指示如何表示某些字符，並向搜索引擎指示有助於定位的內容的語言。 在我們的代碼中，它被定義為 es，但也有區域變體，例如來自西班牙的西班牙語 es_ES 或來自阿根廷的西班牙語 es_AR。
- 從第 3 行開始，我們有一個位於標籤之間的元數據容器是. 元數據提供有關文檔的信息。 在我們的示例中：
- 第 4 行表示用於字符編碼的標準。 也許您有時會看到菱形內顯示的不是重音字符或特殊符號，而是一個問號。 這是因為瀏覽器使用了不正確的編碼。 第 8 行的語句通過顯式聲明來避免這種情況。
- 在第 5 行，我們告訴瀏覽器它應該如何適應不同的屏幕格式。
- 我們在第 6 行設置的標題將顯示在瀏覽器的頂部欄和搜索引擎中。
- 在第 7 行，我們告訴瀏覽器在哪裡可以找到與樣式相關的 Bootstrap 框架元素。
- 容器從第 10 行開始。 正文包括網頁內容和引導腳本的鏈接，這些腳本將為我們的網站提供交互性。
- 第 13 行表示文檔的結尾。
Bootstrap 站點的佈局
Bootstrap 站點佈局的關鍵概念
正如我們在之前的文章中所說， Bootstrap 採用移動優先的方法。 當應用這種方法時，設計是在考慮最小屏幕尺寸的設備上完成的，然後添加層以使其適應隨後的尺寸。
在這裡，我們必須考慮兩個關鍵概念：
- 斷點。
- 媒體諮詢。
斷點指示從哪個屏幕寬度修改佈局。, 媒體查詢應用基於某些瀏覽器和操作系統特徵的樣式參數。 換句話說，每個斷點都會有一個對應的樣式。
Bootstrap 帶有六個預定義的斷點，可以由更高級的程序員修改。 默認點是：
- 超小：沒有預設標識符，適用於寬度小於 576 像素的屏幕。
- 小：用 sm 標識，用於 576 像素以上的屏幕。
- 中：用 md 標識，用於 768 像素以上的屏幕。
- 長度：標識為 lg 用於 992 像素以上的屏幕。
- 超長：它具有標識符 lg，並將樣式應用於 1200 像素的屏幕。
- Extra extra long：標有 xxl 標識符，用於將設計應用於 1400 像素以上的屏幕。
這些尺寸不是隨便選擇的 每個斷點都可以包含寬度為 12 的倍數的容器。 它們也不針對特定設備，而是適應不同類別的設備和屏幕尺寸。
在不同的屏幕尺寸中，我們找到了容器。 這些負責在特定設備或圖形窗口中託管、填充和對齊站點的內容。
;