* ---
title: Astro課程 0722 - CSS(Day7)
tags: astro, css, bootstrap
---

## 時間軸

10:35 切版問題討論
11:29 框限等寬
12:00 Bootstrap

# 切版問題討論

- `vender prefix` 前綴字：只有特定瀏覽器看得懂

[Ref: MDN](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)

CSS prefixes
The major browsers use the following prefixes:

-webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based browser)
-moz- (Firefox)
-o- (old pre-WebKit versions of Opera)
-ms- (Internet Explorer and Microsoft Edge)

[方格子](https://vocus.cc/)

- 問題：欄位的底部如何切齊?

1. flex-grow
2. 絕對定位

- 問題：多餘的文字以`...`顯示
[Ref: 讓多行文字超出時自動隱藏](https://www.minwt.com/webdesign-dev/css/20296.html)

    (單行寫法)
    
    .txt {
      background-color: #ccc;
      width: 500px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;       
    }

    (多行寫法: webkit)
    
    .txt{
      width: 500px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

[Yahoo!](https://tw.buy.yahoo.com/activity/activity950?p=all2-00-090316-credit-card)

- 問題：灰色框線等寬

1. 用`justfy-content: evenly` (item不是剛好倍數時會產生其他問題?)
2. 邊框線

.item {
  background-color: #999;
  width: 300px;
  border-top: 10px solid pink;
  border-bottom: 10px solid pink;
  border-left: 10px solid pink;
}

.item:nth-child(3n),
.item:last-child {
  border-right: 10px solid pink;
}  

.item:nth-child(n+4) {
  border-top: none;
}      

複寫top效能差，可以再想更精簡的寫法

.item {
  background-color: #999;
  width: 300px;
  /* border-top: 10px solid pink; */
  border-bottom: 10px solid pink;
  border-left: 10px solid pink;
}

.item:nth-child(-n+3) {
  border-top: 10px solid pink;
}

# Bootstrap

[Starter Template](https://getbootstrap.com/docs/4.5/getting-started/introduction/#starter-template)

JS的順序不能錯

    <!-- JQuery閹割版 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

## Container

[Container](https://getbootstrap.com/docs/4.5/layout/overview/#containers)

五種裝置
- 手機直 `.col-`
- 手機橫 `.col-sm`
- 平板直 `.col-md`
- 平板橫 `.col-lg`
- 桌機 `.col-xl`

`.container-xl`: 桌機才會是固定寬
`.col`: 等寬 (`flex-grow: 1`的意思)

## No gutters

[No gutters](https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters)

作用：不要有任何間距（寫在row上）
抵銷父層的padding會失效，
因此如果需要container也沒有間距，再加上 `px-0`

## Order

`.order-1`屬性為 `order: 1`
所有order屬性預設為0
`.order-first` -1
`.order-last` 13

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

## Offsetting

某個元素往主軸的尾端偏移（也適用在不同的裝置上）

用`margin-left`手刻能達到同樣的效果

  @media screen and (min-width: 992px){
    .amos .row > .col-lg-4:nth-child(5n+4) {
    margin-left: 16.666666%;
    }        
  }

## Visibility

[Visibility](https://getbootstrap.com/docs/4.0/utilities/visibility/)

所有裝置都消失 `d-none`
只有手機出現` d-none d-sm-block`

## 金字塔圖

想法:
1. `w-100`強迫換行
2. `off-set` 調換行後的開頭偏移位置
3. 換成RWD小裝置時，換行效果用`d-none`語法取消

	口
       口口
      口口口

桌機 / 平板橫 (2)

口口
口口
口口

平板直 （6 6）

口
口

手機 (12 )