Bootstrap为我们提供了各种类,用于创建不同样式的微调器以指示加载状态。我们还可以使用Bootstrap提供的类来修改微调器的外观,大小和位置。
- 带有边框微调器的按钮:通过使用标记内的spinner-border类,我们可以将边框微调器放置在按钮内,该类又嵌套在具有Bootstrap Button类的
- 带有旋转微调器的按钮:通过使用标记内的spinner-grow类,我们可以将增长的微调器放置在按钮内,该类又嵌套在具有Bootstrap Button类的
标记内,如下所示。 Bootstrap | Spinner GeeksForGeeks
Loading Processing... 注意:我们已在
标记中放置了“ disabled”属性以将其禁用,并在标记中使用了“ role”和“ aria-hidden”属性以实现可访问性。 输出:
改变大小
- 使用类:我们可以分别使用spinner-border-sm和spinner-grow-sm类以及spinner-border和spinner-grow类来减小Spinner,如下所示。
Bootstrap | Spinner GeeksForGeeks
LoadingLoading输出:
- 使用CSS:我们还可以使用CSS样式来更改微调框的大小,如下所示。
Bootstrap | Spinner GeeksForGeeks
LoadingLoading输出:
更改对齐方式
- 使用文本对齐实用程序:我们可以通过将微调框的对齐方式放在标记中来更改对齐方式,该标签使用文本对齐实用程序类来控制子元素的对齐,如下所示。
Bootstrap | Spinner GeeksForGeeks
Loading输出:
- 使用浮动实用程序:我们可以通过将微调框的对齐方式放在
标记中来更改对齐方式,该标记使用float实用程序类来控制子元素的对齐方式,或者直接在标记内使用float实用程序类,通过该标记可创建微调框。在下面给出。Bootstrap | Spinner GeeksForGeeks
Loading输出:
- 使用flexbox实用程序:我们可以通过将微调器的对齐方式放在
标记中来更改对齐方式,该标记使用flexbox实用程序类来控制子元素的对齐方式,如下所示。Bootstrap | Spinner GeeksForGeeks
Loading输出:
- 使用浮动实用程序:我们可以通过将微调框的对齐方式放在