使用 Bootstrap 構建響應式網站的初學者指南 - 第 1 部分

已發表: 2016-08-08

最後更新於 2019 年 6 月 5 日

本文旨在教育 Web 開發人員使用 Bootstrap 框架的基本原理來快速有效地創建響應式網站。 這降低了生產成本，並允許公司授權其開發人員輕鬆管理和構建網站和頁面。 我將介紹下載 Bootstrap 框架的過程以及使用該框架進行 Web 開發工作的優勢。

什麼是引導程序？

super bowl buzz dashboard

根據 Bootstrap 官方網站 (getbootstrap.com) 的說法，“Bootstrap 是最流行的 HTML、CSS 和 JavaScript 框架，用於在 web 上開發響應式和移動優先項目”。 簡單來說，Bootstrap 是一個非常簡單的框架，可以幫助加快前端 Web 開發並吸引不同技能水平的開發人員。

為什麼使用引導程序？

為各種媒體（包括大型顯示器、常規顯示器、手機和平板電腦）設計網站的潛力使 Bootstrap 極具吸引力，並且是製作 Web 內容的明智選擇。 諸如 Bootstrap 之類的框架提供了可以輕鬆更改的通用功能，以優化網站的各種功能和響應能力，而無需硬編碼。 簡而言之，與 WordPress 網站不同，它是構建網站並且仍然具有自定義能力的最簡單方法之一。

那！ 公司為世界各地的代理機構提供迷人而有效的網頁設計服務。 詳細了解我們的白標網頁設計服務以及我們如何幫助您和您的客戶創建或改善他們的網絡形象。 今天就開始吧！

如何開始

要開始使用 Bootstrap，您必須訪問 Bootstrap 官方網站 (http://getbootstrap.com/)。 Bootstrap 是一個開源項目，在 GitHub 上託管、開發和維護； 這使用戶可以訪問源代碼並了解框架作為構建網站的工具的全部範圍。

當前版本的 Bootstrap (v3.3.6) 有三種下載方式：可以下載 Bootstrap 的編譯版本，可以下載 Bootstrap 源代碼，可以將 Bootstrap 框架從 Less 移植到 Sass。 在這種情況下，如果您是初學者，我建議您只下載已編譯的 Bootstrap 版本。 如果你想在 Rails、Compass 或 Sass-only 項目中集成 Bootstrap 框架，那麼你應該將下載從 Less 移植到 Sass。

下載 Boostrap 文件後，您應該解壓縮壓縮文件夾以查看編譯後的 Bootstrap 框架的結構。 查看下面的文件結構：

現在，您可以將這些文件放入您正在處理的任何 Web 項目的文件系統中，並開始使用 Bootstrap 來設計和構建您想要的項目。 有關 Bootstrap 功能的更多信息，我們將在本文的第 2 部分中詳細介紹，請隨時訪問 getboostrap.com 網站以查看可通過框架訪問的組件、CSS 功能和 JavaScript 函數。

響應式設計

響應式設計是 Bootstrap 框架的標誌性特徵之一； 使用 Bootstrap 進行響應式開發的能力使開發人員能夠開發一個可以在所有查看平台上正確格式化的網站。 很多時候，一個網站可以設計得很好，並且用戶體驗只在一個特定的平台或屏幕尺寸上是最佳的。 Bootstrap 在解決這些問題方面做得非常出色，它允許開發人員在較小的屏幕上閱讀時將網頁的某些列分配為特定大小。 在製作響應式網站時，Bootstrap 考慮了四種類型的設備：

That! Company White Label Services

  • 超小型設備（智能手機 <768px）
  • 小型設備（平板電腦 >= 768px）
  • 中型設備（台式機 >= 992px）
  • 大型設備（桌面 >= 1200 像素）

開發者可以為上述這些類添加標籤，以將某些網頁內容設置為縮小、展開、隱藏或在某些平台上可見。 這對於簡化構建網站外觀的過程非常有幫助。

網格系統

Bootstrap 有一個網格系統，它是允許框架用於設計響應式網站的主要功能。 Bootstrap 中的所有行都必須放在一個容器類中，然後可以將後續行定義為一定的大小。

以下是網格系統的符號示例：

  • 預定義的行類產生一行
  • 在該行中，第二個類指定“col-md-6”
  • 這意味著該類正在生成一個跨越網頁的 6 列的列
  • “md”指定這只發生在小於或等於 768 像素的中型設備或桌面上。
  • “偏移”類意味著這些列將留空。 在這種情況下，偏移量為 3，因此三列將留有空格以填充一些內容。
    該網格系統允許開發人員快速定義內容部分，並在內容之間設置適當的間距，以實現乾淨、響應式的設計。

Bootstrap 的挑戰

直接下載所有 Bootstrap 文件時，JavaScript 和 CSS 文件的大小都很大。 在創建快速頁面時，這可能會帶來一些挑戰。 這是因為 Bootstrap 文件中的所有文件都沒有完全使用，這可能意味著下載不必要的數據可能會成為問題。 這可能會影響用戶體驗，因此請隨時訪問文章如何使用 Bootstrap 基礎來增強用戶體驗 (https://moz.com/ugc/how-to-use-bootstrap-) 更深入地檢查這一點增強用戶體驗的基礎知識）。

我希望你們都嘗試一下 Bootstrap，因為它是構建響應式和乾淨的網站設計的絕佳框架。 請繼續關注本系列的下一篇文章，了解更多關於 Bootstrap 的初級概念。

作者：Esme Vazquez，初級 Web 開發人員

Esme
製作人、藝術家、遊戲玩家、編碼員、網絡開發人員和博主； Esme 是內容管理博客網站 Medium 上最近的博客出版物 Indiellect 的創建者。 她目前的經驗在於網頁開發和遊戲開發； 她目前正在那里工作並接受 SEO 培訓！ 位於佛羅里達州利斯堡的公司，擔任他們的初級 Web 開發人員。 她渴望在未來製作描繪人類之美的電子遊戲。 如果有任何問題，請隨時在@EsmeVazquez18 上向她發送推文和/或在 LinkedIn 上添加她。