[研究]Bootstrap 4 升級 Bootstrap 5 後本來沒出現的字出現了
2024-10-24
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
ASP.NET, WebForm, bootstrap 4 .6.2升級到 5.3.3 後，網頁上左上角出現 "跳到主要內容"，本來沒出現的，搜尋發現 MasterPage.master 有一行 ，請問該如何修改 ?
<a href="#center-menu" id="gotocenter" title="跳到主要內容" tabindex="1" class="sr-only sr-only-focusable">跳到主要內容</a> |
ChatGPT 說：
在升級 Bootstrap 版本後，Bootstrap 5 中移除了部分和可見性相關的工具類別，例如 sr-only 和 sr-only-focusable。這些類別在 Bootstrap 4 中可以隱藏元素並在聚焦時顯示，但在 Bootstrap 5 中已被替代。
要處理這個問題，可以用以下方式來調整這段 HTML 以確保在 Bootstrap 5.3.3 中維持原本的效果：
1. 以新的 Bootstrap 5 類別取代 sr-only 和 sr-only-focusable： 在 Bootstrap 5 中，可以改用 visually-hidden 類別來達到隱藏的效果。若希望在聚焦時顯示，可以在 CSS 中自訂樣式。
2. 修改 HTML 和 CSS： 更新這段程式碼如下：
<a href="#center-menu" id="gotocenter" title="跳到主要內容" tabindex="1" class="visually-hidden-focusable">跳到主要內容</a>
|
3.新增自訂 CSS： 在 MasterPage 或 CSS 檔案中加入以下自訂樣式，確保在聚焦時可以顯示此連結：
.visually-hidden-focusable {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.visually-hidden-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
clip: auto;
white-space: normal;
}
|
這樣，這個「跳到主要內容」的連結會在頁面上隱藏，但在使用鍵盤導航時聚焦時會顯示，達到 Bootstrap 5 中的兼容效果。
********************************************************************************
visually-hidden-focusable 是 BootStrap 5 預設提供的 CSS ?
ChatGPT 說：
visually-hidden-focusable 並不是 Bootstrap 5 預設提供的 CSS 類別。在 Bootstrap 5 中，官方僅提供了 visually-hidden 類別來替代原本的 sr-only。這個類別可以將元素隱藏，但沒有包含在聚焦時顯示的功能。
要實現「聚焦顯示」的效果，需要手動新增 CSS，如我上面所示的 .visually-hidden-focusable。你可以將這段自訂 CSS 加入至專案中，以在聚焦時顯示隱藏的連結。
********************************************************************************
實際測試成功。
相關
沒有留言:
張貼留言