2019年11月21日 星期四

Bootstrap 4 學習筆記 (五) : 文字與圖片效果

做完按鈕與圖示測試後, 繼續趁勝追擊, 本篇要測試的文字與圖片效果, 包括文字的色彩與對齊, 以及圖片的對齊與縮圖相關的樣式類別. 本系列之前的測試文章參考 :

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

Bootstrap 教學文件參考 :

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


一. 色彩樣式類別 : 

色彩主要是套用在容器或文字, 網頁中的色彩分前景與背景, Bootstrap 提供如下前景與背景色彩樣式類別 :

 前景顏色樣式類別 說明
 text-muted 設定文字前景色彩為黑色 (不重要)
 text-primary 設定文字前景色彩為深藍色 (重要)
 text-success 設定文字前景色彩為綠色 (表示成功)
 text-info 設定文字前景色彩為藍色 (表示訊息)
 text-warning 設定文字前景色彩為黃色 (表示警告)
 text-danger 設定文字前景色彩為紅色 (表示危險)

 背景顏色樣式類別 說明
 bg-primary 設定文字背景色彩為深藍色 (重要)
 bg-success 設定文字背景色彩為綠色 (表示成功)
 bg-info 設定文字背景色彩為藍色 (表示訊息)
 bg-warning 設定文字背景色彩為黃色 (表示警告)
 bg-danger 設定文字背景色彩為紅色 (表示危險)


範例 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">
      <h2 class="text-muted">Hello World (text-muted)</h2>
      <h2 class="text-primary">Hello World (text-primary)</h2>
      <h2 class="text-success">Hello World (text-success)</h2>
      <h2 class="text-info">Hello World (text-info)</h2>
      <h2 class="text-warning">Hello World (text-warning)</h2>
      <h2 class="text-danger">Hello World (text-danger)</h2>
    </div>
  </body>
</html>

瀏覽結果如下 :




感覺 text-warning 的黃色好像偏橘色. 下面範例為背景色測試 :


範例 2 : 色彩樣式測試 (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">
      <h2 class="bg-primary">Hello World (bg-primary)</h2>
      <h2 class="bg-success">Hello World (bg-success)</h2>
      <h2 class="bg-info">Hello World (bg-info)</h2>
      <h2 class="bg-warning">Hello World (bg-warning)</h2>
      <h2 class="bg-danger">Hello World (bg-danger)</h2>
    </div>
  </body>
</html>

瀏覽結果如下 :




背景色 bg-warning 的黃色比較像黃色, 但偏淡了些.


二. 文字效果樣式類別 :

許多文字效果在 HTML5 都必須用 CSS 樣式去設定, Bootstrap 將許多常用的文字效果製作成方便好用的樣式類別如下表 :


 文字效果樣式類別 說明
 text-left 文字向左對齊
 text-center 文字置中對齊
 text-right 文字向右對齊
 text-nowrap 文字超出容器寬度不跳行
 text-truncate 文字超出容器寬度以 ... 取代
 text-lowercase 英文字母全部轉換為小寫
 text-uppercase 英文字母全部轉換為大寫
 text-capitalize 英文字母每個字第一個字母大寫
 font-weight-bold 文字以粗體顯示
 font-weight-normal 文字以正常粗細顯示
 font-weight-light 文字以細字體顯示
 font-italic 文字以斜體顯示


不過實測結果, text-truncate 與最後面 4 個無效.

參考 :

https://bootstrap.hexschool.com/docs/4.0/utilities/text/


範例 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">
      <h2 class="text-left">Hello World (text-left)</h2>
      <h2 class="text-center">Hello World (text-center)</h2>
      <h2 class="text-right">Hello World (text-right)</h2>
      <h2 class="text-nowrap">Hello World Hello World Hello World Hello World Hello World  Hello World Hello World Hello World (text-justify)</h2>
    </div>
  </body>
</html>

瀏覽結果如下 :




在 HTML 中字串太長超出容器寬度時預設會將多出的字串跳行顯示 (text-wrap), 若要停止跳行就要用 text-nowrap. 下面範例測試大小寫轉換 :


範例 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">
      <h2 class="text-lowercase">Hello World (text-lowercase)</h2>
      <h2 class="text-uppercase">Hello World (text-uppercase)</h2>
      <h2 class="text-capitalize">heLLo woRLd (text-capitalize)</h2>
      <h2 class="text-truncate">Hello World Hello World Hello World Hello World Hello World  Hello World Hello World Hello World (text-truncate)</h2>
    </div>
  </body>
</html>

瀏覽結果如下 :




可見 text-capitalize 只會將每個字的第一個字母改成大寫, 其餘字母不變. 但奇怪的是 text-truncate 卻無作用, why? 即使加上 display: block 等樣式也沒有用, 可能是 bug, 這只好回歸 CSS 用 text-overflow: ellipsis; 來解決, 參考 :

Bootstrap 4 list item single line only (ellipsis not working)

下面範例測試文字的 font-weight 與 font-style :


範例 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">
      <p class="font-weight-bold">Hello World (font-weight-bold)</p>
      <p class="font-weight-normal">Hello World (font-weight-normal)</p>
      <p class="font-weight-light">Hello World (font-weight-light)</p>
      <p class="font-italic">Hello World (font-italic)</p>
    </div>
  </body>
</html>


但很奇怪, 不曉得為什麼, 瀏覽結果無效 :




三. 圖片樣式類別 :

在 HTML 中, 圖片放在 img 元素之中 (用 src 屬性指定圖片來源), 參考 :

網頁技術速學筆記 (一) : HTML 基礎

Bootstrap 提供了幾個常用的圖片樣式類別如下表 :


 圖片樣式類別 說明
 img-responsive 響應式圖片 (隨父元素寬度自動縮放)
 img-rounded 圓角圖片
 img-circle 圓形圖片
 img-thumbnail 縮圖圖片
 center-block 圖片置中


套用 img-responsive 類別的圖片在不同螢幕大小的裝置中會自動縮放 (自適應或響應式 responsive), 避免需用捲軸捲動之困擾.


範例 6 : 圖片樣式測試 (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">
      <img class="img-responsive" src="../html5/img/20190510-cat.jpg">
    </div>
  </body>
</html>


瀏覽結果如下, 將瀏覽器縮放時, 圖片也跟著縮放, 縮到圖片的解析度時, 高度部分才會出現捲軸 :





範例 7 : 圖片樣式測試 (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">
      <img class="img-rounded" width="33%" src="../html5/img/20190510-cat.jpg">
      <img class="img-circle" width="33%" src="../html5/img/20190510-cat.jpg">
      <img class="img-thumbnail" width="33%" src="../html5/img/20190510-cat.jpg">
    </div>
  </body>
</html>


瀏覽結果如下 :




由於原圖片為長方形, 因此 img-circle 的效果變成橢圓形.

下面範例測試 center-block 類別的圖片置中效果 :


範例 8 : 圖片樣式測試 (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">
      <img class="center-block" src="../html5/img/20190510-cat.jpg">
      <h2 class="text-center">可愛的小咪<h2>
    </div>
  </body>
</html>


套用 center-block 類別後, 圖片就置中了, 瀏覽結果如下 :



哈哈哈, 我家小咪真可愛.

沒有留言:

張貼留言