浮雲雅築: Bootstrap

顯示具有 Bootstrap 標籤的文章。顯示所有文章

2026年6月17日星期三

[研究]Bootstrap 3.4.1弱點漫談

[研究]Bootstrap 3.4.1弱點漫談

2026-06-17

NVD 是國家漏洞數據庫（National Vulnerability Database），由NIST （美國國家標準暨技術研究院）所維護的一個項目。

曾經發生記錄過的 Bootstrap 3.4.1 弱點

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

CVE-2024-6484

Published: 2024-07-11Rejected: 2025-08-01
https://nvd.nist.gov/vuln/detail/CVE-2024-6484
Rejected
This CVE has been marked Rejected in the CVE List. These CVEs are stored in the NVD, but do not show up in search results by default.
此 CVE 已在 CVE 清單中標記為「已拒絕」。這些 CVE 儲存在 NVD 中，但預設不會顯示在搜尋結果中。

https://www.cve.org/CVERecord?id=CVE-2024-6484
This was not a security issue in Bootstrap. Bootstrap’s JavaScript is not intended to sanitize unsafe or intentionally dangerous HTML. As such, the reported behavior fell outside the scope of Bootstrap’s security model, and the associated CVE has been rescinded.
這並非 Bootstrap 的安全問題。 Bootstrap 的 JavaScript 程式碼並非要清理不安全或故意包含危險程式碼的 HTML 內容。因此，所報告的行為超出了 Bootstrap 安全模型的範圍，相關的 CVE 編號已被撤銷。

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

CVE-2024-6485

https://nvd.nist.gov/vuln/detail/CVE-2024-6485
Not Scheduled
This CVE record is not being prioritized for NVD enrichment efforts due to resource or other concerns.
由於資源或其他方面的考慮，該 CVE 記錄不會被優先納入 NVD 增強工作。

https://www.cve.org/CVERecord?id=CVE-2024-6485
A security vulnerability has been discovered in bootstrap that could enable Cross-Site Scripting (XSS) attacks. The vulnerability is associated with the data-loading-text attribute within the button plugin. This vulnerability can be exploited by injecting malicious JavaScript code into the attribute, which would then be executed when the button's loading state is triggered.
Bootstrap 中發現了一個安全漏洞，可能導致跨站腳本攻擊 (XSS)。該漏洞與按鈕插件中的 data-loading-text 屬性有關。攻擊者可以透過向該屬性注入惡意 JavaScript 程式碼來利用此漏洞，當按鈕進入載入狀態時，這些程式碼將被執行。

攻擊成立通常需要同時滿足：

使用受影響的 Bootstrap 版本。
頁面存在 data-loading-text 屬性。
該屬性的內容可被攻擊者控制。
程式呼叫按鈕 Loading 功能（例如 .button('loading')）。
Bootstrap 將內容寫入 DOM 時未適當處理。

-----

若攻擊條件不成立，報告建議可寫

經程式碼檢查，專案未使用 Bootstrap Button Plugin 的 data-loading-text 功能，亦未呼叫 button('loading') API，因此 CVE-2024-6485 所描述之攻擊路徑不存在，評估為 Not Exploitable（不可利用）。

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

CVE-2024-6531
https://nvd.nist.gov/vuln/detail/CVE-2024-6531
NVD Published Date: 07/11/2024
NVD Last Modified: 08/01/2025
Rejected
This CVE has been marked Rejected in the CVE List. These CVEs are stored in the NVD, but do not show up in search results by default.
此 CVE 已在 CVE 清單中標記為「已拒絕」。這些 CVE 儲存在 NVD 中，但預設不會顯示在搜尋結果中。

https://www.cve.org/CVERecord?id=CVE-2024-6531
Published: 2024-07-11
Rejected: 2025-08-01
Rejected Reason: This was not a security issue in Bootstrap. Bootstrap’s JavaScript is not intended to sanitize unsafe or intentionally dangerous HTML. As such, the reported behavior fell outside the scope of Bootstrap’s security model, and the associated CVE has been rescinded.
拒絕理由：這並非 Bootstrap 的安全問題。 Bootstrap 的 JavaScript 並非設計用來清理不安全或故意包含危險內容的 HTML。因此，所報告的行為超出了 Bootstrap 安全模型的範圍，相關的 CVE 編號已被撤銷。

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

CVE-2025-1647

https://nvd.nist.gov/vuln/detail/CVE-2025-1647
Not Scheduled
This CVE record is not being prioritized for NVD enrichment efforts due to resource or other concerns.
由於資源或其他方面的考慮，該 CVE 記錄不會被優先納入 NVD 增強工作。

https://www.cve.org/CVERecord?id=CVE-2025-1647
Improper Neutralization of Input During Web Page Generation (XSS or 'Cross-site Scripting') vulnerability in Bootstrap allows Cross-Site Scripting (XSS).This issue affects Bootstrap: from 3.4.1 before 4.0.0.
Bootstrap 中存在網頁產生期間輸入處理不當（XSS 或「跨站腳本」）漏洞，允許跨站腳本攻擊 (XSS)。此問題影響 Bootstrap：4.0.0 之前的 3.4.1 版本。

https://www.herodevs.com/vulnerability-directory/cve-2025-1647?nes-for-bootstrap
This Medium-severity vulnerability is found in the Popover and Tooltip components of Bootstrap in versions greater than or equal to 3.4.1 and less than 4.0.0.
此中等嚴重性漏洞存在於 Bootstrap 的 Popover 和 Tooltip 元件中，版本大於等於 3.4.1 且小於 4.0.0。

對 ASP.NET WebForm，CVE-2025-1647 要成功利用，通常至少需要：

