Question

我查看了所有文档，但仍无法找到示例。我想做的是在进行Ajax调用时在我的页面中显示一个等待图标。有人可以告诉我如何使用twitter bootstrap来做到这一点。

此外，如果有更好的其他非jquery实现，我也想了解这些。

谢谢。

Answer 1

从font-awesome中选择一个loading icon （gif） for bootstrap，

在ajax调用之前显示
在ajax响应发布后隐藏

要将图标置于屏幕中间，请使用以下css

.ajaxLoader {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

另请查看button loading images
JSFiddle

Answer 2

如果你想要死中心，你可以使用绝对位置技术。

要做到这一点，创建一个div并给它们这些属性：

margin:auto;
position:absolute;
top:0;left:0;bottom:0;right:0;
width:<however wide the image is>;
height:<however big the image is>;

无论何时有人调整屏幕大小，使其在手机和台式机上都能正常工作（只要图像不大），这就会让它在中心发挥作用。

如果您希望在其他div中使用此功能，请确保父级为position:relative;

Answer 3

您可以添加带有等待徽标的bootstrapmodal
解开theclose事件，
并在您的ajax呼叫结束时关闭模式...

如何使用twitter bootstrap 3在页面中间显示等待图标？

3 个答案: