社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
撰寫純 CSS 彈出式功能表的原則及實作 By shawl.qiu
首頁 web前端 css教學 寫出純 CSS 彈出式選單的原理及實作 By shawl.qiu_經驗交流

寫出純 CSS 彈出式選單的原理及實作 By shawl.qiu_經驗交流

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 12:08 PM
css

撰寫純 CSS 彈出式功能表的原則及實作 By shawl.qiu


#摘要: 
本文介紹了使用 CSS 編寫適用於 Opera, Firefox, IE 的多重彈出式功能表
## #說明:
編寫 CSS 彈出選單的重點不外乎當滑鼠移到目標上時, 顯示隱藏的標籤. 
要隱藏的標籤使用 display:none; 屬性進行隱藏. 
觸發顯示隱藏標籤主要使用 :hover 屬性, 並用 display:block; 顯示隱藏的標籤.

但由於瀏覽器對 CSS 的支援並非一致.
#對於 Opera 或 Firefox, 我們可以寫出純 CSS , 他們支援任何標籤的 :hover 屬性.
而對於 IE 瀏覽器, :hover 只對 a 標籤起作用, 但我們可以使用腳本的 onmouseover, onmouseout 模擬出其他標籤的屬性.
編寫適用於 IE 的 CSS 彈出式功能表必須使用到少許的腳本.

#目錄:
1. 編寫直排右側彈出的 CSS 選單. 
1.1 真正的基於 Opera, CSSrefox  
1.1 真正的基於 Opera, Firefox  
1.1 真正的基於 Opera, Firefox  CSS彈出式選單
1.2 相容 IE, Opera, Firefox 的 CSS 彈出式功能表(腳本實作)

2. 編寫橫排底部彈出的 CSS 功能表. 
2.1 真正的基於彈出式Opera、選單
2.2 相容 IE, Opera, Firefox 的 CSS 彈出式選單(腳本實作)

3. 結論

#4. 預覽

shawl.qiu
4. 預覽

shawl.qiu##2006
#4. 預覽

