< span > 單純行內元素
< u > 下底線的效果
< b > 突出顯示,而不增加重要性
< ins > 補充的內容
< mark > 強調的內容
< s > strikethrough 不準確的內容
< del > delete 強調被刪除的內容
< h1 > 這一頁最重要的部分
< strong > 強調得粗體文本
< small > 用於免責聲明、版權條款等呈現
< i > italic 外觀顯示斜體,有語意,用於表現因某些原因需要區分普通文本的一系列文本。例如技術術語,外文短語或是小說中人物的思想活動等,他的內容通常以斜體顯示。
< em > emphasized有語意,標記出需要用戶著重閱讀的內容。
<abbr title="attribute">attr</abbr>
<abbr title="請輸入一個正確的地址" class="initialism">地址</abbr>
<blockquote class="blockquote">
<p class="mb-0">霹靂卡霹靂拉拉 波波力那貝貝魯多。</p>
<footer class="blockquote-footer">小魔女 <cite title="Source Title">Do Re Mi</cite></footer>
</blockquote>
<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>
<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>
<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>
img-thumbnail會出現像一個頭像的效果
rounded則會讓四個角變成圓角
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>
<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>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
指定替代圖片的路徑
用法與CSS中的媒體查詢相同。(e.g. max-width, min-width, max-height, min-height, orientation)
指定圖片的尺寸。(e.g. sizes=”100vw”) 或是同時指定媒體查詢及圖片尺寸。(e.g. sizes=”(max-width: 30em) 100vw”)
指定替代圖片的格式,(e.g. type=”image/webp” or type=”image/vnd.ms-photo”)
<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>
<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>
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Class |
---|
Active |
Default |
Primary |
Secondary |
Success |
Danger |
Warning |
Info |
Light |
Dark |
<caption>List of users</caption>
<div class="table-responsive">
<table class="table">
...
</table>
</div>
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。
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
屬性 | 組合 | |
---|---|---|
flex | .flex-{size}-{flex 屬性} |
.d-flex .d-inline-flex |
flex-direction | .flex-{size}-{direction 屬性} |
.flex-row .flex-row-reverse .flex-column .flex-column-reverse |
justify-content | .justify-content-{size}-{justify-content 屬性} |
.justify-content-start .justify-content-end .justify-content-center .justify-content-between .justify-content-around |
align-items | .align-items-{size}-{align-items 屬性} |
.align-items-start .align-items-end .align-items-center .align-items-baseline .align-items-stretch |
flex-wrap | .flex-{size}-{flex-wrap 屬性} |
.flex-nowrap .flex-wrap .flex-wrap-reverse |
align-content (限制 wrap) | .flex-{size}-{align-content 屬性} |
.align-content-start .align-content-end .align-content-center .align-content-around .align-content-stretch |
屬性 | 組合 | |
---|---|---|
align-self | .align-self-{size}-{align-self 屬性} |
.align-self-start .align-self-end .align-self-center .align-self-baseline .align-self-stretch |
order | .order-{order 數值} |
.order-1 .order-2 .order-3 ... .order-12 |
<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>
用來決定排列的順序。
用在段落是否換行,但在row的屬性裡就有自動換行的屬性,那什麼時候使用d-flex,什麼時候使用row?
在需要使用格線系統時就可使用 row,僅有使用 flex 就使用 d-flex
必須要在wrap包裹住的狀態下使用,而他預設的屬性是stretch,會自適應容器寬高延伸。
{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
display: block並且設定一個寬度就可以使用 margins:auto.,使block置中
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推到最左邊
在size前面加上n -> mt-n1
只有margin能使用n。
< 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>
< 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
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; 可並排的區塊元素 高度可變
<div class="demo">
<div class="embed-responsive embed-responsive-尺寸">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/WqoFFNlXY1c"></iframe>
</div>
</div>
使其文字齊行,但在很多中文字上不適用
使文字置左、置中、置右
也能加上size配合響應式設計
請注意,垂直對齊僅影響 inline、inline-block、inline-table、和 table 元素。
<p>
<img src="http://lorempixel.com/100/100/food" class="align-text-bottom" alt="">
<span>text-bottom</span>
</p>
<p>
<img src="http://lorempixel.com/100/100/food" class="align-text-top" alt="">
<span>text-top</span>
</p>
會使物件消失,但佔有的位置會保留
而display:none則是完全消失喔。
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>
<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">×</span>
</button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>
</div>
可以作為連結或按鈕的計數器
4
可配合顏色情境
<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 可以使標籤更圓潤
Primary
將 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>
btn 具有不同的語意化色彩,可透過 btn-{theme-color} 來替換
<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>
btn-outline-{theme-color}
btn-lg、btn-sm
btn-block
active
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
在使用前必須載入JQuery
按鈕加上 data-toggle="button" 用來切換狀態
<button type="button" class="btn btn-outline-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle </button>
<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>
<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>
a 標籤是做連結使用,button 是按鈕,常用來綁定 JS 事件,
使用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>
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>
調整群組不同尺寸 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>
當您想要下拉式功能表與群組按鈕混合時,只需要將 .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>
加入 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>
正確來說 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 相對影響較小
:::
:::
section, header 稱為語意化標籤
目的是讓瀏覽器能夠理解程式碼的意思
以及方便開發者管理
而 header 的意思是標頭的意思
適合使用在畫面頂部及區塊的標頭
section 是 “節” 的意思
適合使用在畫面中一個區塊性的內容
當語意上符合以上標籤時
就會將 div 替換成 header 或 section 喔
不僅可以讓瀏覽器更理解資料內容
也可以避免整個畫面都是 div 難以管理
<!-- 當日重要數字訊息 -->
<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>
<div class="table-responsive">
<table class="table">
...
</table>
</div>
<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>
加入data-toggle="tooltip" data-placement="top" data-html="true" title="開始搜尋"預覽搜尋列,而data-html則是允許title的html格式輸出
style="min-width:768px;",給表格一個最小寬度,為了讓字體不因為響應式而全部擠在一起
在選單內的文字似乎沒有上下置中,要如何調整?
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>mark@mail.com</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>bill@mail.com</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>popo@mail.com</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">×</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">×</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>
bg-transparent可以使背景透明
如果不想讓使用者點擊已經disabled的按鈕可以使用pointer-event:none;
使用alert來製作付款提示步驟
class="form-row"可以讓彼此的gutter變小至5px。
$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
);
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Custom.scss
// Option A: Include all of Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
只選擇匯入你需要的元件,縮小檔案的大小。
// 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";
.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 -->
}
}
}
卡斯伯老師: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 的資料放入 $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 有用到三個變數(
將 primary 之下 class 的資料放入 $class 這個變數之中。
將 primary 之下 color 的資料放入 $color 這個變數之中。
將 primary 之下 bg 的資料放入 $bg 這個變數之中。
將 primary 之下 border-color 的資料放入 $border-color 這個變數之中。
在 .btn-primary 載入 button-variant 這個 @mixin 的設定,這個 @mixin 有用到三個變數(
將 accent 之下 class 的資料放入 $class 這個變數之中。
將 accent 之下 color 的資料放入 $color 這個變數之中。
將 accent 之下 bg 的資料放入 $bg 這個變數之中。
將 accent 之下 border-color 的資料放入 $border-color 這個變數之中。
在 .btn-accent 載入 button-variant 這個 @mixin 的設定,這個 @mixin 有用到三個變數(
我的詮釋:
.btn-#{\(class}{ @include button-variant(\)color, $bg, \(border-color); } #{\)class}為什麼可以對應到\(color-config裡面的資料? 後來我想#{\)name}代表取用冒號前面的內容,冒號後面對應的則是{\(value}的內容,那跟#{\)class}的意思也是一樣的。
gulp build
gulp build --env production
這章節好難…等練習Bootstarp有一定掌握度再來試試