Bootstrap4组件：旋转特效(Spinners)


发布时间：2020-03-20 16:38    作者： 晖哥哥   已过去：3 年   阅读总量：2761 已被赞：1

旋转特效(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>

 

点赞

1


登陆后方可评论

年 月 归 档
点 赞 最 多
同 类 推 荐