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