shawl.qiu##2006
    #4. 預覽shawl.qiu##2006
  1. #4. 預覽
  2. shawl.qiu
  4. #4. 預覽
  6. shawl.qiu##2006
  7. ##4. 預覽
  9. shawl.qiu
  10. ####### -10-01######http://blog.csdn.net/btbtd#########1. 寫直排右邊彈出的 CSS 選單. #######1.1 真正的基於 Opera, Firefox 純 CSS 彈出式選單### ######linenum### ### ### ### ### ###Untitled Document ### ###/*    .pmVerticalRightOut{background-color:#fff!important; /* 定義主選單域背景色 */} 
  11.     .pmVerticalRightOut .level{  /* 定義一級類別屬性 */
  12.         width:120px; /* 寬度 */
  13.         height:17; /* 高度 */
  14.         position:relative; /* 顯示位置為相對位置 */
  15.         display:block; /* 以區塊模式顯示 */
  16.         background-color:#D8D8D8; /* 背景色 */
  17.         padding:0px 2px; /* 文字內補丁間隔 */
  18.         margin:0px 0px 1px 0px; /* 選單外補丁間隔 */
  19.     }
  20.     .pmVerticalRightOut .level:hover { /* 當滑鼠劃過一級選單時 */
  21.         background-color:#6633FF; /* 背景色 */
  22.         color:#FFFFFF; /* 文字顏色 */
  23.     }
  24.     .pmVerticalRightOut .level_{display:none; /* 預設隱藏二級類別 */}
  25.     
  26.     .pmVerticalRightOut .level:hover .level_ { /* 滑鼠劃過時觸發顯示二級類別 */
  27.         display:block; /* 以區塊顯示 */
  28.         left:124px; /* 相對於一級類別所顯示的位置 */
  29.         width:120px; /* 寬度 */
  30.         height:auto; /* 高度 */
  31.         top:0px; /* 相對於一級類別所在位置的頂端 */
  32.         background-color:#EFEFEF; /* 定義背景色 */
  33.         position:absolute; /* 位置為絕對位置 */
  34.     }
  35.     .pmVerticalRightOut .level:hover .level_ .level_title {
  36.         /* 定義二級類別標題樣式 */
  37.         font-weight:bold; /* 字體加粗 */
  38.         background-color:#A7ADFE; /* 背景色 */
  39.         color:white; /* 文字顏色 */
  40.     }
  41.     .pmVerticalRightOut .level:hover .level_ a:hover {
  42.         /* 定義二級類別連結顯示樣式 */
  43.         background-color:#F83658; /* 背景色 */
  44.         color:white; /* 文字顏色 */
  45.     }
  46.     .pmVerticalRightOut .level_ * { 
  47.         /* 定義所有二級類別一般屬性 */
  48.         display:block; /* 以區塊顯示 */
  49.         color:black; /* 文字顏色 */
  50.         padding:0px 2px; /* 內補丁間隔 */
  51.     }
  52. /*]]>*/

  58.     
  59.         level
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  •             level_ 標題 3
  •             level_ 標題 4
  •             level_ 標題 5
  •         
  •     
  •     
  •         
    level 1
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  •             level_ title 3
  • level_標題4
  •             level_ 標題 5
  •         
  •     
  •     
  •         
    level 2
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  •             level_ 標題 3
  •             level_ 標題 4
  •             level_ 標題 5
  •         
  •     
  •     
  •         
    level 3
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  • level_ title 3
  •             level_ 標題 4
  •             level_ 標題 5
  •         
  •     
  •     
  •         
    level 4
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  •             level_ title 3
  •             level_ 標題 4
  •             level_ 標題 5
  •         
  •     

    • 1.2 相容 IE、Opera、Firefox 的 CSS 彈出式選單（腳本實作）
      linenum
    1. " http://www.w3.org/TR/html4/loose.dtd">
    5. Untitled Document
    8. //if (navigator.appName=="Microsoft Internet Explorer") {
    9.     function fPmVerticalRightOut() {
    10.         var getItem = document.getElementById("pmVerticalRightOut").getElementsByTagName("div");
    11.         for (var i=0; i            getItem[i].onmouseover=function() { 
    12.                 if(    this.className=="level"){
    13.                     this.className="levelIe";
    14.                 }
    15.             }
    16.             getItem[i].onmouseout=function() { 
    17.                 if(    this.className=="levelIe"){
    18.                     this.className="level";
    19.                 }
    20.             }//css彈出式選單腳本作者：shawl.qiu
    21.         }
    22.     }
    23.     window.onload=fPmVerticalRightOut;
    24. }
    25. //]]>

    31.     
    32.         level
    33.         
    34.             level_ title
    35.             level_ 標題 1
    36.             level_ 標題 2
    37.             level_ 標題 3
    38.             level_ 標題 4
    39.             level_ 標題 5
    40.         
    41.     
    42.     
    43.         
      level 1
    44.         
    45.             level_ title
    46.             level_ 標題 1
    47.             level_ 標題 2
    48.             level_ title 3
    49. level_標題4
    50.             level_ 標題 5
    51.         
    52.     
    53.     
    54.         
      level 2
    55.         
    56.             level_ title
    57.             level_ 標題 1
    58.             level_ 標題 2
    59.             level_ 標題 3
    60.             level_ 標題 4
    61.             level_ 標題 5
    62.         
    63.     
    64.     
    65.         
      level 3
    66.         
    67.             level_ title
    68.             level_ 標題 1
    69.             level_ 標題 2
    70. level_ title 3
    71.             level_ 標題 4
    72.             level_ 標題 5
    73.         
    74.     
    75.     
    76.         
      level 4
    77.         
    78.             level_ title
    79.             level_ 標題 1
    80.             level_ 標題 2
    81.             level_ title 3
    82.             level_ 標題 4
    83.             level_ 標題 5
    84.         
    85.     

    #2.編寫了橫底部彈出的 CSS 選單。

    2.1 真正的基於 Opera、Firefox 純 CSS 彈出式選單
      linenum
    1. " http://www.w3.org/TR/html4/loose.dtd">
    5. Untitled Document
    7. /*    body{ margin:0px auto; width:768px; /* 定義頁以中顯示,*/}
    8.     *{text-decoration:none!important; /* 定義所有連結不顯示底線 */}
    9.     .pmHorizo​​ntalBottomOut{background-color:#fff!important; /* 定義主選單域背景色 */} 
    10.     .pmHorizo​​ntalBottomOut .level{  /* 定義一級類別屬性 */
    11.         width:120px; /* 寬度 */
    12.         height:17; /* 高度 */
    13.         position:relative; /* 顯示位置為相對位置 */
    14.         display:block; /* 以區塊模式顯示 */
    15.         background-color:#D8D8D8; /* 背景色 */
    16.         padding:0px 2px; /* 文字內補丁間隔 */
    17.         margin:0px 1px 0px 0px; /* 選單外補丁間隔 */
    18.         float:left;
    19.     }
    20.     .pmHorizo​​ntalBottomOut .level:hover { /* 當滑鼠劃過一級選單 */
    21.         background-color:#6633FF; /* 背景色 */
    22.         color:#FFFFFF; /* 文字顏色 */
    23.     }
    24.     .pmHorizo​​ntalBottomOut .level_{display:none; /* 預設隱藏二級類別 */}
    25.     
    26.     .pmHorizo​​ntalBottomOut .level:hover .level_ { /* 滑鼠劃過時觸發顯示二級類別 */
    27.         display:block; /* 以區塊顯示 */
    28.         width:124px; /* 寬度 */
    29.         height:auto; /* 高度 */
    30.         margin:0px -2px 0px -2px; /* 外補丁 */
    31.         background-color:#EFEFEF; /* 定義背景色 */
    32.         position:absolute; /* 位置為絕對位置 */
    33.     }
    34.     .pmHorizo​​ntalBottomOut .level:hover .level_ .level_title {
    35.         /* 定義二級類別標題樣式 */
    36.         font-weight:bold; /* 字體加粗 */
    37.         background-color:#A7ADFE; /* 背景色 */
    38.         color:white; /* 文字顏色 */
    39.     }
    40.     .pmHorizo​​ntalBottomOut .level:hover .level_ a:hover {
    41.         /* 定義二級類別連結顯示樣式 */
    42.         background-color:#F83658; /* 背景色 */
    43.         color:white; /* 文字顏色 */
    44.     }
    45.     .pmHorizo​​ntalBottomOut .level_ * { 
    46.         /* 定義所有二級類別一般屬性 */
    47.         display:block; /* 以區塊顯示 */
    48.         color:black; /* 文字顏色 */
    49.         padding:0px 2px; /* 內補丁間隔 */
    50.     }
    51. /*]]>*/

    57.     
    58.         level
    59.         
    60.             level_ title
    61.             level_ 標題 1
    62.             level_ 標題 2
    63.             level_ 標題 3
    64.             level_ 標題 4
    65.             level_ 標題 5
    66.         
    67.     
    68.     
    69.         
      level 1
    70.         
    71.             level_ title
    72.             level_ 標題 1
    73.             level_ 標題 2
    74.             level_ title 3
    75. level_標題4
    76.             level_ 標題 5
    77.         
    78.     
    79.     
    80.         
      level 2
    81.         
    82.             level_ title
    83.             level_ 標題 1
    84.             level_ 標題 2
    85.             level_ 標題 3
    86.             level_ 標題 4
    87.             level_ 標題 5
    88.         
    89.     
    90.     
    91.         
      level 3
    92.         
    93.             level_ title
    94.             level_ 標題 1
    95.             level_ 標題 2
    96. level_ title 3
    97.             level_ 標題 4
    98.             level_ 標題 5
    99.         
    100.     
    101.     
    102.         
      level 4
    103.         
    104.             level_ title
    105.             level_ 標題 1
    106.             level_ 標題 2
    107.             level_ title 3
    108.             level_ 標題 4
    109.             level_ 標題 5
    110.         
    111.     

    2.2 相容 IE、Opera、Firefox 的 CSS 彈出式選單（腳本實作）
      linenum
    1. " http://www.w3.org/TR/html4/loose.dtd">
    5. Untitled Document
    7. /*    body{ margin:0px auto; width:768px; /* 定義頁以中顯示,*/}
    8.     *{text-decoration:none!important; /* 定義所有連結不顯示底線 */}
    9.     /* ------------------ start 針對 Opera, Firefox 的 CSS 彈出式選單 ----------------- --*/
    10.     .pmHorizo​​ntalBottomOut{background-color:#fff!important; /* 定義主選單域背景色 */} 
    11.     .pmHorizo​​ntalBottomOut .level{  /* 定義一級類別屬性 */
    12.         width:120px; /* 寬度 */
    13.         height:17; /* 高度 */
    14.         position:relative; /* 顯示位置為相對位置 */
    15.         display:block; /* 以區塊模式顯示 */
    16.         background-color:#D8D8D8; /* 背景色 */
    17.         padding:0px 2px; /* 文字內補丁間隔 */
    18.         margin:0px 1px 0px 0px; /* 選單外補丁間隔 */
    19.         float:left;
    20.     }
    21.     .pmHorizo​​ntalBottomOut .level:hover { /* 當滑鼠劃過一級選單 */
    22.         background-color:#6633FF; /* 背景色 */
    23.         color:#FFFFFF; /* 文字顏色 */
    24.     }
    25.     .pmHorizo​​ntalBottomOut .level_{display:none; /* 預設隱藏二級類別 */}
    26.     
    27.     .pmHorizo​​ntalBottomOut .level:hover .level_ { /* 滑鼠劃過時觸發顯示二級類別 */
    28.         display:block; /* 以區塊顯示 */
    29.         width:124px; /* 寬度 */
    30.         height:auto; /* 高度 */
    31.         margin:0px -2px 0px -2px; /* 外補丁 */
    32.         background-color:#EFEFEF; /* 定義背景色 */
    33.         position:absolute; /* 位置為絕對位置 */
    34.     }
    35.     .pmHorizo​​ntalBottomOut .level:hover .level_ .level_title {
    36.         /* 定義二級類別標題樣式 */
    37.         font-weight:bold; /* 字體加粗 */
    38.         background-color:#A7ADFE; /* 背景色 */
    39.         color:white; /* 文字顏色 */
    40.     }
    41.     .pmHorizo​​ntalBottomOut .level:hover .level_ a:hover {
    42.         /* 定義二級類別連結顯示樣式 */
    43.         background-color:#F83658; /* 背景色 */
    44.         color:white; /* 文字顏色 */
    45.     }
    46.     .pmHorizo​​ntalBottomOut .level_ * { 
    47.         /* 定義所有二級類別一般屬性 */
    48.         display:block; /* 以區塊顯示 */
    49.         color:black; /* 文字顏色 */
    50.         padding:0px 2px; /* 內補丁間隔 */
    51.     }
    52.     /* ------------------ end 針對 Opera, Firefox 的 CSS 彈出式選單 ----------------- --*/
    53.     
    54.     /* ------------------- start 針對 IE 的 CSS 彈出式選單 -------------------- */
    55.     .levelIe{  /* 定義一級類別屬性 */
    56.         width:120px; /* 寬度 */
    57.         height:17; /* 高度 */
    58.         position:relative; /* 顯示位置為相對位置 */
    59.         display:block; /* 以區塊模式顯示 */
    60.         background-color:#D8D8D8; /* 背景色 */
    61.         padding:0px 2px; /* 文字內補丁間隔 */
    62.         margin:0px 1px 0px 0px; /* 選單外補丁間隔 */
    63.         float:left;
    64.     }
    65.     .levelIe { /* 當滑鼠劃過一級選單時 */
    66.         background-color:#6633FF; /* 背景色 */
    67.         color:#FFFFFF; /* 文字顏色 */
    68.     }
    69.     .levelIe .level_ { /* 滑鼠劃過時觸發顯示二級類別 */
    70.         display:block; /* 以區塊顯示 */
    71.         width:124px; /* 寬度 */
    72.         height:auto; /* 高度 */
    73.         margin:0px -2px 0px -2px; /* 外補丁 */
    74.         background-color:#EFEFEF; /* 定義背景色 */
    75.         position:absolute; /* 位置為絕對位置 */
    76.     }
    77.     .levelIe .level_ .level_title {
    78.         /* 定義二級類別標題樣式 */
    79.         font-weight:bold; /* 字體加粗 */
    80.         background-color:#A7ADFE; /* 背景色 */
    81.         color:white; /* 文字顏色 */
    82.     }
    83.     .levelIe .level_ a:hover {
    84.         /* 定義二級類別連結顯示樣式 */
    85.         background-color:#F83658; /* 背景色 */
    86.         color:white; /* 文字顏色 */
    87.     }
    88.     .levelIe .level_ * { 
    89.         /* 定義所有二級類別一般屬性 */
    90.         display:block; /* 以區塊顯示 */
    91.         color:black; /* 文字顏色 */
    92.         padding:0px 2px; /* 內補丁間隔 */
    93.     }
    94.     /* ------------------- end 針對 IE 的 CSS 彈出式選單 -------------------- */
    95. /*]]>*/
    98. //if (navigator.appName=="Microsoft Internet Explorer") {
    99.     function fPmHorizo​​ntalBottomOut() {
    100.         var getItem = document.getElementById("pmHorizo​​ntalBottomOut").getElementsByTagName("div");
    101.         for (var i=0; i            getItem[i].onmouseover=function() { 
    102.                 if(    this.className=="level"){
    103.                     this.className="levelIe";
    104.                 }
    105.             }
    106.             getItem[i].onmouseout=function() { 
    107.                 if(    this.className=="levelIe"){
    108.                     this.className="level";
    109.                 }
    110.             }//css彈出式選單腳本作者：shawl.qiu
    111.         }
    112.     }
    113.     window.onload=fPmHorizo​​ntalBottomOut;
    114. }
    115. //]]>

    121.     
    122.         level
    123.         
    124.             level_ title
    125.             level_ 標題 1
    126.             level_ 標題 2
    127.             level_ 標題 3
    128.             level_ 標題 4
    129.             level_ 標題 5
    130.         
    131.     
    132.     
    133.         
      level 1
    134.         
    135.             level_ title
    136.             level_ 標題 1
    137.             level_ 標題 2
    138.             level_ title 3
    139. level_標題4
    140.             level_ 標題 5
    141.         
    142.     
    143.     
    144.         
      level 2
    145.         
    146.             level_ title
    147.             level_ 標題 1
    148.             level_ 標題 2
    149.             level_ 標題 3
    150.             level_ 標題 4
    151.             level_ 標題 5
    152.         
    153.     
    154.     
    155.         
      level 3
    156.         
    157.             level_ title
    158.             level_ 標題 1
    159.             level_ 標題 2
    160. level_ title 3
    161.             level_ 標題 4
    162.             level_ 標題 5
    163.         
    164.     
    165.     
    166.         
      level 4
    167.         
    168.             level_ title
    169.             level_ 標題 1
    170.             level_ 標題 2
    171.             level_ title 3
    172.             level_ 標題 4
    173.             level_ 標題 5
    174.         
    175.     


    3.結論
    修改以上範例可以看出，如果已經編寫出了一個可用的CSS彈出選單範例，那就要編寫出彈出位置在其他位置的CSS彈出選單的話，只需小小一下就OK了。

    4。預覽

    4.1 1.2 相容 IE、Opera、Firefox 的 CSS 彈出式選單（腳本實作）的預覽
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序，用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

    顯示更多

    熱門文章

    如何修復KB5055523無法在Windows 11中安裝？
    4 週前 By DDD
    如何修復KB5055518無法在Windows 10中安裝？
    4 週前 By DDD
    <🎜>：種植花園 - 完整的突變指南
    3 週前 By DDD
    <🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    如何修復KB5055612無法在Windows 10中安裝？
    3 週前 By DDD
    顯示更多

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版，非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    顯示更多

    熱門話題

    Java教學
    1664
    14
    CakePHP 教程
    1421
    52
    Laravel 教程
    1315
    25
    PHP教程
    1266
    29
    C# 教程
    1239
    24
    顯示更多
    Related knowledge
    vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

    在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

    了解HTML，CSS和JavaScript：初學者指南 了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

    HTML，CSS和JavaScript的角色：核心職責 HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

    HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

    bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

    在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

    bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

    創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

    bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

    要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

    bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

    要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

    bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

    如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

    See all articles