22. bootstrap组件#巨幕和旋转图标

bootstrap组件#巨幕和旋转图标

巨幕不用怎么学 这玩意卡片我觉得都可以替代它...

1. 巨幕 jumbotron

基类 是 .jumbotron 然后就没了,,,,,,,可以在里面添加各种组件 和样式而已:

 巨幕的宽度会制动占据100%

<!--  巨幕的宽度会制动占据100% 背景颜色自己改啊!  -->
    <div class="jumbotron " style=" height: 310px;">
        <p class="text-primary">中山市Bi-Hu科技公司</p>
        <h1 class="display-4">盛 大 开 业</h1>
        <p class="text-secondary ml-5 mt-2">2021.10.10</p>

        <hr class="">
        <p class="text-info">百年传奇,坚守百年传承,沉淀岁月灵感,很难说无可挑剔,但从未停步。</p>
        <div class="text-center"><h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;..</h3></div>
    </div>

打广告用的吧...

2.旋转图标:

Spinners

有两种  一种是 转圈圈的 另一种是 外扩散

基类:

转圈圈:spinner-border

点扩散:spinner-grow

例:

<!-- 默认是黑灰色  -->
    <div class="spinner-border"></div>
    <div class="spinner-grow"></div>

emmmm:它类似于text  颜色、什么的直接用 text-* 改即可:


<!-- 默认是黑灰色 修改颜色 text-*即可 甚至你可以往里面加文字 -->
    <div class="spinner-border text-primary"></div>
    <div class="spinner-grow text-warning"><p class="text-white text-center align-middle">1</p></div>
关于微调 自己用 外面局 m-* 或者 m*-* 你懂得...


然后还有组合 和 尺寸 : 
尺寸 直接 基类-sm/lg 这个不多说,然后组合【例如 和按钮组合】:
<!-- 和按钮组合起来: 颜色自己换即可-->
    <div class="btn btn-success m-5" >
        <div class="spinner-border spinner-border-sm "></div>   login...
    </div>

没什么好说的了 本来就没什么东西...
 

然后

本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14900114.html

原文地址:https://www.cnblogs.com/bi-hu/p/14900114.html