一．邊框樣式
1. 使用.border 給元素增加相應的邊框，默認是淡灰色；
2. 如果顏色太淡，可以使用.border-*設置想要的場景，比如.border-success；
3. .border-*，包含：primary、secondary、success、danger、warning、info、light、dark 和 white；
<img src="img/img1.png" alt="邊框" class="border-success border"> <img src="img/img1.png" alt="邊框" class="border-success border-top"> <img src="img/img1.png" alt="邊框" class="border-success border-bottom"> <img src="img/img1.png" alt="邊框" class="border-success border-left"> <img src="img/img1.png" alt="邊框" class="border-success border-right">
4. 使用.border-0 消減四周的邊框，或使用.border-*-0 消減某一邊的邊框；
<img src="img/img1.png" alt="邊框" class="... border-0"> <img src="img/img1.png" alt="邊框" class="... border-top-0"> <img src="img/img1.png" alt="邊框" class="... border-bottom-0"> <img src="img/img1.png" alt="邊框" class="... border border-left-0"> <img src="img/img1.png" alt="邊框" class="... border border-right-0">
5. 使用.rounded 和.rounded-*實現各種方位圓角；
<img src="img/img2.png" alt="圓角" class="rounded"> <img src="img/img2.png" alt="圓角" class="rounded-top"> <img src="img/img2.png" alt="圓角" class="rounded-bottom"> <img src="img/img2.png" alt="圓角" class="rounded-left"> <img src="img/img2.png" alt="圓角" class="rounded-right"> <img src="img/img2.png" alt="圓角" class="rounded-circle"> <img src="img/img2.png" alt="圓角" class="rounded-pill"> <img src="img/img2.png" alt="圓角" class="rounded-0">
6. 使用.rounded-sm 和.rounded-lg 實現圓角半徑大小；
<img src="img/img2.png" alt="圓角" class="rounded-sm"> <img src="img/img2.png" alt="圓角" class="rounded-lg">
二．顏色樣式
1. 使用.text-*將文本設置成指定的顏色，比如：text-success；
<span class="text-primary">Bootstrap</span> <span class="text-secondary">Bootstrap</span> <span class="text-success">Bootstrap</span> <span class="text-danger">Bootstrap</span> <span class="text-warning">Bootstrap</span> <span class="text-info">Bootstrap</span> <span class="text-dark">Bootstrap</span> <span class="text-body">Bootstrap</span> <span class="text-muted">Bootstrap</span> <span class="text-light bg-dark">Bootstrap</span> <span class="text-white bg-dark">Bootstrap</span> <span class="text-black-50">Bootstrap</span> <span class="text-white-50 bg-dark">Bootstrap</span>
2. 使用.text-*也可以實現懸停和焦點的超鏈接樣式，white 和 muted 不支持；
<a href=# class="text-primary">Bootstrap</a> <a href=# class="text-secondary">Bootstrap</a> <a href=# class="text-success">Bootstrap</a> <a href=# class="text-danger">Bootstrap</a> <a href=# class="text-warning">Bootstrap</a> <a href=# class="text-info">Bootstrap</a> <a href=# class="text-dark">Bootstrap</a> <a href=# class="text-body">Bootstrap(no)</a> <a href=# class="text-muted">Bootstrap(no)</a> <a href=# class="text-light bg-dark">Bootstrap</a> <a href=# class="text-white bg-dark">Bootstrap(no)</a> <a href=# class="text-black-50">Bootstrap</a> <a href=# class="text-white-50 bg-dark">Bootstrap</a>
3. 使用.bg-*可以實現背景色，具體如下：
<div class="p-2 mb-2 bg-primary">Bootstrap</div> <div class="p-2 mb-2 bg-secondary">Bootstrap</div> <div class="p-2 mb-2 bg-success">Bootstrap</div> <div class="p-2 mb-2 bg-danger">Bootstrap</div> <div class="p-2 mb-2 bg-warning">Bootstrap</div> <div class="p-2 mb-2 bg-light">Bootstrap</div> <div class="p-2 mb-2 bg-dark">Bootstrap</div> <div class="p-2 mb-2 bg-white">Bootstrap</div> <div class="p-2 mb-2 bg-transparent">Bootstrap</div>
筆記選自李炎恢的Bootstrap v4.x教程筆記