1、下载bootstrap Bootstrap3(V3.3.7)
2、解压 有三个文件夹
3、新建html网页文件,与解压后的bootstrap文件夹放在同一目录。
![这里写图片描述](https://img-blog.csdn.net/20171218201326989?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdqaWFoYW83NTIx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
4、引用相关文件。注意修改路径。
<link rel="stylesheet" href="F:\桌面\test/css/bootstrap.min.css">
<script src="F:\桌面\test/js/jquery.min.js"></script>
<script src="F:\桌面\test/js/bootstrap.min.js"></script>
5、创建控件,引用bootstrap的class,根据情况添加data属性
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." style=""
type="button"> 加载状态
</button>
6、根据需要更改样式,例如:style=“width:500px”
7、整体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 按钮(Button)插件加载状态</title>
<link rel="stylesheet" href="F:\桌面\test/css/bootstrap.min.css">
<script src="F:\桌面\test/js/jquery.min.js"></script>
<script src="F:\桌面\test/js/bootstrap.min.js"></script>
</head>
<body>
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." style="width:500px"
type="button"> 加载状态
</button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
});
});
});
</script>
</body>
</html>