# 圖片滿版排版、時間軸排版

###### tags: `Bootstrap` `CSS` `HTML`

---

:star2: 很常使用，建議多練習

.box {
        height: 240px;
      }
      .bg-cover {
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }

加上使用Bootstarp排版
100vh，撐開整個瀏覽器高度
h-100，容器內100%高度
-50，容器內50%
row，可以把容器內的空白消除

<div class="container">
      <div class="row">
        <!-- 
        1.圖片分成3等分(12/4=3)，做一個底色方便查看，用背景圖片才好做滿版
        2.寫一個bg-cover讓圖片置中符合大小-->
        <div class="col-4 box bg-info border bg-cover" style="background-image: url(image/animals-03.jpg)"></div>
        <div class="col-4 box bg-info border bg-cover" style="background-image: url(image/animals-03.jpg)"></div>
        <div class="col-4 box bg-info border bg-cover" style="background-image: url(image/animals-03.jpg)"></div>
      </div>
      <!-- height: 100vh 表示瀏覽器100%的高度 -->
      <div class="row" style="height: 100vh">
        <div class="col-8 bg-cover" style="background-image: url(image/animals-12.jpg)"></div>
        <div class="col-4">
          <!-- 
            1.使用d-flex製作一個彈性容器，flex-column垂直排版
            2.h-100表示容器內高度100%
            3.row 可以抵消容器內的空白 -->
          <div class="row d-flex flex-column h-100">
            <div class="h-50 bg-cover" style="background-image: url(image/animals-11.jpg)"></div>
            <div class="h-50  bg-cover" style="background-image: url(image/animals-10.jpg)"></div>
          </div>
        </div>
      </div>
    </div> <!-- container end -->

---

## 時間軸排版

CSS
用div包住整個版面

.timeline-section {
    position: relative;
}
.timeline-section:after {
    position: absolute;
    background-color: #fa0;
    top: 0;
    bottom: 0;
    width: 3px;
    content: "";
    left: 50%;
    transform: translateX(-50%) ;
}

---
<span class="code1"></span>
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>