1. 程式人生 > 其它 >22. bootstrap元件#巨幕和旋轉圖示

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>

沒什麼好說的了 本來就沒什麼東西...

然後