開發人員犯的 10 個最常見的引導錯誤

已發表: 2022-03-11

乍一看，Bootstrap 似乎很簡單。 事實上，開始使用 Bootstrap 並不難。 有一個寫得很好的 Bootstrap 文檔，其中包含許多 HTML、CSS 和 JavaScript 代碼示例。 那裡提到了大多數重要的陷阱，但仍有一些錯誤非常微妙，或者原因不明確。 因為 Bootstrap 看起來非常簡單好用，所以很多開發者都爭先恐後地進入這個框架，所以錯誤就發生了。

引導錯誤

我們將看看開發人員開始使用 Bootstrap 時最常見的 10 個錯誤、問題和誤解。

常見的引導錯誤 #1：對框架的基本誤解

人們對 Bootstrap 框架存在一些基本的誤解。 這可能是因為它沒有在 Bootstrap 網站上明確宣傳，或者因為人們沒有花足夠的時間閱讀文檔。 事實是，有時開發人員最終會在角落裡做錯事，然後責怪框架。 因此，讓我們弄清楚一些基本事實。

Bootstrap 是全面的，但它既不龐大也不龐大。 Bootstrap 與包含許多常見 UI 組件的基本 HTML 和 CSS 設計模板捆綁在一起。 這些包括排版、表格、表單、按鈕、字形圖標、下拉菜單、按鈕和輸入組、導航、分頁、標籤和徽章、警報、進度條、模式、選項卡、手風琴、輪播等等。 您可以選擇其中的一些，並使用其默認配置快速生成一個 UI，該 UI 可以處理多種瀏覽器、設備和分辨率，格式很好。

Bootstrap 不會為您做所有事情，但它提供了一組合理的默認值可供選擇，它將幫助開發人員更多地專注於開發工作而不是擔心設計，並幫助他們快速啟動和運行一個漂亮的網站。 它允許快速進行原型設計，但它並不限制開發人員。

它具有足夠的可擴展性，任何人都可以對其進行調整以適應他或她的需要。 一開始，Bootstrap 有一些限制，當時擴展默認樣式很複雜。 但隨著框架的成熟，可擴展性也有所提高。

常見的 Bootstrap 錯誤 #2：認為您不需要了解 CSS 即可使用 Bootstrap，並且您不需要設計師

如果你認為如果你使用 Bootstrap 就不需要了解 CSS，那你就大錯特錯了。 任何前端開發者都需要學習 CSS 和 HTML5。 Bootstrap 正在從開發人員的肩上移除許多棘手的 CSS 部分（如供應商特定的前綴），並提供基本的默認樣式，但您仍然需要了解 CSS。 你不需要知道媒體查詢是如何工作的，但你需要了解響應式設計是如何工作的。 Bootstrap 並不是要教你 CSS，但如果你願意，它可以提供幫助。 在 LESS 或 SASS 中檢查源代碼是一個很好的起點。

在類似的主題上，您不需要成為設計師，並且您可以爭辯說您不需要使用 Bootstrap 的設計師。 但是，如果可能，請使用設計師的幫助。 針對 Bootstrap 的一個常見抱怨是所有 Bootstrap 站點看起來都相似，並且很容易最終得到一個看起來與任何其他 Bootstrap 站點一樣的網站。 但這不一定是真的。 網絡上數以百萬計的網站正在使用 Bootstrap 構建。 可以在 Bootstrap Expo 上找到如何實現不同設計的精彩展示，它收集了使用 Bootstrap 構建的網站。 看一看，獲得一些靈感，然後開始構建自己的設計變體。

常見的引導錯誤 #3：更改引導 CSS 文件

為了簡單明了：不要修改bootstrap.css文件。

如果您對bootstrap.css文件進行更改，事情會變得非常複雜。 當您想要升級 Bootstrap 文件時，整個設計將會中斷。 您可以在自己的樣式表中覆蓋默認引導顏色、樣式、邊距、填充等所有內容。 根本不需要接觸bootstrap.css樣式表。

不知道 LESS 或 SASS？ 沒問題，您可以創建自己的 CSS 文件並從原始bootstrap.css樣式表中覆蓋您想要的任何內容。 正如我們在前面的錯誤中提到的，了解 CSS 是強制性的。 創建你的新 CSS 選擇器，在 HTML 中使用它，只要你在 Bootstrap 樣式之後聲明你的 CSS 類，你的定義就會覆蓋 Bootstrap 默認值。

還想了解更多並深入了解嗎？ 我強烈建議並鼓勵您這樣做。 使用 Bootstrap LESS 源代碼。 您將更好地了解正在發生的事情，以及如果您使用 LESS 源而不是靜態 CSS 會發生什麼。

常見的 Bootstrap 錯誤 #4：使用 Bootstrap 提供的一切

如前所述，Bootstrap 是全面的。 它提供了許多 UI 組件、HTML 和 CSS 設計模板以及 JavaScript 插件。 但是，請有選擇性。 您不必使用 Bootstrap 的所有功能。

對於插件來說尤其如此。 只選擇有意義的插件，不要使用所有插件，因為它看起來既漂亮又酷。 您的網站很容易被過度使用。 考慮一開始您根本不包含bootstrap.js文件，並僅使用純 HTML 和 CSS 創建站點。 然後，只根據特定角色的需要，一一添加組件。

常見的引導錯誤 #5：濫用模式提示

Bootstrap modals 提供靈活的對話框提示，具有最低要求的功能，並且帶有智能默認值。 儘管 modal 易於使用並提供豐富的自定義功能，但我們需要牢記一些事項以避免常見的誤用。

同時顯示多個模式提示

Bootstrap 不支持重疊模式。 當時只能看到一個模態。 可以實現一次顯示多個模式，但需要編寫自定義代碼才能正確處理。