使用 Bootstrap 3.4.1 的 Tooltip 或 Popover。
設定 html:true。
攻擊者能控制 Tooltip/Popover 內容或頁面 HTML。
輸入未經 HtmlEncode。
攻擊者能注入造成 DOM Clobbering 的 HTML 元素。
瀏覽器成功讓 sanitizeHtml() 失效。
最後再注入可執行 JavaScript 的內容。

-----

若查到攻擊無法成立條件，報告建議可寫

CVE-2025-1647 影響 Bootstrap Tooltip 與 Popover 元件。

經檢視本系統原始碼：

1.系統引用 Bootstrap 3.4.1。

2,全專案搜尋結果未發現 Tooltip 元件相關使用方式：

* tooltip()

* data-toggle="tooltip"

3.全專案搜尋結果未發現 Popover 元件相關使用方式：

* popover()

* data-toggle="popover"

4.未發現 html 或 data-html="true" 等設定。

5.因未使用受影響元件，CVE-2025-1647 所描述之 sanitizeHtml() DOM Clobbering 攻擊路徑無法進入。

評估結果：

本系統不存在 CVE-2025-1647 之可利用攻擊面（Attack Surface），因此判定為 Not Affected。

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

Bootstrap 3.4.0 在 NVD 有列 1 個弱點
https://nvd.nist.gov/vuln/search#/nvd/home?cpeFilterMode=cpe&cpeName=cpe:2.3:a:getbootstrap:bootstrap:3.4.0:*:*:*:*:*:*:*&resultType=records

Bootstrap 3.4.1 在 NVD 有列 0 個弱點
https://nvd.nist.gov/products/cpe/search/results?namingFormat=2.3&keyword=bootstrap+3.4.1

https://nvd.nist.gov/products/cpe/detail/6D2FBAA4-7EB8-42ED-9BD3-6209BECA01CF?namingFormat=2.3&orderBy=CPEURI&keyword=bootstrap+3.4.1&status=FINAL

點下方 "View Vulnerabilities" 後
https://nvd.nist.gov/vuln/search#/nvd/home?cpeFilterMode=cpe&cpeName=cpe:2.3:a:getbootstrap:bootstrap:3.4.1:*:*:*:*:*:*:*&resultType=records

截至目前為止，NVD 並未將 Bootstrap 3.4.1 關聯任何已完成分析（Enriched）的 CVE，因此經 NVD 明確分析並確認影響 Bootstrap 3.4.1 的漏洞數量為 0。

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

注意，

某些掃描工具可能還會報告這些，因為該工具不知道 NVD 已經取消2個，掃描工具沒有修正更新。
沒取消的2個是 NVD 尚未完成分析，最後也可能 REJECT。
元件有弱點，不等於系統有弱點；因為可能並未使用有弱點的功能或屬性，攻擊條件無法成立。或有其他防護措施，該弱點無法發生。

(完)

2026年6月12日星期五

[研究]BootStrap 5.3.8(NuGet安裝)版本隱藏測試

[研究]BootStrap 5.3.8(NuGet安裝)版本隱藏測試

2026-06-12

下圖，預設 Wappalyzer 無法辨識 BootStrap 版本

下圖，看 HTML Source 可以辨識版本

(完)

2025年4月7日星期一

[研究]ASP.NET 請問 jquery.dataTables.min.js 和 dataTables.bootstrap.min.js 是甚麼套件的檔案？

[研究]ASP.NET 請問 jquery.dataTables.min.js 和 dataTables.bootstrap.min.js 是甚麼套件的檔案？

2025-04-07

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

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

ASP.NET, WebForm, 請問這2個檔案分別是甚麼套件的檔案 ?

~/Scripts/DataTables/jquery.dataTables.min.js

~/Scripts/DataTables/dataTables.bootstrap.min.js

ChatGPT 說：

這兩個檔案是 jQuery DataTables 套件及其 Bootstrap 整合樣式的 JavaScript 檔案，主要用於在 ASP.NET WebForm（或其他前端框架）中建立強大的 HTML 表格功能，例如排序、分頁、即時搜尋等。

各檔案說明：

1.~/Scripts/DataTables/jquery.dataTables.min.js

這是 DataTables 的主程式核心，由 jQuery 提供支援。
功能包含：資料表的排序、分頁、搜尋等互動功能。
套件名稱：DataTables
官方網站：https://datatables.net/

2.~/Scripts/DataTables/dataTables.bootstrap.min.js

這是 DataTables 與 Bootstrap 樣式整合的 JS 套件。
它不會改變核心邏輯，但會讓 DataTables 看起來符合 Bootstrap 的 UI 風格（按鈕、表格外觀等）。
此檔案是選配，用來讓 DataTables 與 Bootstrap (v3) 相容。
若你使用 Bootstrap 4 或 5，應改用對應版本的整合檔案（如 dataTables.bootstrap4.min.js）。

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

常見搭配檔案（補充）：

CSS：

<link rel="stylesheet" href="~/Content/DataTables/css/dataTables.bootstrap.min.css" />

JavaScript 載入順序建議：

<script src="~/Scripts/jquery-3.x.x.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.bootstrap.min.js"></script>

如果你是從 NuGet 或手動下載方式引入，可以確認是否安裝了以下任一套件：

NuGet 套件名稱（可能安裝來源）：

DataTables.Net
DataTables.Net.Bootstrap
DataTables.Mvc（若是 MVC 專案）

(完)

相關

[研究]系統使用有漏洞之舊版 DataTables 1.10.15 ( jquery.datatables 1.10.15) 版元件之處理
https://shaurong.blogspot.com/2025/04/datatables-11015-jquerydatatables-11015.html

[研究]ASP.NET 請問 jquery.dataTables.min.js 和 dataTables.bootstrap.min.js 是甚麼套件的檔案？
https://shaurong.blogspot.com/2025/04/aspnet-jquerydatatablesminjs.html

