BUZZING

Bootstrap 4 CDN設定

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Bootstrap 外容
<div class="container">
 </div> 
.container（置中限制範圍螢幕寬度的的容器）

<div class="container-fluid">
 </div>
.container-fluid（100%螢幕寬度的的容器）

Bootstrap grid system 

自行定義等份的網格
.col-（不受螢幕寬度限制，文字內文超過分配的欄位數後，自動往下跳）

12等分的RWD網格系統
col(欄)-sm(尺寸條件)-1(分配數量1~12，不設定實為自動百分比分配)
.col-sm-（螢幕寬度小於576px，橫欄轉變為直列）
.col-md-（螢幕寬度小於768px, 橫欄轉變為直列）
.col-lg-（螢幕寬度小於992px, 橫欄轉變為直列）
.col-xl-（螢幕寬度小於1200px, 橫欄轉變為直列）

語法結構
     <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12"><h2>TOP(BANNER)</h2></div>
        </div>
        <div class="row">
          <div class="col-sm-3"><h2>Menu</h2></div>
          <div class="col-sm-6"><h2>Content</h2></div>
          <div class="col-sm-3"><h2>AD</h2></div>
        </div>
        <div class="row">
          <div class="col-sm-12"><h2>Footer</h2></div>
        </div>
     </div>

標題大小字級換算與處理 

h1 (2.5rem = 40px)
h2 (2rem = 32px)
h3 (1.75rem = 28px)
h4 (1.5rem = 24px)
h5 (1.25rem = 20px)
h6 (1rem = 16px)
1rem = 16px (rem: 未設定時字級的倍率)

.display-1 ~ .display 4 加大一級處理
<small></small> 縮小一級大小處理

文字顏色處理

.text-muted 中灰
.text-primary 藍(重要)
.text-success 綠(完成、成功、安全)
.text-info 藍綠(資訊)
.text-warning 橘黃(警示)
.text-danger 紅(危險)
.text-secondary 灰(比中灰重一點)
.text- dark 暗灰
.text-body (預設文字顏色)
.text-light 淺灰

.text-white 白
.text-black 黑 (黑白可設定為透明度50)

.bg- (底部顏色bg-dark)

<p class="text-white-50 bg-success"></p>

<mark>highlight</mark> 

<abbr title="World Health Organization">WHO</abbr>
<code>span</code>

<dl>
    <dt></dt>
    <dd></dd>
</dl>

<blockquote class="blockquote">
    <p></p>
    <footer class="blockquote-footer"></footer>
</blockquote>

<kbd>ctrl + p</kbd>

<pre></pre>