Bootstrap/docs/4.5/components/spinners

来自菜鸟教程
跳转至：导航、​搜索

在GitHub上查看

微调器

使用Bootstrap微调器指示组件或页面的加载状态,这些微调器完全使用HTML,CSS而不使用JavaScript构建。

关于

引导程序“ spinners”可用于显示项目中的加载状态。 它们仅使用HTML和CSS构建,这意味着您不需要任何JavaScript即可创建它们。 但是,您将需要一些自定义JavaScript来切换其可见性。 它们的外观,对齐方式和大小可以通过我们惊人的实用程序类轻松进行自定义。

为了方便访问,此处的每个加载程序都包括 role="status" 和一个嵌套 <span class="sr-only">Loading...</span>.

边框微调器

将边框微调框用于轻型加载指示器。 

<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>

颜色

边框微调器使用 currentColor 为其 border-color ,表示您可以使用 文字颜色实用程序 。您可以在标准微调器上使用我们的任何文本颜色实用程序。 

<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>

为什么不用 border-color 事业吗？ 每个边框微调器指定一个 transparent 至少一侧边框,所以 .border-{color} 实用程序会覆盖它。


不断增长的微调器

如果您不喜欢边框微调器,请切换到增长微调器。 尽管从技术上讲它不是旋转的,但确实会反复增长！ 

<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>

再次,这个微调器是用 currentColor ,因此您可以轻松地更改其外观 文字颜色实用程序 。它以蓝色显示,以及受支持的变体。 

<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>

对准

Bootstrap中的微调器内置 rem s, currentColor ,和 display: inline-flex 。这意味着它们可以轻松地调整大小,重新着色并快速对齐。

余量

Use 保证金工具 like .m-5 便于间距。 

<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>

放置

Use flexbox实用程序 , 浮动工具 , or 文字对齐 可以在任何情况下将微调器精确地放置在所需位置的实用程序。

Flex

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
载入中... 
<div class="d-flex align-items-center">
<strong> 载入中... </strong>
<div aria-hidden="true" class="spinner-border ml-auto" role="status"></div>
</div>

花车

<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>

文字对齐

<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>

Size

Add .spinner-border-sm and .spinner-grow-sm 制作出可以在其他组件中快速使用的更小的微调器。 

<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>

或者,使用自定义CSS或内联样式来根据需要更改尺寸。 

<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>

纽扣

使用按钮内的微调器指示当前正在处理或正在进行的操作。 您也可以将文本换出spinner元素,并根据需要使用按钮文本。 

<button class="btn btn-primary" disabled="" type="button">
<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" disabled="" type="button">
<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span> 载入中... </button>
<button class="btn btn-primary" disabled="" type="button">
<span aria-hidden="true" class="spinner-grow spinner-grow-sm" role="status"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" disabled="" type="button">
<span aria-hidden="true" class="spinner-grow spinner-grow-sm" role="status"></span> 载入中... </button>
取自“https://cainiaojiaocheng.com/index.php?title=Bootstrap/docs/4.5/components/spinners&oldid=76”
Powered by MediaWiki