[研究]用 Libman 安裝 DataTables 1.9.4 ( jquery.datatables 1.9.4 ) 元件
https://shaurong.blogspot.com/2025/04/libman-datatables-194-jquerydatatables.html

[研究]ASP.NET, WebForm, 使用DataTables 1.10.15 ( jquery.datatables 1.10.15) 元件範例
https://shaurong.blogspot.com/2025/04/aspnet-webform-datatables-11015.html

[研究]ASP.NET, NuGet 安裝 bootstrap 3.4.1 會安裝那些套件

[研究]ASP.NET, NuGet 安裝 bootstrap 3.4.1 會安裝那些套件

2025-04-07

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

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

WebApplication1

正在安裝:

jQuery.1.9.1

bootstrap.3.4.1

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

【bootstrap 3.4.1 不更新，更新其他】

WebApplication1

更新:

Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.1 -> Microsoft.CodeDom.Providers.DotNetCompilerPlatform.4.1.0

jQuery.1.9.1 -> jQuery.3.7.1

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

(完)

相關

2025年2月18日星期二

[研究 bootstrap 3.4.1安全性弱點（CVE-2024-6485）之檢測

[研究 bootstrap 3.4.1安全性弱點（CVE-2024-6485）之檢測

2025-02-05x

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

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

CVE-2024-6485 Detail

https://nvd.nist.gov/vuln/detail/CVE-2024-6485

在引導程式中發現了一個安全漏洞，可能引發跨站點腳本 (XSS) 攻擊。該漏洞與按鈕插件內的 data-loading-text 屬性有關。可以透過將惡意 JavaScript 程式碼注入屬性來利用此漏洞，該程式碼將在按鈕的載入狀態被觸發時執行。

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

白箱工具 Fortify SCA 或 checkmarx、黑箱 Web 弱點掃描工具可以掃描 bootstrap 3.4.1版本存在安全性弱點（CVE-2024-6485）嗎 ?

ChatGPT 說：

Fortify Static Code Analyzer（SCA）和 Checkmarx 等白箱測試工具主要針對原始碼進行分析，以發現潛在的安全漏洞。然而，Bootstrap 是一個前端框架，通常以編譯後的 CSS 和 JavaScript 文件形式包含在專案中。由於這些工具主要針對原始碼，可能無法有效掃描已編譯或壓縮的第三方庫，如 Bootstrap。

針對 CVE-2024-6485 這類已知的第三方庫漏洞，建議使用專門的組件分析工具（如 OWASP Dependency-Check 或 Snyk）來檢測專案中使用的第三方庫是否存在已知漏洞。這些工具可以掃描專案的依賴項，並與已知漏洞資料庫進行比對，以識別並提醒您更新或替換存在漏洞的組件。

至於黑箱 Web 弱點掃描工具，它們通常模擬外部攻擊者的視角，透過分析 Web 應用程式的運行情況來發現安全漏洞。這些工具可能無法直接識別特定版本的第三方庫漏洞，但可以發現由這些漏洞引發的潛在安全問題。

因此，為了全面保障您的應用程式安全，建議結合使用白箱測試、黑箱測試和組件分析工具，以確保及時發現並修復各類安全漏洞。

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

packages.config

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="bootstrap" version="3.4.1" targetFramework="net48" />
  <package id="jQuery" version="3.7.1" targetFramework="net48" />
  <package id="Microsoft.CodeDom.Providers.DotNetCompilerPlatform" version="4.1.0" targetFramework="net48" />
</packages>

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
    Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.7.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

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

Fortify SCA 掃描結果，無法發現 CVE-2024-6485 問題

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

另一份 CODE

packages.config

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Microsoft.CodeDom.Providers.DotNetCompilerPlatform" version="2.0.1" targetFramework="net48" />
</packages>

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <%--參考: https://www.runoob.com/bootstrap/bootstrap-button-plugin.html --%>

    <form id="form1" runat="server">
        <h4>演示 .button('loading') 方法</h4>
        <div id="myButtons2" class="bs-example">
            <button type="button" class="btn btn-primary"
                data-loading-text="Loading...">
                原始
            </button>
        </div>
    </form>
    <script>
        $(function () {
            $("#myButtons2 .btn").click(function () {
                $(this).button('loading').delay(1000).queue(function () {
                });
            });
        });
    </script>
</body>
</html>

Default.aspx.cs

using System;


namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            
        }
    }
}

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

掃描結果

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

(完)

相關

2024年12月5日星期四

[研究]NuGet 能同時安裝 bootstrap 3.4.1 和 5.3.3 嗎 ?

[研究]NuGet 能同時安裝 bootstrap 3.4.1 和 5.3.3 嗎 ?

2024-12-05

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

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

NuGet 能同時安裝 bootstrap 3.4.1 和 5.3.3 嗎 ?

ChatGPT 說：

在 NuGet 中，Bootstrap 是作為單一套件進行管理的，無法直接同時安裝多個版本（如 3.4.1 和 5.3.3）。因為 NuGet 的設計原則是每個套件的版本在同一個專案中只能存在一個實例。

然而，有幾種解決方法可以實現同一個專案使用多個版本的 Bootstrap：

解決方法 1：手動管理不同版本的文件

直接下載不同版本的 Bootstrap：

從 Bootstrap 官網或 CDN 獲取兩個版本的 CSS 和 JS 文件。

將這些文件放置於專案中的不同資料夾中，例如：

/Content/bootstrap341/
/Content/bootstrap533/   

/Scripts/bootstrap341/
/Scripts/bootstrap533/

在需要的 .aspx 頁面，手動引用對應的文件：

<!-- For Bootstrap 3.4.1 -->
<link href="/Content/bootstrap341/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/bootstrap341/bootstrap.min.js"></script>

