2022年8月3日 星期三

Bootstrap 4 學習筆記 (十) : 警示, 面板與手風琴

這幾天因為要準備客家語文學會的 GitHub 架站簡報資料, 把 Bootstrap 筆記複習了一遍, 發現還缺了 alert (警示), panel (面板), 以及 accordion (手風琴) 這幾個內容呈現容器元件還沒測試, 所以就趁這機會做個完結唄. 本系列之前的測試文章參考 :

# Bootstrap 4 學習筆記 (一) : 環境配置
# Bootstrap 4 學習筆記 (二) : 網格與容器
# Bootstrap 4 學習筆記 (三) : 表格
# Bootstrap 4 學習筆記 (四) : 圖示與按鈕
# Bootstrap 4 學習筆記 (五) : 文字與圖片效果
# Bootstrap 4 學習筆記 (六) : 表單
# Bootstrap 4 學習筆記 (七) : 按鈕選單
# Bootstrap 4 學習筆記 (八) : 導覽頁籤
# Bootstrap 4 學習筆記 (九) : 導覽列

Bootstrap 教學文件參考 :

# 第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇


一. Alert (警示) : 

此元件使用具有醒目背景色的 div 區塊來顯示重要訊息, 主要套用 alert 與下列五個樣式類別, 並指定 role="alert" 屬性 :


 樣式類別 說明
 alert 必要的警示區塊樣式
 alert-success 背景為咖啡色之區塊
 alert-info 背景為淡藍色之區塊 
 alert-warning 背景為黃色之區塊 
 alert-danger 背景為黃色之區塊
 alert-dismissible 添加可關閉按鈕 (x)


這些 div 外面再用 class="container" 的 div 區塊包起來, 基本結構如下 :

    <div class="container">
      <div class="alert alert-success" role="alert">
        這是 alert-success 訊息！
      </div>
    </div>

例如 : 



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="alert alert-success" role="alert">
        這是 alert-success 訊息！
      </div>
      <div class="alert alert-info" role="alert">
        這是 alert-info 訊息！
      </div>
      <div class="alert alert-warning" role="alert">
        這是 alert-warning 訊息！
      </div>
      <div class="alert alert-danger" role="alert">
        這是 alert-danger 訊息！
      </div> 
    </div>
  </body>
</html>

結果如下 : 




如果要建立可以關閉的警示, 需要添加 alert-dismissible 樣式類別, 並搭配一個有 close 樣式的 button 物件, 例如 :

      <div class="alert alert-danger alert-dismissible" role="alert">
        <button class="close" data-dismiss="alert">
          <span>&times;</span>
        </button>
        這是 alert-danger 訊息！
      </div> 

完整範例如下 : 



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="alert alert-success" role="alert">
        這是 alert-success 訊息！
      </div>
      <div class="alert alert-info" role="alert">
        這是 alert-info 訊息！
      </div>
      <div class="alert alert-warning" role="alert">
        這是 alert-warning 訊息！
      </div>
      <div class="alert alert-danger" role="alert">
        這是 alert-danger 訊息！
      </div> 
      <div class="alert alert-danger alert-dismissible" role="alert">
        <button class="close" data-dismiss="alert">
          <span>&times;</span>
        </button>
        這是 alert-danger 訊息！
      </div> 
    </div>
  </body>
</html>

結果如下 :




按後面那個 x 按鈕就可以關閉該條警示訊息了. 


二. Panel (面板) : 

面板也是像上面 alert 一樣的區塊, 但它除了主體 (body) 外還多出板首 (heading) 板尾 (footer) 兩部分, 不過首尾都是可有可無的. 基本結構由兩層 div 構成, 外層 div 需套用 panel 與下列四種背景色樣式類別 : 


 面板背景色樣式類別 說明
 panel-default 背景為灰色之預設面板
 panel-primary 背景為藍色之面板
 panel-success 背景為咖啡色之區塊 
 panel-info 背景為淡藍色之區塊
 panel-warning 背景為黃色之區塊
 panel-danger 背景為紅色之區塊


