bootstrap使用

最新推荐文章于 2021-07-26 15:25:41 发布

原创最新推荐文章于 2021-07-26 15:25:41 发布 · 590 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

前言

　　库房第二版开始了。本着更高更快更强的精神，决定使用外观更好看、功能更强、兼容更好的bootstrap。
正文

　　1、下载bootstrap Bootstrap3（V3.3.7）

　　2、解压有三个文件夹

　　3、新建html网页文件，与解压后的bootstrap文件夹放在同一目录。

这里写图片描述

　　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() {
            // $(this).button('reset');
            // $(this).dequeue(); 
            });
        });
    });  
</script>
</body>
</html>