<!-- For Bootstrap 5.3.3 -->
<link href="/Content/bootstrap533/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/bootstrap533/bootstrap.bundle.min.js"></script>

解決方法 2：使用 libman 管理多版本

[LibMan (Library Manager)] 是 ASP.NET 支援的工具，可以讓你管理多個版本的前端資源。

右鍵點選專案，選擇 Add > Client-Side Library。

在彈出的視窗中分別添加不同版本的 Bootstrap：

Library: bootstrap@3.4.1 Target Location: /wwwroot/lib/bootstrap341

Library: bootstrap@5.3.3 Target Location: /wwwroot/lib/bootstrap533

在頁面中手動引用對應的資源：

<link href="/wwwroot/lib/bootstrap341/bootstrap.min.css" rel="stylesheet" />
<script src="/wwwroot/lib/bootstrap341/bootstrap.min.js"></script>

<link href="/wwwroot/lib/bootstrap533/bootstrap.min.css" rel="stylesheet" />
<script src="/wwwroot/lib/bootstrap533/bootstrap.bundle.min.js"></script>

解決方法 3：多專案分離處理

如果專案架構允許，可以將需要不同版本的頁面分開部署到不同的專案中，各自管理專案內的 NuGet 套件版本。

解決方法 4：自定義 NuGet 套件（進階用法）

創建自己的 NuGet 套件，分別包含 Bootstrap 3.4.1 和 5.3.3 的文件。

安裝自定義套件時，可將不同版本的資源安裝到專案中的不同目錄。

注意事項

樣式衝突：如果一個頁面同時加載兩個版本的 CSS 文件，樣式可能會互相覆蓋，導致顯示問題。為了避免衝突，可以使用 iframe 隔離不同版本的樣式，或者確保同一頁面僅使用單一版本的 Bootstrap。

維護成本：同時管理多個版本會增加開發和維護成本，建議盡量統一版本，僅在必要的情況下使用多版本方案。

(完)

相關

2024年11月8日星期五

[研究]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年10月25日星期五

[研究]Bootstrap 4 升級 Bootstrap 5 後本來沒出現的字出現了

[研究]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 加入至專案中，以在聚焦時顯示隱藏的連結。

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

實際測試成功。

(完)

相關

2024年10月17日星期四

[研究]NuGet與Libman安裝bootstrap 5.3.3結果比較

[研究]NuGet與Libman安裝bootstrap 5.3.3結果比較

2024-10-17

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

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

NuGet安裝bootstrap 5.3.3結果

下圖，.css類的安裝在Content目錄；.js和.map安裝到 Scripts 目錄

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

Libmna安裝bootstrap 5.3.3結果

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

比較

libman安裝的bootstrap 5.3.3比NuGet安裝的，多了scss目錄。

註：NuGet 目前沒有 "bootstrap scss" 這種單獨安裝 scss 的選項。

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

NuGet 安裝 bootstrap 5.3.3 沒有提供 scss，但 libman 安裝 bootstrap 5.3.3 有提供，為什麼?

ChatGPT 說：

這是因為 NuGet 和 LibMan（Library Manager）處理前端資源的方式不同：

NuGet 主要用來管理後端的依賴項，特別是針對 .NET 相關的庫。當你通過 NuGet 安裝 Bootstrap 時，它會側重於提供最常見的用例，通常只包含經過編譯的 CSS 和 JavaScript 文件，而不包括 SCSS 源文件。這是因為很多開發者並不需要編譯 Bootstrap，而只需直接使用其已編譯的資源。
LibMan 是一個針對前端資源的輕量級管理工具。LibMan 允許你直接從外部的內容交付網絡（如 CDN）下載前端資源。在使用 LibMan 安裝 Bootstrap 時，它會下載完整的 Bootstrap 包，包括 SCSS 源文件。LibMan 可以更靈活地下載前端資源，不同於 NuGet 的篩選方式。

總結來說，這是由於兩者的設計理念和主要用途不同。LibMan 更適合於管理前端的資源，並且提供了更多樣的資源內容（例如 SCSS），而 NuGet 偏重於後端的管理，因此只包含部分前端資源。

(完)

相關

[研究]LibMan安裝bootstrap 5.3.3後，再用NuGet安裝bootstrap 5.3.3會如何？

[研究]LibMan安裝bootstrap 5.3.3後，再用NuGet安裝bootstrap 5.3.3會如何？
[研究]NuGet安裝bootstrap 5.3.3後，再用LibMan安裝bootstrap 5.3.3會如何？

2024-10-17

環境：Visual Studio 2019 + ASP.NET + WebForm + Web Application + .NET Framework

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

LibMan安裝bootstrap 5.3.3後

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

再用NuGet安裝bootstrap 5.3.3後

多了Content和Scripts 目錄

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

Visual Studio 2019 的LibMan安裝bootstrap 5.3.3後，再用NuGet安裝bootstrap 5.3.3會如何？

ChatGPT 說：

如果你在 Visual Studio 2019 中先使用 LibMan（Library Manager）安裝 Bootstrap 5.3.3，然後再使用 NuGet 安裝相同版本的 Bootstrap，可能會導致以下情況：

重複的 Bootstrap 文件：LibMan 和 NuGet 可能會將 Bootstrap 5.3.3 文件安裝到不同的位置。LibMan 一般會將庫安裝在 wwwroot/lib/ 文件夾中，而 NuGet 可能會將它們放置在 Content 或 Scripts 文件夾中。這樣可能會產生重複的 Bootstrap 文件，增加文件體積並且難以管理。
版本衝突：如果 LibMan 和 NuGet 都安裝了相同版本的 Bootstrap，理論上版本不應該衝突。然而，如果你不小心指定了不同版本，則可能會引發兼容性問題或產生混亂，特別是當你從不同的文件夾引用不同版本的 Bootstrap。
文件引用混亂：你的項目可能會在不同的位置引用 Bootstrap 文件。如果你沒有仔細控制這些引用（例如可能引用的是 LibMan 安裝的版本或 NuGet 安裝的版本），這可能會導致樣式或功能異常。

