一、邊框
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>邊框</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
<style>
span{
background-color: #444;
color: #fff;
width: 70px;
height: 70px;
display: block;
}
</style>
</head>
<body style="background-color: #000">
<div class="container">
<div class="row mb-5 mt-5">
<div class="col-1">
<span class="border">全邊框</span>
</div>
<div class="col-1">
<span class="border-top">上</span>
</div>
<div class="col-1">
<span class="border-right">右</span>
</div>
<div class="col-1">
<span class="border-bottom">下</span>
</div>
<div class="col-1">
<span class="border-left">左</span>
</div>
<div class="col-1">
<span class="border border-0">無邊框</span>
</div>
<div class="col-1">
<span class="border border-top-0">右下左</span>
</div>
<div class="col-1">
<span class="border border-right-0">上下左</span>
</div>
<div class="col-1">
<span class="border border-bottom-0">上右左</span>
</div>
<div class="col-1">
<span class="border border-left-0">上右下</span>
</div>
<div class="col-1">
<span class="border border-left-0 border-right-0">上下</span>
</div>
<div class="col-1">
<span class="border-left border-right">左右</span>
</div>
</div>
<div class="row mb-5">
<div class="col-1">
<span class="border border-primary">重要色</span>
</div>
<div class="col-1">
<span class="border border-secondary">次要色</span>
</div>
<div class="col-1">
<span class="border border-success">成功色</span>
</div>
<div class="col-1">
<span class="border border-danger">危險色</span>
</div>
<div class="col-1">
<span class="border border-warning">警告色</span>
</div>
<div class="col-1">
<span class="border border-info">信息色</span>
</div>
<div class="col-1">
<span class="border border-light">亮色</span>
</div>
<div class="col-1">
<span class="border border-dark">暗色</span>
</div>
<div class="col-1">
<span class="border border-white">白色</span>
</div>
</div>
<div class="row mb-5">
<div class="col-1">
<span class="border rounded">四角圓（默認半徑）</span>
</div>
<div class="col-1">
<span class="border rounded-top">上角圓（默認半徑）</span>
</div>
<div class="col-1">
<span class="border rounded-right">右角圓（默認半徑）</span>
</div>
<div class="col-1">
<span class="border rounded-bottom">下角圓（默認半徑）</span>
</div>
<div class="col-1">
<span class="border rounded-left">左角圓（默認半徑）</span>
</div>
<div class="col-1">
<span class="border rounded-circle">圓（半徑50%）</span>
</div>
<div class="col-2">
<span class="border rounded-circle" style="width: 170px;">橢圓（半徑50%）</span>
</div>
<div class="col-2">
<span class="border rounded-pill" style="width: 170px;">膠囊（半徑爲長寬較短者的一半）</span>
</div>
<div class="col-1">
<span class="border rounded-sm">小半徑</span>
</div>
<div class="col-1">
<span class="border rounded-lg">大半徑</span>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
二、清除浮動
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>清除浮動</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col-4">
<div class="bg-info">
<button type="button" class="btn btn-secondary">子元素沒有浮動</button>
</div>
</div>
<div class="col-4">
<div class="bg-info">
<button type="button" class="btn btn-secondary float-right">子元素添加浮動</button>
</div>
</div>
<div class="col-4">
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-right">清除父元素的浮動</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
三、顏色
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>顏色</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
</div>
<div class="col">
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
</div>
<div class="col">
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
四、Display顯示屬性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Display顯示屬性</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<table class="table">
<thead>
<th>屏幕規格</th>
<th>引用樣式</th>
</thead>
<tbody>
<tr>
<td>所有屏幕下隱藏</td>
<td>.d-none</td>
</tr>
<tr>
<td>只在xs屏幕上隱藏（即僅在手機屏幕上隱藏-其它規格屏幕正常顯示）</td>
<td>.d-none .d-sm-block</td>
</tr>
<tr>
<td>只在sm屏幕上隱藏（其它屏幕規格均顯示）</td>
<td>.d-sm-none .d-md-block</td>
</tr>
<tr>
<td>只在md屏幕時隱藏（其它屏幕規格均顯示）</td>
<td>.d-md-none .d-lg-block</td>
</tr>
<tr>
<td>只在lg屏幕時隱藏（其它屏幕規格均顯示）</td>
<td>.d-lg-none .d-xl-block</td>
</tr>
<tr>
<td>只在xl屏幕時隱藏（其它屏幕規格均顯示）</td>
<td>.d-xl-none</td>
</tr>
<tr>
<td>全部可見</td>
<td>.d-block</td>
</tr>
<tr>
<td>僅在xs屏幕時可見</td>
<td>.d-block .d-sm-none</td>
</tr>
<tr>
<td>僅在sm屏幕時可見</td>
<td>.d-none .d-sm-block .d-md-none</td>
</tr>
<tr>
<td>僅在md屏幕時可見</td>
<td>.d-none .d-md-block .d-lg-none</td>
</tr>
<tr>
<td>僅在lg屏幕時可見</td>
<td>.d-none .d-lg-block .d-xl-none</td>
</tr>
<tr>
<td>僅在xl屏幕時可見</td>
<td>.d-none .d-xl-block</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-1">
<div class="d-inline bg-primary text-white">d-inline</div><br>
</div>
<div class="col-2">
<span class="d-block bg-dark text-white">d-block</span>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
五、嵌入
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>嵌入</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col-6">
<h4>21:9</h4>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.csdn.net" allowfullscreen></iframe>
</div>
</div>
<div class="col-6">
<h4>16:9</h4>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.csdn.net" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<h4>4:3</h4>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.csdn.net" allowfullscreen></iframe>
</div>
</div>
<div class="col-6">
<h4>1:1</h4>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.csdn.net" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
六、Flex彈性佈局
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Flex彈性佈局</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
<style>
.col>div{
background-color: #ddd;
}
.col>div>div{
background-color: #aaa;
}
</style>
</head>
<body>
<div class="container" style="max-width: 90%;"><br>
<div class="row">
<div class="col">
<div class="d-flex p-2">.d-flex .p-2</div>
<hr>
<div class="d-inline-flex p-2">.d-inline-flex .p-2</div>
<hr>
<div class="d-flex flex-row">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex flex-row-reverse">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex flex-column">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex flex-column-reverse">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2 mr-auto">.p-左</div>
<div class="p-2">.p-中</div>
<div class="p-2">.p-右</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2">.p-左</div>
<div class="p-2">.p-中</div>
<div class="p-2 ml-auto">.p-右</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2 mr-auto">.p-左</div>
<div class="p-2">.p-中</div>
<div class="p-2 ml-auto">.p-右</div>
</div>
<div class="row" style="background: none;">
<div class="col" style="background: none;">
<hr>
<div class="d-flex align-items-start flex-column" style="height: 150px;">
<div class="mb-auto p-1">上</div>
<div class="p-1">中</div>
<div class="p-1">下</div>
</div>
</div>
<div class="col" style="background: none;">
<hr>
<div class="d-flex align-items-end flex-column" style="height: 150px;">
<div class="p-1">上</div>
<div class="p-1">中</div>
<div class="mt-auto p-1">下</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-flex justify-content-start">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex justify-content-end">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex justify-content-center">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex justify-content-around">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-start">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-end">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-center">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-baseline">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-stretch">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
</div>
<div class="col">
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-start">.align-self-start</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-end">.align-self-end</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-center">.align-self-center</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-baseline">.align-self-baseline</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-stretch">.align-self-stretch</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2 flex-fill text-center">1/5</div>|
<div class="p-2 flex-fill text-center">2/5</div>|
<div class="p-2 flex-fill text-center">3/5</div>|
<div class="p-2 flex-fill text-center">4/5</div>|
<div class="p-2 flex-fill text-center">5/5</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2">寬度合適</div>|
<div class="p-2">寬度合適</div>|
<div class="p-2 flex-grow-1">分配剩餘寬度</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2 w-100">儘量拓寬</div>|
<div class="p-2">儘量換行</div>
</div>
<hr>
<div class="d-flex flex-nowrap">
<div class="p-2">111-11</div>
<div class="p-2">222-22</div>
<div class="p-2">333-33</div>
<div class="p-2">444-44</div>
<div class="p-2">555-55</div>
<div class="p-2">666-66</div>
</div>
<hr>
<div class="d-flex flex-wrap">
<div class="p-2">111-11</div>
<div class="p-2">222-22</div>
<div class="p-2">333-33</div>
<div class="p-2">444-44</div>
<div class="p-2">555-55</div>
<div class="p-2">666-66</div>
</div>
<hr>
<div class="d-flex flex-wrap-reverse">
<div class="p-2">111-11</div>
<div class="p-2">222-22</div>
<div class="p-2">333-33</div>
<div class="p-2">444-44</div>
<div class="p-2">555-55</div>
<div class="p-2">666-66</div>
</div>
</div>
<div class="col">
<div class="d-flex flex-wrap align-content-start" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-center" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-end" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-between" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-around" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-stretch" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
七、Float浮動屬性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Float浮動屬性</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="float-left">在所有 viewport 窗口上浮動在左側</div><br>
<div class="float-right">在所有viewport 窗口上浮動到右側</div><br>
<div class="float-none">所有viewport 窗口都不浮動</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
八、溢出
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>溢出</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col-2 overflow-auto" style="height: 50px;">對於過長的內容，可以使用.overflow-auto樣式來進行滾動顯示</div>
<div class="col-2 overflow-hidden" style="height: 50px;">如果使用.overflow-hidden，則意味着不顯示多餘的內容。</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
九、固頂(底)及定位
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>固頂(底)及定位</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="border position-static">.position-static不支持響應式</div>
<hr>
<div class="border position-relative">.position-relative不支持響應式</div>
<hr>
<div class="border position-absolute">.position-absolute不支持響應式</div>
<hr>
<div class="border position-fixed">.position-fixed不支持響應式</div>
<hr>
<div class="border position-sticky">.position-sticky不支持響應式</div>
<div class="fixed-top">固定在頂部</div>
<div class="fixed-bottom">固定在底部</div>
<div class="sticky-top">貼齊於頂部</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十、陰影
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>陰影</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="shadow-none p-3 mb-5">無陰影</div>
<div class="shadow-sm p-3 mb-5">小範圍陰影</div>
<div class="shadow p-3 mb-5">默認陰影</div>
<div class="shadow-lg p-3 mb-5">大範圍陰影</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
十一、規格與尺寸
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>規格與尺寸</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col">
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
</div>
<div class="col">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<img class="mw-100" src="..." alt="Max-width 100%">
</div>
<div class="col">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
<div class="col">
<h4>相對於窗口</h4>
<div class="min-vw-100" style="background-color: #05f;">Min-width 100vw</div>
<div class="min-vh-100" style="background-color: #05f;">Min-height 100vh</div>
<div class="vw-100" style="background-color: #05f;">Width 100vw</div>
<div class="vh-100" style="background-color: #05f;">Height 100vh</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
十二、spacing間隔規範（Margin與Padding間距處理）
![]()
![]()
十三、文本處理
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>文本處理</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col-2">
<p class="text-left">文本居左</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本居右</p>
</div>
<div class="col-1">
<div class="badge badge-primary text-wrap" style="width: 2.5rem;">
文本換行
</div>
<div class="badge badge-primary text-nowrap" style="width: 2.5rem;">
文本不換行
</div>
<span class="badge badge-primary d-inline-block text-truncate" style="max-width: 70px;">
文本不換行加省略號
</span>
</div>
<div class="col-2">
<p class="text-break">對於太長的文本，可以使用.text-break樣式來進行換行，這種方式可以兼容IE和Edge</p>
</div>
<div class="col-2">
<p class="text-lowercase">ASDHUIAYIA</p>
<p class="text-uppercase">ppercasedtext</p>
<p class="text-capitalize">hd DH dH Dd</p>
</div>
<div class="col-1">
<p class="font-weight-normal">正常</p>
<p class="font-weight-bold">粗</p>
<p class="font-weight-light">細</p>
<p class="font-italic">斜</p>
</div>
<div class="col-1">
<p class="text-monospace">等寬字體</p>
<a href="#" class="text-reset">重置顏色</a><br><br>
<a href="#" class="text-decoration-none">文字裝飾</a>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
十四、垂直對齊
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>垂直對齊</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
<style>
.col:nth-of-type(1){
background-color: #ddd;
}
span{
background-color: pink;
}
td{
background-color: cyan;
}
</style>
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col">
<span class="align-baseline">基準</span>
<span class="align-top">頂部</span>
<span class="align-middle">垂直居中</span>
<span class="align-bottom">底部</span>
<span class="align-text-top">文本頂部</span>
<span class="align-text-bottom">文本底部</span>
</div>
<div class="col">
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">基準</td>
<td class="align-top">頂部</td>
<td class="align-middle">垂直居中</td>
<td class="align-bottom">底部</td>
<td class="align-text-top">文本頂部</td>
<td class="align-text-bottom">文本底部</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
![]()
十五、顯示或隱藏(能見度)處理
![]()
