[研究]ASP.NET, bootstrap 3.4.1 升級 5.3.3 時 bootstrap.css 覆寫與否測試

[研究]ASP.NET, bootstrap 3.4.1 升級 5.3.3 時 bootstrap.css 覆寫與否測試

2024-11-08x

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

********************************************************************************

【都不覆寫】

略看一下，版面疑似正常。

但功能有問題，左邊選單，無法展開；收合、展開功能故障。

********************************************************************************

【都覆寫】

整個版面嚴重變化。

********************************************************************************

bootstrap.css  3.4.1 版和 5.3.3 版比較，改的非常大，幾乎全改

********************************************************************************

bootstrap menu 3.x 升級 5.x 要改甚麼 ?

Bootstrap 5.x 相對於 3.x 有很多的變化，需要修改的地方也較多。以下是一些主要的修改點：

• 移除 jQuery 依賴：Bootstrap 5.x 移除了對 jQuery 的依賴，改為使用純 JavaScript。
• CSS 類別名稱變更：Bootstrap 5.x 中一些 CSS 類別名稱被修改了，例如 .navbar-default 改為 .navbar-light，.panel-default 改為 .card-default 等等。
• 移除不必要的元素：Bootstrap 5.x 中一些不必要的元素被移除了，例如 .navbar-brand 元素中的 data-toggle="collapse" 屬性等等。
• 格線系統變更：Bootstrap 5.x 中的格線系統有所變更，新增了 .row-cols-{breakpoint}-{number} 類別，可以更方便地調整列中的列數。
• 新增元素：Bootstrap 5.x 中新增了一些元素，例如 .offcanvas、.toast、.spinner-border 等等。

總之，Bootstrap 5.x 相對於 3.x 的變化較大，需要仔細地檢查和修改程式碼。建議參考 Bootstrap 5.x 官方文件進行修改。

********************************************************************************

bootstrap 3.x 升級 5.x 主要的修改中，與選單的張開、收合有關的CSS屬性是甚麼 ?

在 Bootstrap 3.x 和 4.x 中，選單的張開、收合是使用 .collapse 和 .in 這兩個 CSS 類別來實現的。但在 Bootstrap 5.x 中，這兩個 CSS 類別被棄用了，改為使用 .collapse 和 .show 這兩個 CSS 類別來實現選單的張開、收合。

具體來說，如果你想要讓一個選單項目（例如 .navbar-collapse）在點擊時展開，可以使用以下程式碼：

<div class="navbar-collapse collapse">   <!-- 選單內容 --> </div>

然後使用 JavaScript（或者純 CSS）來動態添加 .show 類別，例如：

document.querySelector('.navbar-collapse').classList.add('show');

這樣就可以實現選單的展開了。注意，由於 Bootstrap 5.x 移除了對 jQuery 的依賴，所以如果你使用的是 jQuery，則需要修改相應的程式碼。

********************************************************************************

舉例，Bootstrap 3.x 和 4.x 中，選單的張開、收合如何使用 .collapse 和 .in ?

再舉例，改成 Bootstrap 5.x，範例要如何修改 ?

在 Bootstrap 3.x 和 4.x 中，使用 .collapse 和 .in 這兩個 CSS 類別來實現選單的張開、收合。以下是一個範例：

<div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse1">Collapsible panel</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body">Panel Body</div> <div class="panel-footer">Panel Footer</div> </div> </div> </div>

在這個範例中，使用 .collapse 類別來實現選單的折疊效果，使用 .in 類別來指定選單預設為展開狀態。

在 Bootstrap 5.x 中，使用 .collapse 和 .in 這兩個 CSS 類別已經被棄用，改為使用 .collapse 和 .show 這兩個 CSS 類別。以下是一個將上述範例修改為 Bootstrap 5.x 的範例：

<div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible panel </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> Panel Body </div> <div class="accordion-footer"> Panel Footer </div> </div> </div> </div>

在這個範例中，使用 .collapse 類別來實現選單的折疊效果，使用 .show 類別來指定選單預設為展開狀態。同時，使用 data-bs-toggle="collapse" 和 data-bs-target="#collapseOne" 來實現選單的展開和收合，使用 data-bs-parent="#accordionExample" 來指定父元素的 ID，以實現多個選單互不干擾的效果。

