在Bootstrap中,您可以使用内置的spinner组件来表示加载或处理状态
- 首先,确保已将Bootstrap CSS和JavaScript文件添加到项目中。在
部分中包含以下链接:
- 若要创建一个基本的spinner,只需在HTML中添加以下代码:
Loading...
这将显示一个默认大小且具有边框样式的spinner。
- 若要更改spinner的大小,可以添加
.spinner-border-sm
类来获得一个较小的spinner,或者在.spinner-border
之后添加.spinner-border-lg
类来获得一个较大的spinner。
例如:
Loading...Loading...
- 若要更改spinner的颜色,请为
.spinner-border
元素添加text-{color}
类,其中{color}
是Bootstrap支持的颜色名称(如primary
、secondary
、success
等)。
例如:
Loading...
- 若要创建一个带有文本的growing型spinner,请将
.spinner-grow
类与.spinner-grow-sm
或.spinner-grow-lg
类结合使用。
例如:
Loading...Loading...
现在,您应该已经成功地在Bootstrap项目中实现了spinner组件。根据需要自定义颜色、大小和类型,以适应您的设计。