Bootstrap 模態出現在背景下

如果模態容器或其父元素具有固定或相對位置，則模態將無法正確顯示。 始終確保模態容器及其父元素沒有應用任何特殊定位。 最佳實踐是將模態的 HTML 放置在結束</body>標記之前，或者甚至更好地放置在開始<body>標記之後的文檔中的頂級位置。 這是避免其他組件影響模態框外觀和功能的最佳方式。

移動設備上的模態

在使用虛擬鍵盤在移動設備上處理模式時，開發人員需要注意一些注意事項。 對於 iOS 設備尤其如此，其中存在渲染錯誤，在觸發虛擬鍵盤時不會更新固定元素的位置。 這不是由 Bootstrap 處理的，因此由開發人員以針對相關應用程序的最佳方式處理代碼中的這些情況。

常見 Bootstrap 錯誤 #6：文件輸入按鈕組件問題

Bootstrap 沒有文件上傳按鈕的指定組件。 使用以下示例代碼可以實現僅使用 HTML 和 CSS 的簡單而優雅的解決方案：

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>
 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

如何獲得類似效果的例子很多。 此代碼示例是從 Cory LaViska 借來的，在他的網站上，您可以閱讀有關此問題的更詳細說明。 還有一個擴展示例，其中包含更多功能，它使用了額外的 JavaScript 代碼。

常見的引導錯誤 #7：過度使用 JavaScript 並忽略“數據”屬性

設計師，或者只是 JavaScript 開發新手，可以非常輕鬆地投入到 Web 開發中，並僅使用 HTML、CSS 和 Bootstrap 創建網頁。 如果他們不擅長編碼，他們可能會陷入濫用 JavaScript 或過於復雜的陷阱。 重要的是要聲明所有 Bootstrap 插件都可以純粹通過標記 API 使用，而無需編寫一行JavaScript。 這是 Bootstrap 的一流 API，在使用插件時應該是您的首要考慮因素。

例如，我們可以在不編寫任何 JavaScript 的情況下激活模態對話框，只需在按鈕或錨點等控制器元素上設置data-toggle="modal" ，並使用data-屬性傳遞其他參數。 在下面的代碼中，我們的目標是 ID #myModal的 HTML 代碼。 我們已經指定當用戶使用data-backdrop選項在模態之外單擊時，模態不會關閉，並且我們禁用了使用data-keyboard選項關閉模態的轉義鍵事件。 全部在一行 HTML 代碼中：

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

常見的 Bootstrap 錯誤 #8：忽略簡化 Bootstrap 開發的工具

錯誤會發生，每個開發人員都會偶爾犯。 這是不可避免的，但重要的是你如何處理錯誤。 Bootstrap 團隊通過觀察問題跟踪器注意到人們經常犯一些錯誤。 這就是他們試圖自動化開發過程的原因。 結果是 Bootlint，一個用於 Bootstrap 項目的 HTML linting 工具。 Bootlint 既可以在瀏覽器中使用，也可以通過 Node.js 從命令行使用，它會自動檢查 Bootstrap 網頁中的許多常見 Bootstrap 使用錯誤。 將 Bootlint 添加到您的 Web 開發工具鏈中可以消除許多通常會減慢項目開發速度的常見錯誤。

如果您想為 Bootstrap 項目做出貢獻，值得一試 Rorschach。 Rorschach 是一個 Bootstrap 拉取請求健全性檢查機器人，它對每個新的拉取請求運行一些檢查。 如果完整性檢查失敗，它會在拉取請求上留下一條信息性評論，解釋錯誤以及如何修復它，然後關閉拉取請求。

常見引導錯誤 #9：IE8 和舊版瀏覽器不兼容問題

Bootstrap 旨在在最新的桌面和移動瀏覽器中發揮最佳性能。 較舊的瀏覽器可能會以不同的樣式顯示組件和元素，但一切都應該功能齊全。 支持包括 Internet Explorer 8 和 9，需要注意的是，這些瀏覽器不完全支持某些 CSS3 屬性和 HTML5 元素。

要獲得對 Internet Explorer 8 和其他舊版瀏覽器的完全支持，您需要使用 CSS3 Media Queries Respond.js 的 polyfill、支持使用 HTML5 元素的 HTML 5 shim 以及 HTML 頭部中的適當 IE <meta>標籤確保 IE 未在兼容模式下運行。 最後你的 HTML 頭應該是這樣的：

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

對於Respond.js ，請注意開發和生產環境中的以下警告。

常見的引導錯誤 #10：忽略最佳實踐

Stack Overflow 上的一個常見問題是如何讓 Bootstraps 菜單下拉菜單在懸停時打開，而不是在點擊時打開。 雖然這個問題的解決方案並不復雜，只使用 CSS 就可以完成，但不建議這樣做。 這個特性是故意被排除在框架之外的，這是開發團隊做出的設計決定。 同樣，這是可以做到的，但需要了解影響並了解存在最佳實踐，尤其是對於移動優先框架。 這個特定問題背後的原因是，讓事情在懸停時工作並不能幫助擁有觸摸設備的用戶。 在此類設備上沒有懸停，只有觸摸事件。 因此，這在任何支持觸摸的設備上都無法正常工作。

引導錯誤結論

我希望這個簡短的 Bootstrap 指南可以幫助您避免一些常見的錯誤，清除常見的誤解，並幫助您掌握大部分框架。 請記住，Bootstrap 並不適合所有人，也不適合每個項目。 在選擇框架時，您需要花一些時間閱讀文檔，並且您需要花一些時間來使用該框架以更好地了解和了解它的工作原理。 這對 Bootstrap 也有效。

閱讀文檔，使用示例進行遊戲和試驗，掌握基礎知識，並享受創造新的漂亮設計的樂趣。