2022年1月28日 星期五

[研究]展開收合(手風琴、Accordion)效果 (BootStrap 5)

[研究]展開收合(手風琴、Accordion)效果 (BootStrap 5)

2022-01-28

Accordion · Bootstrap v5.0
https://getbootstrap.com/docs/5.0/components/accordion/

右上角下拉選單，Bootstrap v5.0改選v3.4.1或v.4.6.x 都沒有Accordion畫面，可能舊版不支援。

折疊(Collapse)

Visual Studio 2022 v17 + Web Application + WebForm + ASP.NET + C# 上測試

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" />
    <script src="Scripts/bootstrap.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <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">
                            手風琴項目 #1
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            這是第一個手風琴項目的本體。它預設顯示，直到有合適 class 的折疊插件(collapse plugin)被增加，class 控制每個 HTML 元素的外觀，class 透過 CSSS 控制顯示和隱藏，class 名稱為 .accordion-body。
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            手風琴項目 #2
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            這是第二個手風琴項目的本體。它預設隱藏，直到有合適 class 的折疊插件(collapse plugin)被增加，class 控制每個 HTML 元素的外觀，class 透過 CSSS 控制顯示和隱藏，class 名稱為 .accordion-body。
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            手風琴項目 #3
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            這是第三個手風琴項目的本體。它預設隱藏，直到有合適 class 的折疊插件(collapse plugin)被增加，class 控制每個 HTML 元素的外觀，class 透過 CSSS 控制顯示和隱藏，class 名稱為 .accordion-body。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

(完)

相關

[研究] 頁籤(tab) (HTML + jQuery 3.5.1 + Bootstrap 3.4.1)
https://shaurong.blogspot.com/2021/02/tab-html-jquery-351-bootstrap-341.html

[研究] 頁籤(tab) (HTML + CSS3)
https://shaurong.blogspot.com/2021/02/tab-html-css3.html

[研究] 頁籤(tab) ( HTML + CSS + JavaScript + jQuery + jQuery UI)
https://shaurong.blogspot.com/2021/02/tab-html-css-javascript-jquery-jquery-ui.html

[研究] 頁籤(tab) (HTML+CSS+JavaScript+jQuery)
https://shaurong.blogspot.com/2021/02/tab-htmlcssjavascriptjquery.html

[研究] 頁籤(tab) (HTML+CSS+JavaScript)
https://shaurong.blogspot.com/2021/02/tab-htmlcssjavascript.html

張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)