********************************************************************************

對於 Content\bootstrap.css，bootstrap 3.x 升級 5.x 主要修改了甚麼 ?

Bootstrap 5.x 中對於 Content\bootstrap.css 文件進行了多項修改，主要包括以下幾點：

• 移除了對 IE 8 和 IE 9 的支援。
• 移除了部分過時和不常用的樣式。
• 更新了顏色、字體和間距等方面的設計。
• 使用了更多的自定義屬性（例如 --bs-*）來實現更靈活的樣式定制。
• 移除了部分過時的 CSS 類別，例如 .glyphicon 和 .panel 等，並新增了一些新的 CSS 類別，例如 .dropup 和 .position-sticky 等。

此外，在 Bootstrap 5.x 中，Content\bootstrap.css 文件的結構和命名也有所調整，例如：

• 使用了 :root 偽類來定義全局 CSS 變量。
• 將樣式定義分為不同的區塊，例如 .reboot、.base、.typography 和 .utilities 等。
• 將 .container 和 .container-fluid 的樣式定義移至獨立的文件 Content\containers.css 中。

總體來說，Bootstrap 5.x 中對於 Content\bootstrap.css 文件進行了大量的優化和調整，使得它更加現代化、靈活且易於使用。

********************************************************************************

bootstrap 3.x 升級 5.x 過程，若保留  Content\bootstrap.css 會發生甚麼問題 ?

若您保留 Bootstrap 3.x 中的 Content\bootstrap.css 文件並直接升級到 Bootstrap 5.x，可能會發生以下幾個問題：

• 兼容性問題：Bootstrap 5.x 中有些樣式類別的命名可能已經變更，且有些類別已被刪除或更改了樣式定義，因此直接使用舊版的 Content\bootstrap.css 文件可能會導致兼容性問題。
• 錯誤的樣式定義：由於 Bootstrap 5.x 中對樣式定義進行了大量的修改和優化，因此舊版的 Content\bootstrap.css 文件可能包含一些過時或不正確的樣式定義，這可能會導致頁面顯示錯誤的樣式。
• 缺少新功能：Bootstrap 5.x 中新增了許多新的樣式類別和功能，這些新功能可能需要使用新的樣式定義才能正確顯示。如果您仍然使用舊版的 Content\bootstrap.css 文件，則可能會缺少這些新功能。

總之，為了確保順利升級到 Bootstrap 5.x，建議您不要保留舊版的 Content\bootstrap.css 文件，而是使用最新版的文件，或者根據需要進行必要的修改和優化。

********************************************************************************

bootstrap 3.x 升級 5.x 後，Visual Studio 要置換方案中那些文字成為新文字 ?

若您將一個使用 Bootstrap 3.x 開發的網站升級到 Bootstrap 5.x，建議您在 Visual Studio 中進行以下修改：

• 將 bootstrap.css 替換為 bootstrap.min.css：在您的網站代碼中將所有引用 bootstrap.css 的地方改為引用 bootstrap.min.css，這是 Bootstrap 5.x 中的壓縮版本。
• 將 bootstrap-theme.css 替換為 bootstrap.min.css：在您的網站代碼中將所有引用 bootstrap-theme.css 的地方改為引用 bootstrap.min.css，這是 Bootstrap 5.x 中的壓縮版本。
• 更新樣式類別：Bootstrap 5.x 中新增了一些新的樣式類別，並有些類別的命名方式也有所調整。因此，請將您的代碼中所有舊版 Bootstrap 的樣式類別替換為對應的 Bootstrap 5.x 樣式類別。
• 更新 JavaScript 插件：Bootstrap 5.x 中一些 JavaScript 插件的用法和 API 有所變更，因此請更新您的代碼以符合最新的 API 要求。
• 更新圖標字體：Bootstrap 5.x 中移除了 Glyphicons 字體圖標，建議使用其他的圖標庫，例如 Font Awesome 等。

