如何使用 Bootstrap 3 創建多個響應列
已發表: 2022-02-16
您想使用 Bootstrap 提高您的網站響應能力嗎？ Bootstrap 最重要的方面是它的 12 列移動優先網格系統。 這是您用來創建響應式佈局的方法。
在本視頻教程中，您將使用 Bootstrap 創建一個基本網站，並學習如何使用 Bootstrap 網格系統創建具有多列的響應式佈局。
在觀看教程之前
在您能夠按照下面的視頻教程學習如何創建自己的響應式列之前，您需要：
- 基本了解什麼是 Bootstrap
- 基本了解什麼是 Bootstrap 網格系統
- 將 Bootstrap 下載到您的硬盤
- 創建一個基本的 Bootstrap index.html 文件來構建
什麼是引導程序
- Bootstrap 是一個供 HTML、CSS 和 JavaScript 開發人員致力於網站響應能力的框架。
- 它包含已經為列、列表、導航、Web 表單和許多其他 Web 元素構建的響應式 CSS 樣式。
了解引導網格系統
- Bootstrap 網格系統將屏幕尺寸分為四種類型：超小、小、中和大。
- Extra-small 適用於手機。 Small 適用於平板電腦，例如 I-Pad。 Medium 用於桌面顯示器。 而 Large 僅適用於較大的桌面顯示器。
- 為了幫助您微調這四種類型屏幕的響應能力，Bootstrap 將 Web 查看設備的寬度劃分為 12 列網格系統。
- 這四種 Bootstrap Grid 類型中的每一種只有在您為其分配自己指定的 CSS 類時才會響應。
- 例如，要讓 div 響應超小型設備，div 必須有自己的 Bootstrap .col-xs-<number_of_columns_to_take> 類，如 <div class="col-xs-6">。
下載引導程序
- 轉到 getboostrap.com 並單擊“下載 Bootstrap”按鈕：
- 您將看到“入門”頁面。 單擊“下載引導程序”按鈕：
- 將此文件保存到您的計算機硬盤驅動器，無論您想要的任何地方。 它不必保存到 Web 服務器。
- 解壓縮此文件並將提取的文件夾重命名為“bootstrap”。
準備你的基本引導 index.html 頁面
步驟1。 創建您的引導程序 index.html 文件
- 回到“Getting Started”（http://getbootstrap.com/getting-started/#download）頁面，點擊右側邊欄的“Basic Template”鏈接：
- 您將看到“基本模板”代碼。 點擊“複製”按鈕複製代碼：
- 將“基本模板”代碼粘貼到文本編輯器中，並將其作為 index.html 保存在保存“引導程序”文件夾的同一文件夾中。 它現在將成為您的 Bootstrap 網站首頁。
- 打開新創建的 index.html 並查看您的基本 Bootstrap 網站：
- 在文本編輯器中打開 index.html 文件，在 <body> 和 <h1> 標籤之間添加 <div class="container"> (1)。 在結束 </h1> 標記 (2) 之後關閉這個新 div 並保存文件：
- 檢查頁面前端並註意“Hello World！” 不再粘在頁面邊緣，現在稍微向右移動，使其看起來更整潔。 您分配給此 div 的 Bootstrap 的“容器”類已在此文本中添加了一些邊距：
- 返回到您的 index.html 文件。 在 <h1> 和 </h1> 標記之間替換“Hello World！” 到“Trusthub”。 保存文件並檢查您的網站前端。
第2步。 添加一些內容和側邊欄
- 返回您的 index.html 文件並在 <h1>Trustub</h1> 代碼下方復制粘貼以下代碼：
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>
- 返回您的網站前端。 刷新它。 您現在應該看到您的內容和“我們的團隊”側邊欄，還沒有列式響應式佈局：
- 返回 getbootstrap.com 網站並在頂部菜單上單擊“CSS”按鈕：
- 在側邊欄上單擊“網格系統”按鈕：
- 向下滾動頁面到“網格選項”部分 (1)，並註意 Bootstrap 12 列網格系統及其四種屏幕尺寸類型、寬度和指定的 CSS 類前綴 (2)：
- 如果 Bootstrap 網格系統選項對您沒有意義，請不要擔心。 當您開始在您的網站上玩它們時，它會在一秒鐘內為您匯集在一起 。
- 再次打開 index.html 文件，在 <div class="row"> 下方，為現有的 <div> 輸入類“col-md-9”。 您的新 div 現在應該看起來像“div class="col-md-9">：
- 現在轉到您的 div，它位於 <h2>“Out Team”標題的正上方，並為其指定“col-md-3”引導網格 CSS 類。 保存文件：
- 返回您的站點以查看此更改的實際效果。 按鍵盤上的 F5 鍵刷新您的網站。 現在您將看到您的內容區域和側邊欄並排放置。
- 您的內容 div 現在佔用了 Bootstrap 網格 12 列中的 9 個可用列（佔整個桌面屏幕寬度的 75%）。 並且您的側邊欄需要 3 個 Bootstrap 網格 12 列（整個桌面屏幕寬度的 25%）：
傑出的！ 您現在都可以按照下面的視頻教程進行操作了。 讓我們開始吧。
恭喜！ 您剛剛學習瞭如何使用 Bootstrap 創建具有多列的響應式網頁佈局。 您想了解更多有關 Bootstrap 的信息嗎？ 如果是，請訪問我們的 OSTraining YouTube 頻道並觀看“引導框架教程”。