<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>无标题文档</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="demo01.css">
<script type="application/javascript" src="jquery.js"></script>
<script type="application/javascript" src="bootstrap.js"></script>
<script type="application/javascript" src="demo01.js"></script>
</head>

<body>
    <div class="container-fluid">
         <div class="row">
              
              <table class="table table-striped table-bordered table-hover">
                  <tr>
                      <td>第一行第一列</td>
                      <td>第一行第二列</td>
                  </tr>
                  <tr>
                      <td>第二行第一列</td>
                      <td>第二行第二列</td>
                  </tr>
                  <tr>
                      <td>第三行第一列</td>
                      <td>第三行第二列</td>
                  </tr>
            </table>
              <div class="col-md-6 d2">
                  <div class="progress">
                      <div id="process" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                        <span class="sr-only">40% Complete (success)</span>
                      </div>
                </div>
                  
              </div>
        </div>
    </div>
</body>
</html>
/* CSS Document */
.d1{
    background: red;
    height: 500px;
}
.d2{
    background: pink;
    height: 600px;
}
// JavaScript Document
$(function(){
    var index=0;
    var timer=setInterval(function(){
        $("#process").css("width",index+"%");
        index++;
        if(index>100){
            clearInterval(timer);
        }
    },100);
})

引入bootstrap.css和bootstrap.js

JS学习9.7_javascript

 

 https://www.jq22.com/

这个网站中有各种插件