使用.d-*來設定元素的display模式，*可以是none、inline、inline-block、block、 table、table-row等;

也可以通過.d-md-*中的md設定響應式的媒體查詢效果;

<!--
使用.d-*來設定元素的display模式，*可以是none、inline、inline-block、block、 table、table-row等;
也可以通過.d-md-*中的md設定響應式的媒體查詢效果;
-->
<!--可以設定幾種不同屬性的元素：-->
<div class="d-none">d-none</div>
<
 
div class="d-inline">d-inline</div>
<div class="d-inline-block">d-inline-block</div>
<div class="d-block">d-block</div>
<div class="d-table">d-table</div>
<div class="d-table-row">d-table-row</div>

使用.embed-responsive實現嵌入響應式，比如<iframe> 、 <embed>等...　　

再使用.embed-responsive-16by9實現響應式比例，還可以21:9,4:3,1:1;

使用.text-*設定文字的對齊方式，有left、center、right;　　【懂得都懂】

可以設定.text-md-*實現響應式的媒體查詢效果;　　　　【懂得都懂】

<!--
使用.embed-responsive實現嵌入響應式，比如<iframe>T <embed>等
再使用.embed-responsive-16by9實現響應式比例，還可以21:9,4:3,1:1;
使用.text-*設定文字的對齊方式，有left、center、right;【這個不說了 懂得都懂】
 
-->
<!--
embed-responsive:實現響應式佈局
embed-responsive-*by*： *是指定比例
-->
<div class="embed-responsive embed-responsive-1by1">
<iframe src="https://www.baidu.com"></iframe>
</div>

使用.text-warp和.text-nowarp實現文字溢位時是否換行;

使用.text-break對於很長的字串，且中間沒有空格實現換行;

使用.text-lowercase設定小寫，.text-uppercase設定大寫，以及.text-capitalize設定首字母大寫;

<style>
    .temp{
        width: 150px;
        margin: 10px;
    }
</style>

<!--
使用.text-wrap和.text-nowrap實現文字溢位時是否換行;
wrap是  nowrap是不換行
-->
<div class="temp bg-info  text-nowrap">那我走？那我走？那我走？那我走？那我走？那我走？那我走？那我走？那我走？那我走？</div>
<div class="temp bg-info text-wrap ">那我走？那我走？那我走？那我走？那我走？那我走？那我走？那我走？那我走？那我走？</div>
<hr>
<!--使用.text-break對於很長的字串，且中間沒有空格實現換行;-->
<div class="temp bg-info text-break">123 123 123123123123123123123123123123123123123123123123123123123123123</div>
<hr>
<!--使用.text-lowercase設定小寫，.text-uppercase設定大寫，以及.text-capitalize設定首字母大寫;-->
<p class="text-lowercase">bi-hu</p>
<p class="text-uppercase">bi-hu</p>
<p class="text-capitalize">bi-hu</p>

使用.font-weight-bold加粗、.font-weight-normal 正常、.font-weight-light纖細、.font-italic傾斜;

使用.text-monospace設定等寬字型;

<!--
使用.font-weight-bold加粗、.font-weight-normal 正常、.font-weight-light纖細、.font-italic傾斜;
使用.text-monospace設定等寬字型;
-->

<p class="font-weight-bold">粗體 我是粗體</p>
<p class="font-weight-normal">正常字型</p>
<p class="font-weight-light">纖細字型</p>
<p class="font-italic">傾斜字型</p>
<p class="text-monospace">等寬字型</p>

使用.text-reset 實現字型顏色的重置;

使用.text-decoration-none刪除超連結下劃線;

<!--
使用.text-reset 實現字型顏色的重置;    【繼承父類顏色 比如 超連結標籤a】
使用.text-decoration-none刪除超連結下劃線;
-->
<!--重置預設黑色 如果父有顏色 繼承父類-->
<div class="text-warning">
<a href="#" class="text-reset">zspt.cc</a>
</div>

<a href="#" class="text-decoration-none">zspt.cc</a>