---
title: Astro課程 0727 - CSS(Day8)
tags: astro, css, bootstrap
---

## 時間軸
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](https://getbootstrap.com/docs/4.5/utilities/embed/)

## 修改影片比例

找到 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](https://getbootstrap.com/docs/4.5/utilities/flex/#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](https://getbootstrap.com/docs/4.5/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

[Modal](https://getbootstrap.com/docs/4.5/components/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

[collapse](https://getbootstrap.com/docs/4.5/components/collapse/)

# Accordion
手風琴效果

`data-target`和`data-parent`要對應