bootstrap如何实现响应列表(bootstrap可以写动态效果吗)

本文主要讲解“如何在Bootstrap中实现加载效果”。本文的解释简单明了，易学易懂。接下来，请跟随边肖的思路，深入其中，一起学习学习“如何在Bootstrap中达到加载效果”！

00-1010引导读取图标用于指示组件加载状态。这些阅读图标都是HTML和CSS，而不是JavaScript。它们的外观、对齐和大小可以通过公共类自定义，但是您仍然需要自定义的JavaScript来切换它们的显示状态。

这里有一个简单的阅读图标。

！doctypehtml

超文本标记语言

头

metachartset=’ utf-8 ‘

元名称=“视口”内容=“宽度=设备宽度，初始比例=1”

元名称=’关键字’内容=’

元名称=’描述’内容=’

linkhref=’./bootstrap 5/bootstrap . min . CSS“rel=”样式表

标题阅读图标/标题

/head

身体

差异

brbrbrbr

divrole=’状态’

跨度加载./span

/div

/div

/body

/html

1 简单的读取图标

边框阅读图标使用currentColor作为其边框颜色，这意味着您可以使用文本颜色的常规类别来自定义其颜色。您可以在标准阅读图标上使用常规类别中的任何颜色。

div class=’ spinner-border text-primary ‘ role=’ status ‘

spanclass=’视觉隐藏’加载./span

/div

div class=’ spinner-border text-secondary ‘ role=’ status ‘

spanclass=’视觉隐藏’加载./span

/div

div class=’ spinner-border text-success ‘角色=’status ‘

spanclass=’视觉隐藏’加载./span

/div

divclass=’spin

ner-border text-danger" role="status">
<span class="visually-hidden">Loading…</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading…</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading…</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading…</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading…</span>
</div>

3 渐变读取图示

如果你不喜欢边框读取图标，可以切换到渐变读取图标。虽然技术上来说，它不会旋转，但它会反复渐变显示！
渐变图标也支持不同的颜色。

<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>

同上，这个读取图标也使用currentColor，所以你可以轻易地使用文字颜色通用类别来改变它的外观。这边是蓝色，以及它所支持的颜色变化。

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

4 边距

使用margin utilities像m-5一样简单地增加间隔。

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

5 对齐方式

使用flexbox通用类别、float通用类别，或是文字排版在任何情况下都可以将读取图标精确地放置在您需要的位置上。

5.1 Flex

以下是居中对齐

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

靠右对齐

<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

5.2 Float

浮动实现靠右对齐

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>

5.3 文本通用类

文本通用类实现居中对齐

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

6 大小

增加spinner-border-sm和spinner-grow-sm制作一个较小的读取图标，让它可以在其他元件中快速地被使用。

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

显示较大的图标

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

7 按钮

在按钮内使用读取图标是表示当前正在处理或正在进行操作。您也可以依照需求使用button text来更换读取图标的文字。

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>

感谢各位的阅读，以上就是“Bootstrap中如何实现加载效果”的内容了，经过本文的学习后，相信大家对Bootstrap中如何实现加载效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！