主體要套用 panel-body 樣式類別, 而板尾則套用 panel-footer 樣式類別, 基本結構如下 : 

     <div class="panel panel-default">
        <div class="panel-heading">面板板首</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
     </div>

例如 : 


範例 2-1 : 各種背景色之面板區塊測試 [看原始碼] 

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">面板板首 (default)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-primary">
        <div class="panel-heading">面板板首 (primary)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-success">
        <div class="panel-heading">面板板首 (success)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-info">
        <div class="panel-heading">面板板首 (info)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-warning">
        <div class="panel-heading">面板板首 (warning)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
      <div class="panel panel-danger">
        <div class="panel-heading">面板板首 (danger)</div>
        <div class="panel-body">面板主體</div>
        <div class="panel-body">面板板尾</div>
      </div>
    </div>
  </body>
</html>

結果如下 : 









板尾部分若不需要可以去除. 


三. Accordion (手風琴) : 

所謂手風琴效果 (accordion) 就是將網頁內容上下堆疊, 一次只展開一部份, 其餘部分會自動縮合起來的呈現方式, 這種可縮合 (collapse) 結構是在上面介紹的面板 (panel) 上發展出來的, 主要是添加了 a 標籤的頁內錨點 (anchor) 與 panel-collapse, collapse 等樣式類別來控制面板主體區塊的展開與縮合, 基本結構如下 : 

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">標題</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">內容</div>
        </div>
      </div>

參考 :


可見此組件基本上就是一個加工後的面板, 主要是板首標題改用 a 標籤來控制本體 div 區塊中的錨點 (id='collapse1') 以使其展開或縮合, 並為 a 標籤添加 data-toggle="collapse" 屬性, 另外, 本體 div 區塊也要加上 panel-collapse 與 collapse 兩個樣式類別, 完整網頁碼如下例 : 


 
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">標題</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">內容</div>
        </div>
      </div>
    </div>
  </body>
</html>

結果如下 : 




預設內容是收合起來的, 點標題才會展開. 

如果預設要展開, 可在本體的 div 區塊添加 in 樣式類別 : 

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">標題</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body">內容</div>
        </div>
      </div>

例如 :



結果如下 : 




手風琴 (Accordion) 就是以上面的可收合面板為基礎建構的, 將多個可縮合面板再用一個樣式類別為 panel-group 的 div 區塊包起來並指定一個 id, 每一個可縮合面板添加一個 data-parent 屬性指向此 id 即可, 基本結構 (兩個可收合面板) 如下 : 

      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">標題 1</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">內容 1</div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">標題 2</a>
            </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">內容 2</div>
          </div>
        </div>
      </div>

手風琴群組裡面的每個面板都可以各自指定板首的背景色樣式類別, 例如 panel-primary, panel-info 等, 如下列範例所示  : 



<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">標題 1</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">內容 1 (default)</div>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">標題 2</a>
            </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">內容 2 (primary)</div>
          </div>
        </div>
        <div class="panel panel-success">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">標題 3</a>
            </h4>
          </div>
          <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">內容 3 (success)</div>
          </div>
        </div>
        <div class="panel panel-info">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">標題 4</a>
            </h4>
          </div>
          <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">內容 4 (info)</div>
          </div>
        </div>
        <div class="panel panel-warning">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">標題 5</a>
            </h4>
          </div>
          <div id="collapse5" class="panel-collapse collapse">
            <div class="panel-body">內容 5 (warning)</div>
          </div>
        </div>
        <div class="panel panel-danger">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">標題 6</a>
            </h4>
          </div>
          <div id="collapse6" class="panel-collapse collapse">
            <div class="panel-body">內容 6 (danger)</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

注意, 其中面板 1 的主體區塊添加了 in 樣式類別, 所以面板 1 預設是展開的, 結果如下 : 




可見每開啟一個面板, 其餘面板就會自動收合. 不過因板首的標題是 a 超連結, 所以會出現底線, 若不想出現底線可於每個板首 a 標籤添加 style="text-decoration:none;" 的樣式屬性, 或者於 head 標籤內的 style 標籤中, 統一規範所有超連結都步出現底線 :

a {text-decoration:none;} 


於

沒有留言:

張貼留言