Bootstrap4组件:旋转特效(Spinners)


发布时间:2020-03-20 16:38    作者: Uncle Hui   已过去:2 月,2 周   阅读总量:163 已被赞:0


旋转特效(Spinners)

圆形旋转

<div class="spinner-border"></div>

颜色

<div class="spinner-border"></div>

<div class="spinner-border text-primary"></div>

<div class="spinner-border text-secondary"></div>

<div class="spinner-border text-success"></div>

<div class="spinner-border text-danger"></div>

<div class="spinner-border text-warning"></div>

<div class="spinner-border text-info"></div>

<div class="spinner-border text-light"></div>

<div class="spinner-border text-dark"></div>

渐变缩放点闪烁

<div class="spinner-grow"></div>

颜色

<div class="spinner-grow"></div>

<div class="spinner-grow text-primary"></div>

<div class="spinner-grow text-secondary"></div>

<div class="spinner-grow text-success"></div>

<div class="spinner-grow text-danger"></div>

<div class="spinner-grow text-warning"></div>

<div class="spinner-grow text-info"></div>

<div class="spinner-grow text-light"></div>

<div class="spinner-grow text-dark"></div>

对准

边距

边距设置 ,如 .m-5更简单。

<div class="spinner-border m-5"></div>

位置

(1) 弹性

<div class="d-flex justify-content-center"> #水平弹性布局居中d-flex要配合justify-content-center 使用

<div class="spinner-border"></div>

</div>

 

<div class="d-flex align-items-center">

<strong>Loading...</strong>

<div class="spinner-border ml-auto"></div>

</div>

 

 

(2) 浮动

<div class="clearfix">#清除浮动

<div class="spinner-border float-right"></div> #右浮动

</div>

 

(3) 对齐方向

<div class="text-center">

<div class="spinner-border"></div>

</div>

大小

加上 .spinner-border-sm  .spinner-grow-sm为了制作一个更小的转轮,可以快速地在其他组件中使用。

<div class="spinner-border"></div>

<div class="spinner-border spinner-border-sm"></div>

 

<div class="spinner-grow"></div>

<div class="spinner-grow spinner-grow-sm"></div>

或者,根据需要使用自定义CSS或内联样式更改维度

自定义大小

<div class="spinner-border"></div>

<div class="spinner-border" style="width:3rem;height:3rem;"></div>

 

<div class="spinner-grow"></div>

<div class="spinner-grow" style="width:3rem;height:3rem;">></div>

按钮中使用旋转类型

在按钮中使用旋转器指示当前正在处理或正在进行的操作。你还可以从spinner元素中交换文本,并根据需要使用按钮文本。

<button class="btn btn-primary" disabled>

<span class="spinner-border spinner-border-sm"></span>

</button>

<button class="btn btn-primary" disabled>

<span class="spinner-border spinner-border-sm"></span>

Loading...

</button>

 

<button class="btn btn-primary" disabled>

<span class="spinner-grow spinner-grow-sm"></span>

</button>

<button class="btn btn-primary" disabled>

<span class="spinner-grow spinner-grow-sm"></span>

Loading...

</button>

 

点赞

0




登陆后方可评论