11. bootstrap - 公共样式3

使用.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>