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>
相关文章
相关标签/搜索