總之，在進行 Bootstrap 3.x 到 Bootstrap 5.x 的升級過程中，您需要仔細檢查您的代碼，將舊版的元素、樣式類別和 JavaScript 插件替換為對應的 Bootstrap 5.x 元素、樣式類別和 JavaScript 插件，以確保您的網站能夠正常運作。

********************************************************************************

有工具可以幫忙自動修改 or 找到 Bootstrap 3.x 升級 5.x 後需要手動修改的部分嗎 ?

Bootstrap 3.x 到 5.x 的升級是一個相對複雜的過程，並且可能需要對代碼進行大量修改。目前，並沒有任何一種工具可以完全自動化這個過程，但有些工具可以幫助您找到需要修改的部分，並提供一些提示和建議，以簡化升級過程。

以下是幾種可能有用的工具：

• Bootstrap Upgrade Tool：Bootstrap 官方提供的升級工具，可以將您的 Bootstrap 3.x 代碼轉換為 Bootstrap 4.x 或 5.x 代碼。這個工具可以幫助您找到需要手動修改的部分，並提供一些提示和建議。請注意，這個工具不是完全自動化的，您仍然需要手動修改一些部分。
  註：Migrating to v5 · Bootstrap v5.0
  https://getbootstrap.com/docs/5.0/migration/
• Bootlint：這是一個 Bootstrap HTML 驗證器，可以幫助您檢查您的代碼是否符合 Bootstrap 的最佳實踐和建議。這個工具可以幫助您找到一些需要修改的部分，並提供一些提示和建議。
• VS Code Extension：有些 Visual Studio Code 的擴展可以幫助您進行 Bootstrap 3.x 到 5.x 的升級，例如 Bootstrap 3 to 4 Upgrade，可以自動將一些常見的代碼更改為 Bootstrap 4.x 或 5.x 的版本。這個工具仍然需要您手動檢查和修改一些部分，但可以節省一些時間和工作量。

需要注意的是，這些工具仍然需要您仔細檢查和修改您的代碼，以確保您的網站能夠正常運作。因此，在升級過程中，建議您仔細閱讀 Bootstrap 官方的文檔和指南，並遵循最佳實踐和建議，以確保您的網站能夠正常運作。

********************************************************************************

哪個 Visual Studio Code Extension 可幫助 Bootstrap 3.x 到 5.x 的升級

您可以使用 "Bootstrap 4 Upgrade" 擴展程式幫助升級 Bootstrap 3.x 到 4.x。 該擴展程式提供了一個命令，可以將您的 HTML、CSS 和 JavaScript 代碼升級到 Bootstrap 4.x 的版本。

至於升級到 Bootstrap 5.x，目前似乎還沒有相應的 Visual Studio Code Extension，但您可以參考 Bootstrap 官方文件中提供的升級指南，手動進行升級。這可能需要進行一些程式碼調整，以使您的代碼與 Bootstrap 5.x 版本兼容。

********************************************************************************

你建議 bootstrap 從 3.x 升級 4.x, 再從 4.x 升級到 5.x ; 或者直接從 3.x 升級到 5.x 呢 ?

我建議您直接從 Bootstrap 3.x 升級到 5.x，而跳過 Bootstrap 4.x。這是因為 Bootstrap 4.x 做了很多重大的更改，包括移除了一些類、引入了新的佈局工具、更改了許多組件的外觀和行為等。這些更改可能需要您重新學習 Bootstrap 的某些方面，而且如果您已經習慣了 Bootstrap 3.x 的使用方式，可能會感到比較困難。

而 Bootstrap 5.x 與 3.x 相比，更像是一次較小的更新，只是在原有的基礎上進行了一些改進和更新，包括優化了網格系統、改進了表單控件、增加了一些新的組件等。因此，從 3.x 直接升級到 5.x 可能會更加順暢和高效。

當然，如果您正在使用 Bootstrap 4.x 並且已經適應了它的使用方式，那麼升級到 5.x 也是可行的。不過，如果您已經習慣了 Bootstrap 3.x 的使用方式，那麼直接跳過 4.x 並直接升級到 5.x 可能更加方便。

********************************************************************************

(完)

相關