建議

選擇一種方式來管理你的前端資源：建議要麼使用 LibMan，要麼使用 NuGet，而不要同時使用它們來管理同一個庫，這樣可以避免文件重複和引用混亂。
清理不需要的文件：如果你決定使用 NuGet 安裝 Bootstrap，那麼應該刪除通過 LibMan 安裝的文件，反之亦然。

如果你已經使用了其中一個包管理工具，最好不要再使用另一個來安裝相同的包，這樣可以保持項目的整潔和可維護性。

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

結論：是可以同時安裝的，使用可能要注意。

另外也有實際測試，NuGet安裝bootstrap 5.3.3後，再用LibMan安裝bootstrap 5.3.3，結果相同，安裝不會有錯誤。

(完)

[研究]LibMan（Library Manager）安裝 bootstrap 5.3.3、變更版本、移除套件 (VS2019)

[研究]LibMan（Library Manager）安裝 bootstrap 5.3.3、變更版本、移除套件 (VS2019)

2024-10-17

環境：Visual Studio 2019 + ASP.NET + WebForm + Web Application + .NET Framework

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

如何在 Web Application 專案中用 LibMan 管理 bootstrap：

右鍵點擊專案中的 Scripts 資料夾或其他希望存放前端資源的資料夾。
選擇「Add」->「Client-Side Library」。
在出現的對話框中，選擇 CDN 來源（如 unpkg 或 cdnjs），並搜尋 bootstrap。
選擇安裝的版本，LibMan 會將 bootstrap 安裝到指定的資料夾。

libman.json 預設是不存在的，安裝套件後

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

變更版本

例如把 bootstrap@5.3.3 變更為 bootstrap@5.3.2 ，就會變更版本了。

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

移除套件

libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "bootstrap@5.3.3",
      "destination": "lib/bootstrap/"
    }
  ]
}

改成

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
  ]
}

存檔後，就會自動移除 bootstrap了。

(完)

2024年10月11日星期五

[研究]Bootstrap 5.3.3 有 CVE-2024-6484 (NVD) Medium 中等級弱點

[研究]Bootstrap 5.3.3 有 CVE-2024-6484 (NVD) Medium 中等級弱點

2024-10-11

下圖，OWASP Dependency-Track (DT) 說 Bootstrap 5.3.3 有 CVE-2024-6484 (NVD) Medium 中等級弱點 (2024-09-26)

NVD = National Vulnerability Database

CVE-2024-6484 Detail (2024-07-11)
https://nvd.nist.gov/vuln/detail/CVE-2024-6484
Bootstrap 中已發現一個漏洞，該漏洞會使用戶遭受跨站點腳本 (XSS) 攻擊。這個問題存在於輪播元件中，由於清理不充分，可以透過 <a> 標籤的 href 屬性來利用 data-slide 和 data-slide-to 屬性。此漏洞可能使攻擊者能夠在受害者的瀏覽器中執行任意 JavaScript。

用 getbootstrap 找，bootstrap 5.x 在 NVD 沒有弱點
https://nvd.nist.gov/products/cpe/search/results?namingFormat=2.3&orderBy=CPEURI&keyword=getbootstrap&status=FINAL&startIndex=40

Snyk 目前 bootstrap 5.x 無弱點
https://security.snyk.io/package/npm/bootstrap/5.0.0

Bootstrap 5 目前沒有 Vulnerabilities (Apr 4, 2024)
https://www.twingate.com/blog/tips/bootstrap-vulnerabilities

CVE-2024-6484
https://www.herodevs.com/vulnerability-directory/cve-2024-6484
跨站腳本，影響：>=2.0.0 且 <=3.4.1

弱點 CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')
https://cwe.mitre.org/data/definitions/79

參考
https://www.herodevs.com/vulnerability-directory/cve-2024-6484

NuGet - bootstrap 5.3.3 是目前最新版了
https://getbootstrap.com/
https://www.nuget.org/packages/bootstrap

不知是弱點太新，很多資訊來源尚未更新，還是 Dependency-Track (DT) 誤判，尚待觀察。

如果沒有 data-slide 和 data-slide-to 屬性使用就不用擔心此弱點。

(完)

2024年10月7日星期一

[研究]bootstrap 3.4.1弱點CVE-2024-6485

2024-10-01

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

EOL (End of Life)

bootstrap 3.4.1 是 13 Feb 2019 釋出。

End of Life Status Bootstrap 4
https://getbootstrap.com/docs/4.6/end-of-life/
Bootstrap 3 reached end of life July 24, 2019, followed by Bootstrap 4 on January 1, 2023

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

該漏洞為網頁前端使用data-loading-text屬性才有機會觸發該漏洞，若專案無使用該屬性不受影響；另外，若使用者輸入皆於伺服器端檢查與過濾，不受此弱點影響。

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

美國國家弱點資料庫( NVD, National Vulnerability Database )

根據NVD，bootstrap 3.4.1 並沒有弱點

https://nvd.nist.gov/products/cpe/search/results?namingFormat=2.3&keyword=cpe%3A2.3%3Aa%3Agetbootstrap%3Abootstrap%3A3.4.1%3A*%3A*%3A*%3A*%3A*%3A*%3A*

https://nvd.nist.gov/products/cpe/detail/6D2FBAA4-7EB8-42ED-9BD3-6209BECA01CF?namingFormat=2.3&orderBy=CPEURI&keyword=cpe%3A2.3%3Aa%3Agetbootstrap%3Abootstrap%3A3.4.1%3A*%3A*%3A*%3A*%3A*%3A*%3A*&status=FINAL
(更新日期 05/07/2019)

