BS4(2)-基本版面運用

範例結果

以上中文描述源自BS4中文網

一、準備工作

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>bootstrap4</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
</head>
<body>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
</body>
</html>

二、圖片設定

(一)大張圖片產生捲軸時,依視窗自適應處理

S0:header之下加入圖片

  <header>
    <img src="./images/header.jpg" alt="">
  </header>

S1:圖片自適應處理

【Documentaion(文件)】>【Content(內容)】>【Images(圖片)】(連結處)

Bootstrap 中的圖片可利用 .img-fluid 設定為響應式。 max-width:100%;和 height:auto; 也需一併使用,讓圖片可依父元素屬性進行縮放。

  <header>
    <img src="../images/header.jpg" alt="" class="img-fluid">
  </header>

(二)組圖

(1)【Documentaion(文件)】>【Content(內容)】>【Figures(圖片區)】(連結處)

使用內建的 .figure、 figure-img 和 .figure-caption 類別,設定 HTML5 <figure>和 <figcaption> 的底線樣式。 圖檔沒有明確指定尺寸,因此請務必在 <img> 標籤加入 .img-fluid 設定圖片為響應式。

(2)【Documentaion(文件)】>【Content(內容)】>【Images(圖片)】(連結處)

除了 邊框-圓角 公用程式 之外,你可以使用 .img-thumbnail 讓圖片有1px邊框的顯示。

(3)【Documentaion(文件)】>【Utilities(通用類別)】>【Borders(邊框)】(連結處)

  <section>
    <h2>作品集</h2>
    <figure class="figure">
      <img src="./images/Album01.jpg" alt="" class="figure-img img-fluid rounded img-thumbnail border-danger rounded-circle">
      <figcaption  class="figure-caption text-center">作品1</figcaption>
    </figure>
  </section>