• ---

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

時間軸

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

切版問題討論

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

Ref: MDN

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)

方格子

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

1. flex-grow
2. 絕對定位

• 問題：多餘的文字以...顯示
  Ref: 讓多行文字超出時自動隱藏

    (單行寫法)
    
    .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!

• 問題：灰色框線等寬

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

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

五種裝置

• 手機直 .col-
• 手機橫 .col-sm
• 平板直 .col-md
• 平板橫 .col-lg
• 桌機 .col-xl

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

No gutters

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

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

金字塔圖

想法:

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

	口
       口口
      口口口

桌機 / 平板橫 (2)

口口
口口
口口

平板直 （6 6）

口
口

手機 (12 )