https://nvd.nist.gov/vuln/search/results?adv_search=true&isCpeNameSearch=true&query=cpe%3A2.3%3Aa%3Agetbootstrap%3Abootstrap%3A3.4.1%3A*%3A*%3A*%3A*%3A*%3A*%3A*

**********

根據這篇，NIST對CVE-2024-6485是等待分析。
https://nvd.nist.gov/vuln/detail/CVE-2024-6485

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

CVEdetails

CVE-2024-6485
https://www.cvedetails.com/cve/CVE-2024-6485/
A security vulnerability has been discovered in bootstrap that could enable Cross-Site Scripting (XSS) attacks. The vulnerability is associated with the data-loading-text attribute within the button plugin. This vulnerability can be exploited by injecting malicious JavaScript code into the attribute, which would then be executed when the button's loading state is triggered.

2024-07-11 18:09:59 公布的，認為 bootstrap 有弱點，沒說版本範圍。

整個網站也搜不到明確說 3.4.1 有 CVE-2024-6485 弱點。

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

HeroDevs公司

CVE-2024-6485
https://zh.herodevs.com/vulnerability-directory/cve-2024-6485

boostrap >=2.0.0 且 boostrap <=3.4.1 有 CVE-2024-6485 弱點

註：HeroDevs 是一家專注於開源軟體開發的公司，成立於 2018 年。該公司提供開源軟體包和專家服務，幫助用戶安全且合規地使用軟體，並在需要時進行遷移。

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

要注意的是，Bootstrap 3, 4, 5 都是大改版，敝人測試過某些專案，Bootstrap 3.4.1 => Bootstrap 5.x 或 Bootstrap 4.x => Bootstrap 5.x，會導致版面美工或某些功能異常，官方也沒有工具可以輕鬆升級，必須實際測試和手工調整，最好安排足夠的時間去升級、測試和修改。

基本上，因為 Bootstrap 3 和 Bootstrap 4 都已經 EOS，就算不受此次影響，建議盡量升級到 Bootstrap 5。避免日後發現嚴重漏洞一定要升級時，時間不足，措手不及。

(完)

2024年10月1日星期二

[研究]ASP.NET, WebForm, 如何避免 bootstrap 5.3.3 把 GridView 或 DetailsView 的 Caption 顯示到表格下方

[研究]ASP.NET, WebForm, 如何避免 bootstrap 5.3.3 把 GridView 或 DetailsView 的 Caption 顯示到表格下方

2024-10-01

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

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

期望的，也是 GridView 和 DetailsView 的 Caption 預設的情況

bootstrap 5.3.3 把 GridView 或 DetailsView 的 Caption 顯示到表格下方

因為 bootstrap.css 和某些 bootstrap 套件的檔案中包含


table {
  caption-side: bottom;
  border-collapse: collapse;
}

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

可以添加 CSS 設定來解決

    <style type="text/css">
        table {
          caption-side: top;
        }
    </style>

