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

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>

按鈕顏色比較