<!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
https://www.jq22.com/
这个网站中有各种插件