時間軸

10:38 5倍官網切版問題：幻燈片
10:54 Utilities
12:15 Flex fill
13:35 bootstrap Utilities Borders
13:40 bootstrap Utilities Overflow
13:50 bootstrap components Navbar
14:10 aria
15:08 bootstrap components Carousel
15:40 bootstrap components Modal
16:13 bootstrap components Collapse

5倍官網切版問題：幻燈片

可能解決方式
把文字<p>寬度設為和欄寬一樣
因為寬度不應該由文字多寡決定

Utilities

embed

Bootstrap

修改影片比例

找到 class 名稱，修改成自定比例

css

  .embed-responsive-3by1::before {
    padding-top: 33%;
  }

html

<div class="embed-responsive embed-responsive-3by1">
  <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/MrdHhrqWw1o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

頁面規劃與架構分析

紙上的預排板

哪些頁面有類似的架構? => 模組化
用div去思考，哪些設為section, article?
class名稱要設為什麼?
重要的內容設成h1
下載頁面要如何呈現?

不是稀飯版

錯位版
破格式

Flex fill

fill

Boarder

這些色彩名稱很常見（不一定有白色）

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>

膠囊和圓形按鈕

<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">

overflow

超出的範圍用捲軸或是隱藏

Eg. 圖片 div 做圓角或是圖片本身做圓角

div圓角，超過div的圖片部分隱藏

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 mx-auto">
        <div class="pic rounded-circle overflow-hidden">
          <img class="w-100" src="https://picsum.photos/id/684/100/100" alt="">
        </div>   
      </div> 
    </div>
  </div>

圖片本身圓角

    <div class="row">
      <div class="col-12 col-md-6 mx-auto">
        <div class="pic">
          <img class="w-100 rounded-circle" src="https://picsum.photos/id/684/100/100" alt="">
        </div>   
      </div> 
    </div>

Components

navbar

改顏色

navbar控制文字顏色

navbar-light bg-light

漢堡選單

設定漢堡選單的外框不要為圓角

    .navbar-toggler{
      border-radius: 0;
      border-color: yellow;
    }
    .navbar-toggler:focus{
      outline: none; 
    }

用絕對定位把手機版面的漢堡選單固定

    @media screen and (max-width: 767px){
      .navbar-collapse {
        position: absolute;
        background-color: #aaa;
        width: 100%;
        top: 100%; # 父層空間的高度
        left: 0;
      }
    }

幻燈片

如果放了兩組幻燈片，要把data-target更換成不同名字

option

控制時間

javascript

$('.carousel').carousel({
  interval: 4000 #4秒
  touch: true #手機版可以拖拉換頁
})

Modal

兩種寫法，
可以用data-traget指定控制的物件，或是直接加在超連結裡

<a href="#" data-toggle="modal" data-target="#exampleModal">open</a>
<a href="#exampleModal" data-toggle="modal" data-target="">href</a>

垂直置中

model-dialog-center

如果跳出視窗的內容太多，再加上
modal-dialog-scrollable

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

collapse

Accordion

手風琴效果

data-target和data-parent要對應

時間軸