---
title: 'Bootstrap筆記'
disqus: Pai
---

# 壹、目錄及代辦事項

## Table of Contents

[TOC]

## 待學習項目
- [ ] - flex:1?????
- [ ] - 補充麵包屑SEO知識
- [ ] - clip-path
- [ ] - 練習[網頁](https://kayahino.github.io/hexschool-hw/BS4/backend-page/backend_orderlist.html)
- [ ] - 尋找bootstrap template做出自己的甜點店商
- [ ] - 使用 Sass 開發屬於自己的元件
# 貳、基礎內容文件要點說明
## 一、文字與語意化
### 1.段落的語意

- 無語意

< span > 單純行內元素

< u > 下底線的效果

< b > 突出顯示，而不增加重要性

- 有語意

< ins > 補充的內容

< mark > 強調的內容

< s > strikethrough 不準確的內容

< del > delete 強調被刪除的內容

< h1 > 這一頁最重要的部分

< strong > 強調得粗體文本

< small > 用於免責聲明、版權條款等呈現

< i > italic 外觀顯示斜體，有語意，用於表現因某些原因需要區分普通文本的一系列文本。例如技術術語，外文短語或是小說中人物的思想活動等，他的內容通常以斜體顯示。

< em > emphasized有語意，標記出需要用戶著重閱讀的內容。

### 2.縮寫
- 一般運用在輔助說明，Hover 時會將標籤 tilte 內的文字說明顯示

<abbr title="attribute">attr</abbr>
<abbr title="請輸入一個正確的地址" class="initialism">地址</abbr>

### 3.引用
- 文章、論文的章節內容引用

<blockquote class="blockquote">
      <p class="mb-0">霹靂卡霹靂拉拉 波波力那貝貝魯多。</p>
      <footer class="blockquote-footer">小魔女 <cite title="Source Title">Do Re Mi</cite></footer>
    </blockquote>

### 4.列表
- 列表清單預設會加入樣式，如果不要樣式可以用在很多地方，如 Footer
- 如果不要前面的點使用list-unstyled
- ul為無序列表，ol為有序列表

<ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit
        <ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
          <li>Vestibulum laoreet porttitor sem</li>
          <li>Ac tristique libero volutpat at</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ul>

### 5.行內
- 行內則是可以用在維持清單語意的地方，我想用清單的語意，但我又想在一行內把清單的語意表示完。

<p>文藝復興三巨星：</p>
    <ul class="list-inline">
      <li class="list-inline-item"><a href="#">達文西</a></li>
      <li class="list-inline-item"><a href="#">米開朗基羅</a></li>
      <li class="list-inline-item"><a href="#">拉斐爾</a></li>
    </ul>

### 6.描述型列表
- 通常用在名詞的解釋
- dl為整個列表的外框，dt為名詞，dd為名詞解釋，text-truncate則是因為文字太長使用點點點帶過。

<dl class="row">
      <dt class="col-sm-3">Description lists</dt>
      <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

      <dt class="col-sm-3">Euismod</dt>
      <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>

      <dt class="col-sm-3">Malesuada porta</dt>
      <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

      <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
      <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
    </dl>


## 二、圖片與響應式

### 1.img-fluid
- 響應式必備，使用max-width：100％;和 height：auto; ，讓container等於邊界，並且會隨畫面縮放。
- 就算圖片比較小也建議加入，可以讓圖片隨畫面縮放

<img class="img-fluid" width="600" src="https://images.unsplash.com/photo-1496661030948-768b250bfa93?dpr=1&auto=format&fit=crop&w=1500&h=984&q=80&cs=tinysrgb&crop=" alt="">

### 2.img-thumbnail和rounded
- img-thumbnail會出現像一個頭像的效果

- rounded則會讓四個角變成圓角
<img class="img-fluid rounded mx-auto d-block img-thumbnail" width="50%" src="https://images.unsplash.com/photo-1496661030948-768b250bfa93?dpr=1&auto=format&fit=crop&w=1500&h=984&q=80&cs=tinysrgb&crop=" alt="">

- float-left & float-right

- 圖片置中的兩種方法

a.使用margin和block

<img src="..." class="rounded mx-auto d-block" alt="...">

b. 使圖片變成文字，text-center
因此放在這個div裡面的文字和圖片都會置中

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

### 3.圖片區figure
- 因為figure是inline-block,所以要使圖片置中要加上text-center

<figure class="figure text-center">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

<figure class="figure text-center">
<img width="300" src="https://images.unsplash.com/photo-1496661030948-768b250bfa93?dpr=1&auto=format&fit=crop&w=1500&h=984&q=80&cs=tinysrgb&crop=" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

### 4.<picture>標籤

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

- srcset (必要)

指定替代圖片的路徑

- media

用法與CSS中的媒體查詢相同。(e.g. max-width, min-width, max-height, min-height, orientation)

- sizes

指定圖片的尺寸。(e.g. sizes=”100vw”) 或是同時指定媒體查詢及圖片尺寸。(e.g. sizes=”(max-width: 30em) 100vw”)

- type

指定替代圖片的格式，(e.g. type=”image/webp” or type=”image/vnd.ms-photo”)

<source>的順序很重要、瀏覽器會直接使用第一個符合的 <source>而忽略掉後續的標籤。

- 在<picture>結束前指定一個<img>
最後再指定一個<img> 元素作為<picture>標籤中的預設圖片、當瀏覽器不支援<picture>標籤或是沒有符合的<source>時，則直接顯示<img> 。
<img>一定要放在最後、因為瀏覽器會忽略掉所有在<img>之後的<source>。

## 表格基本架構說明
### 表格的基本結構
- 基本架構

<table>
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </tfoot>
</table>

- col帶有語意指的是#這一欄，代表123。row1則是代表Mark、Otto、@mdo這一列。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th> 
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>

---

### 表格樣式
- 設定表格全部的顏色
table-dark、
table-light、
striped-rows(條紋:如果內容很長可以幫助對齊找文字)
- 設定表格局部的顏色 thead-dark、thead-light
- 為標格加上外框的線條
table-bordered
- 互動功能
table-hover
- 使表格變小
table-sm
- 表格的預設顏色table-active......，不論th或td都可以設定
- 另外也可以設定比較深的顏色bg-active.....

<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row" style="background:rgba(0, 0, 0, 0.075);">Active</th>
</tr>
<tr>
<th scope="row">Default</th>
</tr>
<tr class="table-primary">
<th scope="row" style="background:#9fcdff;">Primary</th>
</tr>
<tr class="table-secondary">
<th scope="row" style="background:#c8cbcf;">Secondary</th>
</tr>
<tr class="table-success">
<th scope="row" style="background:#c3e6cb;">Success</th>
</tr>
<tr class="table-danger">
<th scope="row" style="background:#f5c6cb;">Danger</th>
</tr>
<tr class="table-warning">
<th scope="row" style="background:#ffeeba;">Warning</th>
</tr>
<tr class="table-info">
<th scope="row" style="background:#abdde5;">Info</th>
</tr>
<tr class="table-light">
<th scope="row" style="background:#fdfdfe;">Light</th>
</tr>
<tr class="table-dark">
<th scope="row" style="background:#c6c8ca;">Dark</th>
</tr>
</tbody>
</table>

### caption表格內的描述，會以灰體字呈現在表格下方。

<caption>List of users</caption>

### table-responsive
- 響應式的表格，如果不設定就會在螢幕小於表格時，出現卷軸
- 另外可以用.table-responsive(-sm|-md|-lg|-xl) 來設定中斷點

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

### 合併表格
- colspan="要合併的欄數"
# 参、Flex 、網格系統 及相關的排版概念
## 一、網格概念
- Bootstrap的總欄數為12欄

- Bootstrap 中的欄與列
col-*原始碼會加上padding-left:15px、padding-right:15px，而左右多出來的15px，則會由row原始碼內的margin-left:15px、margin-right:15px去補回，
但+15-15不就是等於0嗎?
為什麼左右還有內推的15px的gutter，原來container也都左右內推15px。
- 欄與列必須包在class="container"裡面
- class="col-xx"外層是class="row"
- class="row"內層是class="col-xx"
- 頁面內容要放在class="col-xx"裡面
## 二、container的響應式中斷點
- Bootstrap是以行動裝置優先的框架
- max container width代表超過這個最大寬度的話，會依這個寬度為準，假如是1200px的寬度，則container最大為1140px

## 三、Flex 的重要觀念

### flex的值所代表的意思

style="
.container {
  display: flex;
  height: 100px;
}

.item1 {
  width: 200px;
  background: #000;
}

.item2 {
  width: 200px;
  background: red;
}

.item3 {
  width: 200px;
  background: blue;
}
"
<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

> flex由三種屬性組成
>**flex: flex-grow | flex-shrink | flex-basic**
<iframe height="265" style="width: 100%;" scrolling="no" title="flex:initial" src="https://codepen.io/PaiP/embed/JjoWQdb?height=265&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/PaiP/pen/JjoWQdb'>flex:initial</a> by 白家齊
(<a href='https://codepen.io/PaiP'>@PaiP</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

- flex預設初始值
等同於flex: 0 1 auto;
- 0->長大的屬性沒有，不會自動填滿整個容器
- 1->縮小的屬性為1，當空間不足時，所有的item會以1:1:1的方式縮小
- auto->基本的寬度，設定為auto時，就是最隨興的狀態，
- 如果只有item有設定寬度，grow和shrink設定都是0，就是以item寬度為準，也沒有自適應螢幕的功能。
- 如果grow有設定，
container容器大於三個item寬度總和時，就以grow設定的比例去填滿容器。
- 如果shrink有設定，
container容器小於三個item寬度總和時，就以grow設定的比例去填滿容器。

<iframe height="265" style="width: 100%;" scrolling="no" title="flex:auto;" src="https://codepen.io/PaiP/embed/ExaWBLW?height=265&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/PaiP/pen/ExaWBLW'>flex:auto;</a> by 白家齊
(<a href='https://codepen.io/PaiP'>@PaiP</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

- flex:auto;
等同於 flex: 1 1 auto;
- 長大和縮小的屬性都是1，因此，不管容器大於或小於三個item總和的寬度，都會以1:1:1的方式去伸縮。

<iframe height="265" style="width: 100%;" scrolling="no" title="flex:none;" src="https://codepen.io/PaiP/embed/xxbqojr?height=265&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/PaiP/pen/xxbqojr'>flex:none;</a> by 白家齊
(<a href='https://codepen.io/PaiP'>@PaiP</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

- flex: none;
等同於flex: 0 0 auto;
- 只有basic的屬性有設定成auto，
item只會以預設的寬度出現，不會有伸縮的屬性，當視窗小於三個item總和的寬度時(此例為600px)，下方則會出現x軸卷軸。

<iframe height="265" style="width: 100%;" scrolling="no" title="flex:{正值};" src="https://codepen.io/PaiP/embed/vYExqjr?height=265&theme-id=default&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/PaiP/pen/vYExqjr'>flex:{正值};</a> by 白家齊
(<a href='https://codepen.io/PaiP'>@PaiP</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

- flex: {正值};
等同於flex: {正值} 1 0;
- 會以正值的比例去分配空間
- basic設定為0，因此item會依正值設定的比例去佔據容器的空間。
<img src="https://i.imgur.com/wo4z3Dr.png">

<img width="50%" src="https://i.imgur.com/PqTFeC0.png">

<img width="50%" src="https://i.imgur.com/pryOmJA.png">

<img width="50%" src="https://i.imgur.com/rb1YuLp.png">

<img width="50%" src="https://i.imgur.com/EnQ1FS0.png">




<h3>外層屬性</h3>
<table class="table">
<thead>
<tr>
<th>屬性</th>
<th>組合</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>flex</td>
<td>.flex-{size}-{flex 屬性}</td>
<td>
<pre>
.d-flex
.d-inline-flex</pre>
</td>
</tr>
<tr class="table-warning">
<td>flex-direction</td>
<td>.flex-{size}-{direction 屬性}</td>
<td>
<pre>
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse</pre>
</td>
</tr>
<tr class="table-warning">
<td>justify-content</td>
<td>.justify-content-{size}-{justify-content 屬性}</td>
<td>
<pre>
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around</pre>
</td>
</tr>
<tr class="table-warning">
<td>align-items</td>
<td>.align-items-{size}-{align-items 屬性}</td>
<td>
<pre>
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch</pre>
</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>.flex-{size}-{flex-wrap 屬性}</td>
<td>
<pre>
.flex-nowrap
.flex-wrap
.flex-wrap-reverse</pre>
</td>
</tr>
<tr>
<td>align-content (限制 wrap)</td>
<td>.flex-{size}-{align-content 屬性}</td>
<td>
<pre>
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch</pre>
</td>
</tr>
</tbody>
</table>
<h3>內層屬性</h3>
<table class="table">
<thead>
<tr>
<th>屬性</th>
<th>組合</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>align-self</td>
<td>.align-self-{size}-{align-self 屬性}</td>
<td>
<pre>
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch</pre>
</td>
</tr>
<tr>
<td>order</td>
<td>.order-{order 數值}</td>
<td>
<pre>
.order-1
.order-2
.order-3
...
.order-12</pre>
</td>
</tr>
</tbody>
</table>
</div>

:::warning
:bulb: 同學提問:
若BOX被stretch後，如何可使中間文字上下置中呢？
在內層加入一層 flex 來做排版

 <div class="d-flex my-2 bg-light align-items-stretch" style="height: 100px"> 
      <div class="p-2 bg-info text-white border"><div class="h-100 d-flex align-items-center">Flex item 1</div></div>
      <div class="p-2 bg-info text-white border"><div class="h-100 d-flex align-items-center">Flex item 1</div></div>
      <div class="p-2 bg-info text-white border"><div class="h-100 d-flex align-items-center">Flex item 1</div></div>  
  </div>

:::

## 四、Bootstrap Flex 補充說明:wrap&order

### 1.order
用來決定排列的順序。
### 2.wrap
用在段落是否換行，但在row的屬性裡就有自動換行的屬性，那什麼時候使用d-flex，什麼時候使用row?
在需要使用格線系統時就可使用 row，僅有使用 flex 就使用 d-flex
### 3.align-content
必須要在wrap包裹住的狀態下使用，而他預設的屬性是stretch，會自適應容器寬高延伸。
- align-content 屬性只針對換行的內容有效，所以沒有換行的時候是沒有辦法有效果的喔。??

## 五、通用類別中的 Spacing 妙用

### 1.排列方式
{property}{sides}-{size}==> ml-5
- property
m - margin
p - padding

- sides
t - top
b - bottom
l - left
r - right
x - both *-left and *-right
y - both *-top and *-bottom
blank - 四個方向同時做位移

- 數字代表
0 - 0
1 - * .25rem
2 - * .5rem
3 - 1rem
4 - * 1.5
5 - * 3
auto - for classes that set the margin to auto

### 2.mx-auto
display: block並且設定一個寬度就可以使用 margins:auto.，使block置中

::: warning
auto的妙用:
ml-auto

    <style>
        .box {
          background-color: #7952b3;
          color: white;
          border: 1px solid white;
        }

        .h100px {
          height: 100px;
        }
    </style>
    <div class="row justify-content-end">
      <div class="col-3">
        <div class="box h100px"></div>
      </div>
      <div class="col-3 ml-auto">/*使用ml-automl-auto填滿左邊空的部分*/
        <div class="box h100px"></div>
      </div>
      <div class="col-3">
        <div class="box h100px"></div>
      </div>
    </div>

可以把第一個box推到最左邊
:::

### 3.使用負的margin
在size前面加上n -> mt-n1
只有margin能使用n。

## 六、範例：元件與 Grid 的關係

## 七、範例：使用 Grid 製作相簿排版
### 1.第一種寫法，把box包再col裡面
< div class="col-4 box " >

<div class="container-fluid">
    	<div class="row">
    		<div class="col-4 box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?dpr=2&auto=format&fit=crop&w=1500&h=918&q=80&cs=tinysrgb&crop=);">
    		</div>
    		<div class="col-4 box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1490921045028-16ab0b47b757?dpr=2&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop=);">
    		</div>
    		<div class="col-4 box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1493585552824-131927c85da2?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=);">
    		</div>
    	</div>
</div>

### 2.第二種寫法使用no-gutters
< div class="col-4" >

< div class="box" >< /di >

< /div >

    <div class="px-0 container-fluid">
        <div class="no-gutters row ">
            <div class="col-4">
                <div class="box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?dpr=2&auto=format&fit=crop&w=1500&h=918&q=80&cs=tinysrgb&crop=);"></div>
            </div>
            <div class="col-4">
                <div class="box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?dpr=2&auto=format&fit=crop&w=1500&h=918&q=80&cs=tinysrgb&crop=);"></div>
            </div>
            <div class="col-4">
                <div class="box bg-cover" style="background-image: url(https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?dpr=2&auto=format&fit=crop&w=1500&h=918&q=80&cs=tinysrgb&crop=);"></div>
            </div>
        </div>
    </div>

### 3.vh高度

<div class="row" style="height: 100vh"> /*指填滿裝置100%高度*/
            <div class="col-8 bg-cover" style="background-image: url(https://images.unsplash.com/photo-1453785675141-67637e2d4b5c?dpr=2&auto=format&fit=crop&w=1500&h=918&q=80&cs=tinysrgb&crop=);"></div>
            <div class="col-4">
                <div class="row d-flex flex-column h-100"> /*要設定h-100當作h-50的基準*/
                    <div class="h-50 bg-cover" style="background-image: url(https://images.unsplash.com/photo-1502472584811-0a2f2feb8968?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=);"></div>
                    <div class="h-50 bg-cover" style="background-image: url(https://images.unsplash.com/photo-1496347646636-ea47f7d6b37b?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=);"></div>
                </div>
            </div>
        </div>

## 七、範例：使用 Grid 製作時間軸的排版

<style>
.box {
    background-color: #5F3FD2;
    height: 100px;
    border: 1px solid #fff;
}

.timeline-section {
    position: relative;
}

.timeline-section:after {
	content:'';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: grey;
    right: 50%;
    transform: translate(50%);
}
.timeline-pointer{
	position: relative;
}
.timeline-pointer:after{
	content:'';
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: white;
	border:1px solid grey;
	border-radius: 50%;
	left: 50%;
	transform: translate(-50%);
	z-index: 1;
}
@media (max-width: 575px) {
	.timeline-pointer:after,
	.timeline-section:after{
		display: none;
	}
}

</style>

<body>
    <div class="container">
        <div class="timeline-section">
            <div class="row my-3 timeline-pointer">
                <div class="col-sm-6">
                    <div class="box"></div>
                </div>
                <div class="col-sm-6">
                    <h3>這是一段標題</h3>
                    <p>...</p>
                </div>
            </div>
            <div class="row my-3 flex-sm-row-reverse timeline-pointer">
                <div class="col-sm-6">
                    <div class="box"></div>
                </div>
                <div class="col-sm-6">
                    <h3>這是一段標題</h3>
                    <p>...</p>
                </div>
            </div>
            <div class="row my-3 timeline-pointer">
                <div class="col-sm-6">
                    <div class="box"></div>
                </div>
                <div class="col-sm-6">
                    <h3>這是一段標題</h3>
                    <p>...</p>
                </div>
            </div>
            <div class="row my-3 flex-sm-row-reverse timeline-pointer">
                <div class="col-sm-6">
                    <div class="box"></div>
                </div>
                <div class="col-sm-6">
                    <h3>這是一段標題</h3>
                    <p>...</p>
                </div>
            </div>
            <div class="row my-3 timeline-pointer">
                <div class="col-sm-6">
                    <div class="box"></div>
                </div>
                <div class="col-sm-6">
                    <h3>這是一段標題</h3>
                    <p>...</p>
                </div>
            </div>
        </div>
    </div>

# Bootstrap 通用類別 (Utilities)
## 一、Grid :網格系統
### 1. class="w-100"用來換行

<div class="demo">
  <div class="container">
    <div class="row">
      <div class="col">Column</div>
      <div class="w-100"></div> 
      <div class="col">Column</div>
      
      <div class="col">Column</div>

      <div class="col">Column</div>
    </div>
  </div>
</div>

### 2. 用col-*設定去占多少的空間
- 此例中，col-10占了10的空間，其他兩個col則各占1。

<div class="demo">
  <div class="container">
    <div class="row">
      <div class="col">
        1 of 3
      </div>
      <div class="col-10">
        2 of 3 (wider)
      </div>
      <div class="col">
        3 of 3
      </div>
    </div>
  </div>
</div>

### 3. col-{size}-auto
- 能夠使box自己去適應文字寬度

<div class="demo">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col col-lg-2">
        1 of 3
      </div>
      <div class="col-sm-auto">
        Variable width content
      </div>
      <div class="col col-lg-2">
        3 of 3
      </div>
    </div>
    <div class="row">
      <div class="col">
        1 of 3
      </div>
      <div class="col-md-auto">
        Variable width content rfwegrebsvcgbesgzfeagawrb
      </div>
      <div class="col col-lg-2">
        3 of 3
      </div>
    </div>
  </div>
</div>

### 4.offset與ml/mr-auto
- offset-{輸入移動幾格格線}

<div class="demo">
  <div class="container">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 offset-md-2">.col-md-4 .offset-md-4</div>
    </div>
  </div>
</div>

- 使用mr-auto和ml-auto來推開距離。使box各自至兩端。

<div class="demo">
  <div class="container">
    <div class="row">
      <div class="col-md-4  mr-auto">.col-md-4</div>
      <div class="col-md-4">.col-md-4 .ml-auto</div>
    </div>
  </div>
</div> 

## 二、Grid：媒體物件

<div class="demo">
  <div class="media">
    <img class="d-flex mr-3" src="http://lorempixel.com/output/people-q-c-64-64-5.jpg" alt="Generic placeholder image">
    <div class="media-body">
      <h5 class="mt-0">Media heading</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

      <div class="media mt-3">
        <a class="d-flex pr-3" href="#">
          <img src="http://lorempixel.com/output/people-q-c-64-64-5.jpg" alt="Generic placeholder image">
        </a>
        <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
      </div>
    </div>
  </div>
</div>

- flex:1?????

## 三、Display 顯示屬性
- 可依照端點去顯示display

d-{xl/lg/md/sm}-none; 不顯示

d-{xl/lg/md/sm}-block; 區塊元素 不可並排 一整個長方形區塊

d-{xl/lg/md/sm}-inline; 內行元素 可並排 包字 所以高度不變

d-{xl/lg/md/sm}-inline-block; 可並排的區塊元素 高度可變

## 四、Embed 內嵌
- 將內嵌換成不同尺寸 (21by9, 16by9, 4by3, 1by1)

<div class="demo">
  <div class="embed-responsive embed-responsive-尺寸">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/WqoFFNlXY1c"></iframe>
  </div>
</div>

## 五、Image replacement 圖像替換:text-hide
- 使用text-hide隱藏有意義的文字。

## 六、position
### 1.fixed-top
- 固定在最上方
### 2.fixed-bottom
- 固定在最下方
### 3.sticky-top
- 滾動黏滯定位
IE11 與 IE10 呈現 position: sticky 是使用 position: relative。我們在這個樣式上增加 @supports，限制這個屬性只能在能夠執行的瀏覽器上運行。

## 七、text文字
### 1.justify
使其文字齊行，但在很多中文字上不適用

### 2.text {size} left/center/right
使文字置左、置中、置右
也能加上size配合響應式設計

### 3.換行
- text-nowrap使文字不換行
- text-truncate 使超出空間文字用...替代

### 4.改變大小寫
- lowercase 全部變小寫
- uppercase 全部變大寫
- capitalize 單字第一個字大寫

### 5.改變文字特徵
- font-weight-bold粗體
- font-weight-bold正常
- font-italic斜體

## 八、垂直對齊 (Vertical alignment)
### vertical-alignment
請注意，垂直對齊僅影響 **inline、inline-block、inline-table、和 table** 元素。
- .align-top
- .align-middle
- .align-bottom
- .align-baseline 對琪文字基準線
- .align-text-bottom 圖片加上這個class後，文字會呈現在下面

<p>
  <img src="http://lorempixel.com/100/100/food" class="align-text-bottom" alt="">
  <span>text-bottom</span>
</p> 

- .align-text-top 圖片加上這個class後，文字會呈現在上面

<p>
  <img src="http://lorempixel.com/100/100/food" class="align-text-top" alt="">
  <span>text-top</span>
</p> 

## 九、Visibility 可見性
### invisible
會使物件消失，但佔有的位置會保留
而display:none則是完全消失喔。

# 肆、Bootstrap 元件 (Components)
## 一、alert色彩
- 將以下的 "目標"，替換成不同色彩 (primary, secondary, success, danger, warning, info, light, dark, white
- a連結裡面加上alert-link去配合調整連結顏色

div class="alert alert-目標" role="alert">
    This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
  </div>

## 二、取消 alert
- 加上data-dismiss="alert"取消alert

<div class="demo">
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert"  aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  </div>
</div>

## 三、在文字旁加上補充文字Badge(徽章)

### 1.特性
- 他自動符合各種尺寸
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
</div>

- 可以作為連結或按鈕的計數器
<span class="badge badge-light">4</span>

- 可配合顏色情境

<div class="demo">
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-danger">Danger</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-light">Light</span>
  <span class="badge badge-dark">Dark</span>
</div>

- badge-pill 可以使標籤更圓潤
<span class="badge 目標 badge-primary">Primary</span>

- 將 span 改為 a 元素並加上 href="#"，提供 hover 和 focus 狀態

<div class="demo">
  <a href="#" class="badge badge-primary">Primary</a>
  <a href="#" class="badge badge-secondary">Secondary</a>
  <a href="#" class="badge badge-success">Success</a>
</div>

## 四、麵包屑
可以使用ol、li或a連結來做麵包屑

<!-- ol、li -->
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active">Data</li>
  </ol>
<!--  a連結 -->
<div class="demo">
  <nav class="breadcrumb">
    <a class="breadcrumb-item" href="#">Home</a>
    <a class="breadcrumb-item" href="#">Library</a>
    <a class="breadcrumb-item" href="#">Data</a>
    <span class="breadcrumb-item active">Bootstrap</span>
  </nav>
</div> 

## 五、按鈕 (Buttons)
### 1.顏色
btn 具有不同的語意化色彩，可透過 btn-{theme-color} 來替換
### 2.按鈕可運用不同標籤

<div class="demo">
  <a class="btn btn-primary" href="#" role="button">Link</a>
  <button class="btn btn-primary" type="submit">Button</button>
  <input class="btn btn-primary"  value="Input" type="button"><!-- type="button" -->
  <input class="btn btn-primary"  value="Submit" type="submit"><!-- type="submit" -->
  <input class="btn btn-primary"  value="Reset" type="reset"><!-- type="reset" -->
</div>

### 3.外框按鈕
btn-outline-{theme-color}
### 4.按鈕的不同尺寸
btn-lg、btn-sm
### 5.按鈕的塊狀屬性
btn-block
### 6.按鈕的啟用狀態
active
### 7.停用狀態
- disabled
- 按鈕狀態:不須寫在class裡面
`<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>`
- a連結:要寫在class裡面
` <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>`

### 8.JavaScript切換狀態
在使用前必須載入JQuery
按鈕加上 data-toggle="button" 用來切換狀態

<button type="button" class="btn btn-outline-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle  </button>

### 9.核取方塊和選項按鈕

- checkbox為多選
按鈕群組加上 btn-group-toggle 隱藏內部的 input

  <div class="btn-group btn-group-toggle" data-toggle="button">
    <label class="btn btn-secondary ">
      <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
    </label>
    <label class="btn btn-secondary ">
      <input type="checkbox" autocomplete="off" > Checkbox 2
    </label>
    <label class="btn btn-secondary ">
      <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>
  </div>

- radio為單選
按鈕群組加上 data-toggle="buttons" 啟用他們各自樣式的切換

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
    </label>
    <label class="btn btn-secondary">
      <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-secondary">
      <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    </label>
  </div>

### 10. a按鈕和button按鈕有什麼不同?
a 標籤是做連結使用，button 是按鈕，常用來綁定 JS 事件，
- a 標籤帶有 連結效果。
- button 沒有連結效果，但 button 的 type 卻可以使用 reset(清除表單) 、 button 、 submit(送出表單)、disable 不同的屬性。在 HTML 中要做出圖片式按鈕的效果，就必須使用 <button> 標籤，這是 input 無法達成的

## 六、按鈕群組 (Button group)
### 1. btn-group
使用class="btn-group"將單一的按鈕群組起來

<div class="demo">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
  </div>
</div>

### 2.btn-toolbar
class="btn-toolbar" 將整組的按鈕組群組起來

<div class="demo">
  <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button type="button" class="btn btn-secondary">1</button>
      <button type="button" class="btn btn-secondary">2</button>
      <button type="button" class="btn btn-secondary">3</button>
      <button type="button" class="btn btn-secondary">4</button>
    </div>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text" id="btnGroupAddon">@</div>
      </div>
      <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
    </div>
  </div>

### 3.btn-group-size
調整群組不同尺寸 btn-group-(sm, lg)

<div class="btn-group btn-group-sm/lg" role="group" aria-label="...">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>

### 4.巢狀
當您想要下拉式功能表與群組按鈕混合時，只需要將 .btn-group 放在另一個 .btn-group 中。

<div class="demo">
  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>

    <div class="btn-group" role="group">
      <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </button>
      <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
        <a class="dropdown-item" href="#">Dropdown link</a>
        <a class="dropdown-item" href="#">Dropdown link</a>
      </div>
    </div>
  </div>
</div>

### 5.垂直變化
加入 class="btn-group-vertical" 使其垂直排列

<div class="demo">
  <div class="btn-group-vertical"  role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
  </div>
</div>

# 陸、形象首頁版型介紹
## Navbar使用
- 如果要將文字限縮在版型範圍內，可以加上.container
:::warning
:bulb:
問題一：
我剛剛試了如果是使用 img 直接插入圖片也可以 text-right 讓它向右靠齊。請問老師 text-right 除了文字也能控制圖片或是其他物件嗎？

正確來說 text-align 可以對齊文字、display: inline、inline-block 等屬性

圖片屬於 inline-block，所以也可以對齊

text-align 是對齊內容，並非對齊元素本身

請問老師為什麼 text-right 直接放在 a 連結上時會沒有作用，要放在外層的 container 上才有作用？
在還沒看老師講解前我的想法是在外層的 container 上加上 d-flex 以及 justify-content-end ，想請問老師這樣的做法正確嗎？還是這個情況使用 text-right 比較合適呢？

沒有絕對的對錯，這樣的結果也是一樣的
但在此不推薦使用 flex
假設需要加入其他元素的同時
他也會被 flex 影響
使用 text-align 相對影響較小

:::
:::
:::
## Carousal跑馬燈
- 背景圖案的使用
- 使用bg-img
bg-pos:center center
bg-size:cover
- 使用img
object-fit:cover

## 三欄式排版
- section, header 稱為語意化標籤
目的是讓瀏覽器能夠理解程式碼的意思
以及方便開發者管理
- 而 header 的意思是標頭的意思
適合使用在畫面頂部及區塊的標頭
- section 是 “節” 的意思
適合使用在畫面中一個區塊性的內容

- 當語意上符合以上標籤時
就會將 div 替換成 header 或 section 喔
不僅可以讓瀏覽器更理解資料內容
也可以避免整個畫面都是 div 難以管理
## 使用格線做混合式排版
- container與container-fluid的不同。
container-fluid 會是以滿版方式呈現，並且會自適應網頁寬度。container 則不是，並且有設定響應式的範圍。
<a href="#二、container的響應式中斷點" title="二、container的響應式中斷點" smoothhashscroll="">二、container的響應式中斷點</a>
- 使用background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)),url()把背景顏色變深，凸顯出字體。
也可以做中斷點，當在行動版裝置上，文字覆蓋到圖片上時，才把圖片顏色變深。
- 為什麼要使用absolute:
.col-md-7 因為有使用 position: absolute; 所以這一塊並不會占空間，而你使用一層 .row 來切成兩塊空間，自然在小裝置的呈現會變成上下排版的方式呈現

# 柒、後台網站製作
## 一、使用 Flex 伸展特性安排組件:人數、或單顯示
1. 使用 h-100 是強制將高度設定為父元素的 100% ，
當畫面上有內容不一樣多的子元素並排時，因為高度都不相同，
就可以使用 h-100 將各個子元素的高度都強制設定為一致，
2. 如果沒有加d-flex，每一行都是div(block)，所以每行會排滿，往下排列。
3. 這邊老師使用w-100把剩下的空間撐開，我改用flex:1;去做

    <!--                     當日重要數字訊息                             -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-6 mb-2">
                <!-- 1.rounded-0使邊寬沒有圓角，h-100使card撐開到與col一樣大 -->
                <div class="card rounded-0 h-100">
                    <div class="card-body d-flex align-items-center">
                        <!--2. 因為使用d-flex的效果，才能使圖案與文字並排 -->
                        <div class="fas fa-money-bill-wave-alt text-secondary mr-2 d-none d-sm-block" style="font-size: 2.5em;"></div>
                        <div class="text-center" style="flex:1;">
                            <!-- 3.老師這裡用class="w-100"把文字稱開，我嘗試使用flex:1 -->
                            <div class="h3">今日營收</div>
                            <div class="h4">192,000</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6 mb-2">
                <div class="card rounded-0">
                    <div class="card-body d-flex align-items-center">
                        <div class="fas fa-user-friends text-secondary mr-2 d-none d-sm-block" style="font-size: 2.5em;"></div>
                        <div class="text-center" style="flex:1;">
                            <div class="h3">會員增加</div>
                            <div class="display-4">123</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6 mb-2">
                <div class="card rounded-0">
                    <div class="card-body d-flex align-items-center">
                        <div class="far fa-newspaper text-secondary mr-2 d-none d-sm-block" style="font-size: 2.5em;"></div>
                        <div class="text-center" style="flex:1;">
                            <div class="h3">訂單數</div>
                            <div class="display-4">340</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6 mb-2">
                <div class="card rounded-0">
                    <div class="card-body d-flex align-items-center">
                        <div class="fas fa-box-open text-secondary mr-2 d-none d-sm-block" style="font-size: 2.5em;"></div>
                        <div class="text-center" style="flex:1;">
                            <div class="h3">待出貨數</div>
                            <div class="display-4">44</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

## 二、為你的後台加上圖表版型:chart
### 1. 選擇chart的要點
- 尋找符合需求的圖表類型
- 資料結構是否易懂或易於變化
- 有沒有要支援響應式
- 授權與否
2. 有同學遇到表格不能依照螢幕響應式縮放
將外層加入這一段程式碼就能顯示。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

## 三、關於表格
1. 把d-flex內層加這層，因為下面還有表格，而d-flex只會影響一層，不會影響到再下去的子層。
2. table-responsive是包在table標籤外
3. 固定寬度不要全設定，不然表格會沒有彈去伸縮
4. 表格裡面有關於錢的項目都要靠右
5. form-group
- 這是一個表單群組
- 通常包含一個 input 及一個 label
- 最大的作用是與其它群組維持一定的空間
6. form-inline
是將 input 轉為行內，應將它視為樣式的轉換，為了確保行內依然維持群組關係，還是會有 form-group 喔。
7. min-width:610px設定最小寬度，讓文字在響應式時不會擠在一起

       <section class="card rounded-0">
            <div class="card-header">標題</div>
            <div class="card-body">
                <div class="d-flex">
                    <!--  1.把d-flex內層加這層，因為下面還有表格 -->
                     <div class="form-inline"> <!-- 5和6 -->
                        <div class="form-group">
                            <label for="month" class="sr-only">月份</label>
                            <select name="" id="month" class="form-control form-control-sm">
                                <option value="">一月</option>
                                <option value="">二月</option>
                            </select>
                        </div>
                    </div>
                    <div class="ml-auto">
                        <a class="btn btn-secondary btn-sm">下載報表</a>
                        <a class="btn btn-secondary btn-sm">訂單管理</a>
                    </div>
                </div>
                <!-- 2.table-responsive是包在table標籤外 -->
                <div class="table-responsive">
        <!--   7. min-width:610px設定最小寬度，讓文字在響應式時不會擠在一起 -->
                    <table class="table" style="min-width:610px">
                        <thead>
                            <tr>
                                <th width="70">日期</th> <!-- 3.固定寬度不要全設定，不然表格會沒有彈去伸縮 -->
                                <th>訂單數</th>
                                <th>退費數</th>
                                <th>出貨數</th>
                                <th>有問題貨品</th>
                                <th width="150">營業額</th>
                                <th width="150">淨利潤</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>9/1</td>
                                <td>300</td>
                                <td>1</td>
                                <td>250</td>
                                <td>3</td>
                                <td class="text-right">256,000</td> <!-- 表格裡面有關於錢的項目都要靠右 -->
                                <td class="text-right">168,000</td>
                            </tr>
                            <tr>
                                <td>9/2</td>
                                <td>300</td>
                                <td>1</td>
                                <td>250</td>
                                <td>3</td>
                                <td class="text-right">256,000</td>
                                <td class="text-right">168,000</td>
                            </tr>
                            <tr>
                                <td>9/3</td>
                                <td>300</td>
                                <td>1</td>
                                <td>250</td>
                                <td>3</td>
                                <td class="text-right">256,000</td>
                                <td class="text-right">168,000</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="6" class="text-right">月總營收</td>
                                <td class="text-right">3,750,500</td>
                            </tr>
                            <tr>
                                <td colspan="6" class="text-right">月總淨利潤</td>
                                <td class="text-right">2,140,500</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </section>

## 四、 為了你的後台加上控制列
1. 加入data-toggle="tooltip" data-placement="top" data-html="true" title="<em>開始搜尋</em>"預覽搜尋列，而data-html則是允許title的html格式輸出
2. style="min-width:768px;"，給表格一個最小寬度，為了讓字體不因為響應式而全部擠在一起

3. 在選單內的文字似乎沒有上下置中，要如何調整?
4. Modal 事件
$('#editModal').on('show.bs.modal', function(event) {
**//觸發#editModal時，做以下動作**
var btn = $(event.relatedTarget);
**//取出和#editModel相關的事件按鈕**
var title = btn.data('title');
**//取出btn這個按鈕data-title的內容**
var modal = $(this);
**//宣告model變數就是他自己**#editModal
modal.find('.modal-title').text(title);
**//在modal中，找到class="modal-title"那一行，把文字替換成"快速下單"，也可以替換成#editModalLabel尋找id="editModalLabel"那一行也找的到**
});

<div class="container-fluid main mt-3">
        <div class="row mb-3">
            <div class="col-md-3">
                <div class="input-group">
                    <input type="text" class="form-control form-control-sm" placeholder="search for..." data-toggle="tooltip" data-placement="top" data-html="true" title="<em>開始搜尋</em>">
                    <!-- 加入data-toggle="tooltip" data-placement="top" data-html="true" title="<em>開始搜尋</em>"預覽搜尋列，而data-html則是允許title的html格式輸出 -->
                    <span class="input-group-append">
                        <button class="btn btn-secondary" type="button">Go</button>
                    </span>
                </div>
            </div>
            <div class="col-md-9 text-right my-2 my-md-0">
                <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#editModal" data-title="快速下單">快速下單</a>
            </div>
        </div>
        <div class="table-responsive">
             <!-- style="min-width:768px;"，給表格一個最小寬度，為了讓字體不因為響應式而全部擠在一起 -->
            <table class="table table-hover" style="min-width:768px;">
                <thead>
                    <tr>
                        <th width="50">#</th>
                        <th>品項</th>
                        <th>姓名</th>
                        <th>Email</th>
                        <th>狀態</th>
                        <th width="100" class="text-right">金額</th>
                        <th width="110" class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td><a href="#">肥肥肥皂 一盒</a></td>
                        <td>Mark<span class="badge badge-danger">熟客</span></td>
                        <td>[e-mail]</td>
                        <td>已出貨</td>
                        <td class="text-right">NT 988</td>
                        <td>
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#editModal" data-title="編輯 肥肥肥皂">編輯</button>
                                <button type="button" class="btn btn-outline-secondary">查看</button>
                                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    其他
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">操作紀錄</a>
                                    <a class="dropdown-item" href="#">資料匯出</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item text-danger" href="#" data-toggle="modal" data-target="#removeModal" data-title="肥肥肥皂">刪除訂單</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="table-danger">
                        <td>2</td>
                        <td><a href="#">阿里布達 兩雙</a></td>
                        <td>Bill</td>
                        <td>[e-mail]</td>
                        <td class="text-danger">缺貨</td>
                        <td class="text-right">NT 9338</td>
                        <td>
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#editModal" data-title="編輯 阿里布達">編輯</button>
                                <button type="button" class="btn btn-outline-secondary">查看</button>
                                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    其他
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">操作紀錄</a>
                                    <a class="dropdown-item" href="#">資料匯出</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item text-danger" href="#" data-toggle="modal" data-target="#removeModal" data-title="阿里布達">刪除訂單</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td><a href="#">電風扇 兩隻</a></td>
                        <td>Popo</td>
                        <td>[e-mail]</td>
                        <td>進貨中</td>
                        <td class="text-right">NT 199</td>
                        <td>
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#editModal" data-title="編輯 電風扇">編輯</button>
                                <button type="button" class="btn btn-outline-secondary">查看</button>
                                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    其他
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">操作紀錄</a>
                                    <a class="dropdown-item" href="#">資料匯出</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item text-danger" href="#" data-toggle="modal" data-target="#removeModal" data-title="電風扇">刪除訂單</a>
                                </div>
                            </div>
                        </td>
                    </tr>
            </table>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
            </div>
        </div>
        <nav aria-label="Page navigation example">
            <ul class="pagination mt-5 justify-content-center">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
        </nav>
    </div>
    <footer class="mt-5 py-3 text-center bg-light text-secondary">
        後台管理系統
    </footer>
    <!-- editModal -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label for="goods">產品名稱</label>
                    <select class="form-control"><!-- 3.在選單內的文字似乎沒有上下置中，要如何調整? -->
                        <option>肥肥肥皂</option>
                        <option>阿里布達</option>
                        <option>電風扇</option>
                    </select>
                    <label for="number">數量</label>
                    <input class="form-control" min="0" max="100" type="number" id="number">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- removeModal -->
    <div class="modal fade" id="removeModal" tabindex="-1" role="dialog" aria-labelledby="removeModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="removeModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <label for="goods">產品名稱</label>
                    <select class="form-control">
                        <option class="modal-delete">Modal title</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-outline-danger">delete</button>
                </div>
            </div>
        </div>
    </div>
    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
    <script>
    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();

        //4. 編輯的 Modal 事件
        $('#editModal').on('show.bs.modal', function(event) {
            var btn = $(event.relatedTarget); //取出和#editModel相關的事件按鈕
            var title = btn.data('title'); //取出btn這個按鈕data-title的內容
            var modal = $(this); //宣告model變數就是他自己#editModal
            modal.find('.modal-title').text(title); //在modal中，找到class="modal-title"那一行，把文字替換成"快速下單"，也可以替換成#editModalLabel尋找id="editModalLabel"那一行也找的到
        });

        $('#removeModal').on('show.bs.modal', function(event) {
            var btn = $(event.relatedTarget);
            console.log(btn);
            var title = btn.data('title');
            console.log(title);
            var modal = $(this);
            console.log(modal);
            modal.find('.modal-title').text('確認刪除 ' + title);
            modal.find('.modal-delete').text(title);
        })
    });
    </script>

# 捌、購物網站介面上線

## 一、使用 List Group 切換產品類別
- bg-transparent可以使背景透明
- 如果不想讓使用者點擊已經disabled的按鈕可以使用pointer-event:none;

- 使用alert來製作付款提示步驟

- class="form-row"可以讓彼此的gutter變小至5px。

# 玖、Bootstrap 與 Sass
## 一、Sass 環境與運行的方法
### 資料夾說明:
- node-module是npm安裝的資料夾，主要是看package.json裡面有安裝了什麼。
- public是用來發布到github上的資料夾
- source為本地端資料夾
- gulpfiles為gulp需要的自動化功能

## 二、正式版後變數的改變 以及 Sass 錯誤的排除方式

## 三、移除變數
- 在本地端source資料夾裡，有一個變數的資料夾，方便開發者修改。
- 直接把變數註解掉

$theme-colors: map-merge(
  (
    "primary":    $primary,<!-- primary不能註解掉-->
    "secondary":  $secondary,
    "success":    $success,<!-- success不能註解掉-->
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,<!--  danger不能註解掉 -->
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

- 從 Map 中移除變數: 移除色彩從 $theme-colors，或其他的 map 可用 map-remove。

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

## 四、選擇性載入 Bootstrap 與修改變數
- 在source>stylesheets>all.scss檔案，用來編輯要匯入什麼檔案
### 1.匯入全部的bootstrap

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

### 2.選擇性匯入
只選擇匯入你需要的元件，縮小檔案的大小。

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

## 五、變數修改說明及示例
- 基本調整:顏色、字體大小、間距..
- 透過搜尋dropdown等元件，直截調整變數樣式。

## 六、新增自己的元件，並讀取 Bootstrap 的變數
### 1.建立元件scss，並將元件匯入all.scss檔案

### 2.編輯自定義的元件檔案。modifier:大量產生你的css元件色彩

.box{
    width: 100px;
    height: 100px;
    background-color:theme-color("primary");
<!--     套用BS的定義顏色 -->
    &:hover{
        background-color:theme-color-level("primary",-10);
        }     
<!--         使用theme-color-level將顏色調暗 -->
   
} 
<!-- $color代表有語意的顏色，$value代表在$theme-color實際的顏色 -->
@each $color, $value in $theme-colors {
    .box-#{$color} {
        background-color:$value;
        color: color-yiq($value);   
        &:hover{
            background-color:theme-color-level($color,-10);
<!--        theme-color-level裡面只能放$color -->
        }
    }
}

### 3.將定義好的class名稱寫到html上面

### 4.延伸範例:
[卡斯伯](https://wcc723.github.io/css/2016/12/25/sass-map/)老師:Sass Map 快出產出大量樣式

$gray-light:  #777;
$brand-primary: #009AFF;
$brand-accent: #D84315;

$btn-config:(
	default:(
		class: 'default',
		color: $gray-light,
        bg: #fff,
		border-color: #ccc
	),
	primary:(
		class: 'primary',
		color: #fff,
		bg: $brand-primary,
		border-color: $brand-primary
	),
	accent:(
		class: 'accent',
        color: #fff,
		bg: $brand-accent,
		border-color: $brand-accent
	)
);

$btn-config 之下記錄了 3 筆資料，分別是 default、primary、accent，
這三筆資料下方又有各自的內容，內容分類是 class、color、bg、border-color。
@each $name, $value in $btn-config 這樣的寫法，如同老師的文章中所述，會將物件一一讀取出來，
在 @each 後出現的第 1 個變數，指的是 $btn-config 結構中第一層資料 default、primary、accent，
第 2 個變數，指的則是第二層 class、color、bg、border-color 整組的內容，搭配 map-get 可以決定取出的是 class、color、bg、border-color 中的哪一類資料。
$name, $value 都是在 @each $name, $value in $btn-config 這樣的寫法中直接被宣告出來的變數，所以也可以更換成其它命名。

$class: map-get($value, class) 的意思是，

將 class 的資料放入 $class 這個變數之中。

@each $name, $value in $btn-config {
  $class: map-get($value, class);
  $color: map-get($value, color);
  $bg: map-get($value, bg);
  $border-color: map-get($value, border-color);

  .btn-#{$name}{
    @include button-variant($color, $bg, $border-color);
  }
}

使用 @each 分別跑過 $btn-config 中的每一筆資料，

過程是：

將 default 之下 class 的資料放入 $class 這個變數之中。

將 default 之下 color 的資料放入 $color 這個變數之中。

將 default 之下 bg 的資料放入 $bg 這個變數之中。

將 default 之下 border-color 的資料放入 $border-color 這個變數之中。

在 .btn-default 載入 button-variant 這個 @mixin 的設定，這個 @mixin 有用到三個變數（$color、$bg、$border-color），在這一輪使用的變數值是剛剛從 default 之下取出來的值。

將 primary 之下 class 的資料放入 $class 這個變數之中。

將 primary 之下 color 的資料放入 $color 這個變數之中。

將 primary 之下 bg 的資料放入 $bg 這個變數之中。

將 primary 之下 border-color 的資料放入 $border-color 這個變數之中。

在 .btn-primary 載入 button-variant 這個 @mixin 的設定，這個 @mixin 有用到三個變數（$color、$bg、$border-color），在這一輪使用的變數值是剛剛從 primary 之下取出來的值。

將 accent 之下 class 的資料放入 $class 這個變數之中。

將 accent 之下 color 的資料放入 $color 這個變數之中。

將 accent 之下 bg 的資料放入 $bg 這個變數之中。

將 accent 之下 border-color 的資料放入 $border-color 這個變數之中。

在 .btn-accent 載入 button-variant 這個 @mixin 的設定，這個 @mixin 有用到三個變數（$color、$bg、$border-color），在這一輪使用的變數值是剛剛從 accent 之下取出來的值。

:::warning
我的詮釋:

.btn-#{$class}{
@include button-variant($color, $bg, $border-color);
}
#{$class}為什麼可以對應到$color-config裡面的資料?
後來我想#{$name}代表取用冒號前面的內容，冒號後面對應的則是{$value}的內容，那跟#{$class}的意思也是一樣的。
:::

## 六、如何釋出編譯後的 Sass 檔案
### 1.編譯沒壓縮的sass檔案，輸入指令

gulp build

### 2.編譯有壓縮的sass檔案，輸入指令

gulp build --env production

# 拾、更好的 Bootstrap 版型開發

## 一、 更好的版型設計 - 從版型中尋找合適的範例
### 1.參考版型的注意事項
- 版型有分付費、非付費
並非花錢後就能減少開發時間
- 注意Bootstrap的版本
- 是否有提供原始檔
- 有些有scss、有些只有css
- 不要選擇有壓縮的

## 二、更好的版型設計 - 從相關的資源臨摹
### 1.臨摹版型
- 初期盡可能臨摹版型，而不是圖像。
- 用使用者開發工具來了解結構
- 分為版型和元件來開發
- 版型:重點在flex的熟悉。
- 元件:靈活使用sass的特性。
### 2.參考網站
- 有原始檔:web theme、web template、web design、shopify、codepen
- 僅圖片:behance、dribbble

## 三、不同的排版 - 不規則格狀排版
[範例](https://codepen.io/PaiP/pen/KKwvRzO?editors=1100)
### 1.form-row
- gutter更小，只有10px。
### 2.背景圖片語VS圖片的不同
- 背景圖要靠文字或給定的高度去撐高
- 配合屬性，使圖片置中
background-size:cover;
background-position:center center;
- 圖片放上去如果沒做設定就是原圖
- 配合屬性，使圖片置中
object-fit:cover;
object-position:center center;

## 四、不同的排版 - 高低不同的價格表
[範例](https://codepen.io/PaiP/pen/PowKBzm?editors=1000)
- 使卡片高度就算拉長，內容高度還是會等高的方式
使用flex，.card-body裡面有flex:1 1 auto的屬性，因為卡片裡面只有他有設定延伸屬性，所以當卡片高度增高，就會延伸內容高度。
- 為了凸顯出中間的卡片，刻意把左右兩側的卡片內推，記得要設定card h-100的屬性，才會使卡片自適應。

## 五、使用 Sass 開發屬於自己的元件
這章節好難....等練習Bootstarp有一定掌握度再來試試

# 拾壹、Bootstrap JavaScript 元件補充說明
## 一、JS 元件的其它操作方法概述
### 1.Javascript在Bootstrap中的使用
- option:調整JS套件的預設設定
例如: 輪播的速度 data-interval:3000;
- method:主動呼叫JS套件
例如:呼叫Modal顯示 $('#mymodal').modal('show')
- event:去監聽這個元件
例如: 啟用Modal後，執行特定事件
$('#mymodal').on('show.bs.modal',function(e){
function(e){
//do something
alert('modal已被啟用')
}
});