# Week9

(續)如何翻轉照片?
transform-style：定義是3D或是2Dtransform，屬性值分為flat(預設2D)和preserve-3d。

.flip-card-inner {
  position: relative;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
}

.flip-card-front,
.flip-card-back,
.flip-card-inner {
  width: 100%;
  height: 100%;
}

.flip-card {
  width: 300px;
  height: 300px;
}

.flip-card-front {
  background-color: red;
  color: white;
}

.flip-card-back {
  background-color: blue;
  transform: rotateY(180deg);
  color: white;
}

.flip-card-inner:hover {
  transform: rotateY(180deg);
}

.flip-card-inner {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

   transition: transform 0.6s;
   transform-style: preserve-3d;

(續)
第一節
甚麼是Bootstrap([中版](https://bootstrap5.hexschool.com/)/[英版](https://getbootstrap.com/))?

* 響應式網頁設計(Responsive Web Design)。
* 多項主流的 UI 設計規劃。
* 不用再自行設計。開發前端視覺可以更加便捷有效率。
* flex 彈性盒觀念進行開發，內容都有水平與垂直的對齊與排序概念。
* 大多數的 class 命名都由 css 屬性組合出效果。

第二節

如何引入Bootstrap?
[](https://)
方法一、直接貼上網址(線上版)

方法二、需下載並且(建議使用離線版)
到DOWNLOAD頁面>點選Download>bootstrap-5.1.3-dist.zip解壓縮>抓出css/js兩個資料夾>僅需抓指兩種檔案，如下

css/
├── bootstrap.min.css
    // 包含 BS 各種 Class 樣式表
├── custom.css
    //你應該把自訂的 CSS 寫在這裡而不是去調整 BS 的 CSS
js/
├── bootstrap.bundle.min.js

第三節
網格參數 Grid options

* 網格切成 12 個空間單位去分配。
* 每個col 可指定給予多少水平空間分配。

// 1. Extra small devices （直立手機用途，小於 576px)
/*none @media queries :: 沒有 Media Query 規則是因為 BS 以 100%為低標 */

// 2. Small devices （橫式手機用途，包含 576px and up)
@media (min-width: 576px) { ... }

// 3. Medium devices （平板用途，768px and up)
@media (min-width: 768px) { ... }

// 4. Large devices （電腦用途，992px and up)
@media (min-width: 992px) { ... }

// 5. Extra large devices （寬螢幕電腦，1200px and up)
@media (min-width: 1200px) { ... }

// 6. XX-Large devices （超寬比螢幕，1400px and up)
@media (min-width: 1400px) { ... }


注意事項：階層須為container>row>col