2019年11月21日 星期四

Bootstrap 4 學習筆記 (四) : 圖示與按鈕

由於按鈕與圖示關係較密切, 所以我把這兩個元件放在一起測試. 本系列之前的測試文章參考 :

Bootstrap 4 學習筆記 (一) : 環境配置
Bootstrap 4 學習筆記 (二) : 網格與容器
Bootstrap 4 學習筆記 (三) : 表格

Bootstrap 教學文件參考 :

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


一. 圖示 (icon) : 

圖示 (icon) 在 UI 設計上扮演非常重要的角色, 通常用在工具列或操作按鈕上. 設計良好的圖示可讓使用者第一眼就能了解按鈕或選項的功能. Bootstrap 提供了來自 Glyphicon Halsling 超過 250 種的文字圖示 (glyphicon), 參考 :

https://getbootstrap.com/docs/3.3/components/




這些樣式類別名稱都是以 glyphicon- 開頭, 用法如下 :
  • 必須以沒有內容的 HTML 元素為容器, 通常使用 span 元素.
  • 必須先套用基礎類別 glyphicon 後再套用以 glyphicon- 開頭的類別.
  • 文字圖示的容器 span 元素最好加上 aria-hidden="true" 屬性.
此處 aria-hidden 屬性設為 true 之目的是為了隱藏文字圖示的存在, 讓螢幕朗讀軟體讀不到此 span 元素, 因為 Glyphicon 圖示是 Unicode 編碼的文字, 網頁朗讀器會以為是文字而進行解讀, 但卻讀出無法理解的內容, 這會令使用者感到困惑, 影響網頁的無障礙親和性 (affinity), 參考 :

被忽視的HTML attribute aria-label、aria-hidden

文字圖示載體容器 (即 span 元素) 的相關樣式類別如下表 :


 glyphicon 樣式類別 說明
 glyphicon 文字圖示的必要基礎類別
 glyphicon-圖示名稱 各種文字圖示
 form-control-feedback 在表單群組中用來將文字圖示內嵌到控制項裡


其中 form-control-feedback 用在表單群組, 以便將群組內的文字圖示回應給控制項, 增進控制項之 UI 表達力, 例如在 search 搜尋框中嵌入一個放大鏡搜尋圖示等用途.


範例 1 : 文字圖示測試 (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">
      <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-email" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-print" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span><br>
      <span class="glyphicon glyphicon-volume-on" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-volume-down" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-paperclip" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-open" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-circle-arrow-right" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span>
      <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span>
    </div>
  </body>
</html>


瀏覽結果如下 :




注意, span 元素不要有任何內容, 否則會顯示在圖示後面.

如果覺得預設圖示太小, 可以用 CSS 樣式更改 glyphicon 類別的 font-size 樣式, 例如在上面範例的 head 內添加如下之 style 樣式設定 :

    <style>
      .glyphicon {font-size: 30px;}
    </style>

這樣每個圖示都會放大成 30 px * 30 px 的大小, 例如 :


範例 2 : 文字圖示測試 (2) 調整圖示大小 [看原始碼]



參考 :

How Do I Make Glyphicons Bigger? (Change Size?)


二. 按鈕 (Button) : 

HTML 元素中可用 a, input, 以及 button 來製作按鈕, 但其外觀普普, Bootstrap 提供了 btn 與以 btn- 開頭的一系列樣式類別, 只要在按鈕元素上套用這些類別, 就能讓普普的按鈕來個華麗轉身. 按鈕相關樣式如下表 :


 按鈕相關之樣式類別 說明
 btn 必要的基礎按鈕樣式
 btn-default 預設按鈕樣式
 btn-primary 深藍色按鈕 (表示主要功能)
 btn-success 綠色按鈕 (表示成功)
 btn-info 藍色按鈕 (表示訊息)
 btn-warning 黃色按鈕 (表示警告)
 btn-danger 紅色按鈕 (表示危險)
 btn-link 顯示白底藍色超連結
 btn-xs 超小按鈕
 btn-sm 小按鈕
 btm-lg 大按鈕
 btn-block 與父元素寬度相同的按鈕
 active 啟用按鈕
 disabled 停用按鈕


注意, 其中 btn 是必要的基礎預設類別, 在套用其他以 btn- 開頭的類別之前必須先套用 btn 才會有效果.


範例 3 : 按鈕測試 (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">
      <a class="btn btn-default" role="button" href="#">a: role=button</a>
      <input class="btn btn-default" type="button" value="input: button">
      <input class="btn btn-default" type="submit" value="input: submit">
      <input class="btn btn-default" type="reset" value="input: reset">
      <button class="btn btn-default disabled">button: disabled</button>
      <button class="btn btn-default active">button: active</button>
    </div>
  </body>
</html>

瀏覽結果如下, 可見 active 的按鈕顏色較深 :




下面範例是 5 種特定顏色的按鈕 :


範例 4 : 按鈕測試 (2) 按鈕顏色 [看原始碼]

<!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">
      <button class="btn btn-default">btn-default</button>
      <button class="btn btn-primary">btn-primary</button>
      <button class="btn btn-success">btn-success</button>
      <button class="btn btn-info">btn-info</button>
      <button class="btn btn-warning">btn-warning</button>
      <button class="btn btn-danger">btn-danger</button>
      <button class="btn btn-link">btn-link</button>
    </div>
  </body>
</html>

瀏覽結果如下 :




神奇的是, Bootstrap 居然把 button 元素利用 btn-link 類別換成超連結了.

最後來測試按鈕的尺寸設定類別 :


範例 5 : 按鈕測試 (3) 按鈕尺寸 [看原始碼]

<!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">
      <button class="btn btn-default">預設按鈕</button>
      <button class="btn btn-default btn-xs">超小按鈕</button>
      <button class="btn btn-default btn-sm">小按鈕</button>
      <button class="btn btn-default btn-lg">大按鈕</button>
      <button class="btn btn-default btn-block">與父元素同寬之按鈕</button>
    </div>
  </body>
</html>

瀏覽結果如下 :




此例最後一個按鈕套用 btn-block 類別, 其寬度與其父元素 (即 div 容器) 相同. 按鈕可以加上文字圖示 (glyphicon), 只要把圖示作為按鈕元件的內容即可, 因此有內容的 a 元素與 button 元素最適合, 例如 :


範例 6 : 按鈕測試 (4) 加上文字圖示 [看原始碼]

<!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">
      <button class="btn btn-info">
        <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
        <label>放入購物車</label>
      </button>
      <a class="btn btn-success">
        <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
        <label>聯絡客服</label>
      </a>
    </div>
  </body>
</html>

此例分別使用 button 與 a 元素製作按鈕, 因為它們才有內容 (即 innerHTML 屬性), 瀏覽結果如下 :




加上文字圖示的按鈕可讀性就比較高了.

沒有留言 :