Default.aspx 完整範例

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <style type="text/css">
        table {
          caption-side: top;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>" 
            SelectCommand="SELECT * FROM [MyTable]"></asp:SqlDataSource>
        <asp:GridView ID="GridView1" Caption="標題"
            runat="server" AutoGenerateColumns="False" DataKeyNames="SN" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False" ReadOnly="True" SortExpression="SN" />
                <asp:BoundField DataField="Field1" HeaderText="Field1" SortExpression="Field1" />
                <asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" />
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

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

或改成

custom.css

table {
    caption-side: top;   
}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="custom.css" rel="stylesheet">

</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>" 
            SelectCommand="SELECT * FROM [MyTable]"></asp:SqlDataSource>
        <asp:GridView ID="GridView1" Caption="標題"
            runat="server" AutoGenerateColumns="False" DataKeyNames="SN" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="SN" HeaderText="SN" InsertVisible="False" ReadOnly="True" SortExpression="SN" />
                <asp:BoundField DataField="Field1" HeaderText="Field1" SortExpression="Field1" />
                <asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" />
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

(完)

相關

2023年3月7日星期二

[研究]Bootstrap 3.x, 4.x, 5.x的官方 CDN 網址

[研究]Bootstrap 3.x, 4.x, 5.x的官方 CDN 網址

2023-03-07

Bootstrap 的官方 CDN 網址：
https://www.jsdelivr.com/package/npm/bootstrap

https://www.nuget.org/packages/bootstrap/5.2.3
點 Dependencies，5.x版沒有相依套件。

https://www.nuget.org/packages/bootstrap/4.6.1
相依 jQuery (>= 3.0.0 && < 4.0.0) 和 popper.js (>= 1.16.1 && < 2.0.0)

https://www.nuget.org/packages/bootstrap/3.4.1#dependencies-body-tab
相依 jQuery (>= 1.9.1 && < 4.0.0)

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

抓3.x.x版的最新版，要自己注意相依套件問題

</head>

上面 jQuery 其實可用 3.x 版。

抓4.x.x版的最新版，要自己注意相依套件問題

<head>

</head>

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

Lastest版，如果目前最新是5.2.3版，不註明版本，會抓到5.2.3版

Major，如果目前最新是5.2.3版，註明5.x版本，會抓到5.2.3版

Minor，如果目前最新是5.2.3版，註明5.2.x版本，會抓到5.2.3版

Static，如果目前最新是5.2.3版，註明5.2.3版本，會抓到5.2.3版

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

Bootstrap 3.x 的頁籤，最多只能使用 jQuery 哪一版 ?

Bootstrap 3.x 的頁籤可以使用 jQuery 1.x 或 2.x 版本。這是因為 Bootstrap 3.x 是在 jQuery 1.x 和 2.x 版本的基礎上開發的，因此這些版本是相容的。但請注意，使用 jQuery 3.x 版本可能會導致一些問題，因為 jQuery 3.x 版本已經移除了一些舊有的 API，這些 API 可能被 Bootstrap 3.x 使用到。因此建議使用 jQuery 1.x 或 2.x 版本來配合 Bootstrap 3.x 的頁籤。

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

Bootstrap 4.x 的頁籤，最多只能使用 jQuery 哪一版 ?

Bootstrap 4.x 的頁籤可以使用 jQuery 3.x 版本。Bootstrap 4.x 是在 jQuery 3.x 版本的基礎上開發的，因此這些版本是相容的。但請注意，如果你正在升級從 Bootstrap 3.x 到 4.x，則需要更新你的 jQuery 版本，因為 Bootstrap 4.x 不再支持 jQuery 1.x 和 2.x 版本。所以，如果你想使用 Bootstrap 4.x 的頁籤，則需要使用 jQuery 3.x 版本。

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

Bootstrap 5.x不再相依於 jQuery。

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

(完)

相關

[研究]jQuery 和 jQuery UI的 CDN 網址
https://shaurong.blogspot.com/2023/03/jquery-jquery-ui-cdn.html

[研究]Bootstrap 3.x, 4.x, 5.x的官方 CDN 網址
https://shaurong.blogspot.com/2023/03/bootstrap-3x-4x-5x-cdn.html

[研究]CKEditor 4.x、5.x的官方 CDN 網址
https://shaurong.blogspot.com/2023/03/ckeditor-4x5x-cdn.html

[研究] ckeditor full, standard, basic 版的差別
http://shaurong.blogspot.com/2021/08/ckeditor-full-standard-basic.html

[研究][ASP.NET][JavaScript] ckeditor-full v4.9.2 試用(NuGet安裝)
http://shaurong.blogspot.com/2018/06/aspnetjavascript-ckeditor-full-v492.html

[研究] NuGet 安裝的 CKEditor 版本比較
http://shaurong.blogspot.com/2018/06/nuget-ckeditor.html

2023年3月2日星期四

[研究][ASP.NET] bootstrap 3.x 升級 5.x 導致畫面亂掉，該如何處理

[研究][ASP.NET] ChatGPT，bootstrap 3.x 升級 5.x 導致畫面亂掉，該如何處理？

2023-02-27

Q：bootstrap 3.x 升級 5.x 導致畫面亂掉，該如何處理？

ChatGPT：

升級 Bootstrap 3.x 到 5.x 後畫面亂掉，可能是因為兩者之間有些差異，需要進行調整。

以下是一些處理方式：

確保導入了正確的 CSS 和 JavaScript 文件：在升級到 Bootstrap 5.x 後，確保將舊版本的 CSS 和 JavaScript 文件替換為新版本的文件。同時檢查是否遺漏了任何文件。

檢查使用的 HTML 結構和樣式類名：在 Bootstrap 5.x 中，某些結構和樣式類名已經改變。因此，請檢查您的 HTML 結構和樣式類名，以確保它們與新版本的 Bootstrap 相容。

檢查自定義 CSS：如果您在舊版本的 Bootstrap 中使用了自定義的 CSS，請檢查這些樣式是否與新版本的 Bootstrap 相容。如果不相容，您需要更新自定義的 CSS 以配合新版本的 Bootstrap。

使用 Bootstrap 的內建工具：Bootstrap 5.x 提供了許多內建的工具和樣式類，這些工具可以簡化和加速開發過程。檢查這些工具是否可以解決您的問題，並優化您的代碼。

參考 Bootstrap 5.x 的官方文檔：Bootstrap 5.x 的官方文檔提供了詳細的說明和示例，可以幫助您了解新版本的 Bootstrap。請查閱官方文檔以獲得更多幫助和指導。

希望以上幾點能對您有所幫助，讓您成功升級到 Bootstrap 5.x。

**********

結論：沒有具體的處理方式。

(完)

[研究][ASP.NET]bootstrap.3.4.1 升級 bootstrap.5.2.3 (失敗)

[研究][ASP.NET]bootstrap.3.4.1 升級 bootstrap.5.2.3 (失敗)

2023-03-02

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

Bootstrap 大版本升級，不是一定會成功，或一定失敗，要看實際方案狀況。

程式碼全部先另外備份。(重要)

bootstrap.3.4.1 -> bootstrap.5.2.3

專案 'WebApplication1' 中已有檔案 'Content\bootstrap.min.css'。要加以覆寫嗎？

[Yes][Yes to All][No][No to All]

專案 'WebApplication1' 中已有檔案 'Content\bootstrap.css'。要加以覆寫嗎？

[Yes][Yes to All][No][No to All]

如果全部選 Yes，編譯正常，執行，首頁畫面嚴重不同。

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

還原程式碼，再次升級。

這次全部選 No，不覆寫。

搜尋 3.4.1，看還有無甚麼要改的，發現

Content\bootstrap.min.css 檔案中有註明是3.4.1版

Content\bootstrap.css 檔案中有註明是3.4.1版

找到 App_Start/BundleConfig.cs 中

string bootstrapversion = "3.4.1";

改為

string bootstrapversion = "5.2.3";

編譯正常，執行，首頁畫面正常，

但登入系統後，左邊畫面原本會展開或收合的選單，不會展開了。

清除整個方案，執行，依然不會展開。

失敗，放棄升級，有空再測試，先記錄一下。

(完)

相關

[研究][ASP.NET] bootstrap 3.x 升級 5.x 導致畫面亂掉，該如何處理https://shaurong.blogspot.com/2023/03/aspnet-bootstrap-3x-5x.html

2022年4月13日星期三

[研究][ASP.NET]Bootstrap 3.x, 4.x, 5.x 的 bootstrap.css 比較

[研究][ASP.NET]Bootstrap 3.x, 4.x, 5.x 的 bootstrap.css 比較

2022-04-13

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

Click 圖片可以看 100% 尺寸。

Bootstrap 3.4.1, 4.6.1, 5.1.3 的 bootstrap.css 比較 (使用 WinMerge)

Bootstrap 3.4.1, 4.6.1 的 bootstrap.css 比較

看起來改的非常大。

(完)

相關

[研究][ASP.NET]Bootstrap 3.x, 4.x, 5.x 的 bootstrap.css 比較
https://shaurong.blogspot.com/2022/04/aspnetbootstrap-3x-4x-5x-bootstrapcss.html

[研究][ASP.NET]Bootstrap 3.x, 4.x, 5.x 按鈕大小、顏色比較
https://shaurong.blogspot.com/2022/04/aspnetbootstrap-3x-4x-5x.html

2022年4月3日星期日

[研究][ASP.NET]Bootstrap 3.x, 4.x, 5.x 按鈕大小、顏色比較

[研究][ASP.NET]Bootstrap 3.x, 4.x, 5.x 按鈕大小、顏色比較

2022-04-03

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="WebApplication33.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            Bootstrap 3.4.1
             <p>
                <button type="button" class="btn btn-primary btn-lg">大的原始按鈕btn-lg</button>
                <button type="button" class="btn btn-default btn-lg">大的按鈕</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary">默認大小的原始按鈕</button>
                <button type="button" class="btn btn-default">默認大小的按鈕</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-sm">小的原始按鈕btn-sm</button>
                <button type="button" class="btn btn-default btn-sm">小的按鈕</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-xs">特別小的原始按鈕btn-xs</button>
                <button type="button" class="btn btn-default btn-xs">特別小的按鈕</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-lg btn-block">塊級的原始按鈕btn-lg btn-block</button>
                <button type="button" class="btn btn-default btn-lg btn-block">塊級的按鈕</button>
            </p>
        </div>
    </form>
</body>
</html>

比較

(下圖) Bootstrap 3.x 的 default按鈕是白底黑線框，到4.x和5.x 黑線框沒了，看不出像按鈕。

(下圖) 塊級按鈕在 Bootstrap 3.x 和 4.x 可用(不管 IE11, Chrome, FireFox，按鈕寬度等於網頁寬度；但是 5.x 不再支援。

(下圖)btn-xs 屬性在 Bootstrap 3.x有支援，4.x 和 5.x 不再支援，和預設(默認)大小相同。

(下圖)注意，4.x 和 5.x 沒有 btn-xs 屬性，所以「特別小」的按鈕變成「預設大小」的按鈕。

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

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            BootStrap 3.4.1
            <!-- 標準的按鈕 -->
            <button type="button" class="btn btn-default">默認按鈕</button>
            <!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 -->
            <button type="button" class="btn btn-primary">原始按鈕</button>
            <!-- 表示一個成功的或積極的動作 -->
            <button type="button" class="btn btn-success">成功按鈕</button>
            <!-- 信息警告消息的上下文按鈕 -->
            <button type="button" class="btn btn-info">信息按鈕</button>
            <!-- 表示應謹慎採取的動作 -->
            <button type="button" class="btn btn-warning">警告按鈕</button>
            <!-- 表示一個危險的或潛在的負面動作 -->
            <button type="button" class="btn btn-danger">危險按鈕</button>
            <!-- 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行為 -->
            <button type="button" class="btn btn-link">鏈接按鈕</button>
        </div>
    </form>
</body>
</html>

按鈕顏色比較

(完)

2021年7月17日星期六

[研究]Bootstrap Table (表格)

[研究]Bootstrap Table (表格)

2021-07-17

Bootstrap 4 Tables
https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

Tables · Bootstrap
https://getbootstrap.com/docs/4.1/content/tables/

Bootstrap 表格 | 菜鸟教程
https://www.runoob.com/bootstrap/bootstrap-tables.html

表格 (Tables) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
https://bootstrap5.hexschool.com/docs/5.0/content/tables/

Official CDN of Bootstrap and Font Awesome · BootstrapCDN
https://www.bootstrapcdn.com/

table-striped 桌紋
table-bordered 桌邊
table-hover 桌面懸停
table-responsive 表響應式

使用範例

<table class="table table-striped table-bordered table-hover table-responsive" 
    cellspacing="0" rules="all" border="1" width="50%" style="border-collapse: collapse;">

<asp:GridView ID="GridView1" runat="server"
   CssClass="table table-striped table-bordered table-hover table-responsive" >

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<table class="table table-striped table-bordered table-hover table-responsive">
  <tr><td>1</td><td>2</td></tr>
  <tr><td>3</td><td>4</td></tr>
</table>

(完)

訂閱：文章 (Atom)

2026年6月17日 星期三

2026年6月12日 星期五

2025年4月7日 星期一

2025年2月18日 星期二

2024年12月5日 星期四

2024年11月8日 星期五

2024年10月25日 星期五

2024年10月17日 星期四

2024年10月11日 星期五

2024年10月7日 星期一

2024年10月1日 星期二

2023年3月7日 星期二

2023年3月2日 星期四

2022年4月13日 星期三

2022年4月3日 星期日

2021年7月17日 星期六

2026年6月17日星期三

2026年6月12日星期五

2025年4月7日星期一

2025年2月18日星期二

2024年12月5日星期四

2024年11月8日星期五

2024年10月25日星期五

2024年10月17日星期四

2024年10月11日星期五

2024年10月7日星期一

2024年10月1日星期二

2023年3月7日星期二

2023年3月2日星期四

2022年4月13日星期三

2022年4月3日星期日

2021年7月17日星期六