浮雲雅築: [研究]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 可能更加方便。

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

(完)

相關

浮雲雅築

2024年11月8日星期五

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

沒有留言:

張貼留言

2024年11月8日 星期五

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

沒有留言:

張貼留言

2024年11月8日星期五