bootstrap-step_bootstrap步骤step资源-CSDN文库

共6个文件

htm：2个

css：2个

js：2个

step

4星 · 超过85%的资源需积分: 41 18 浏览量 2018-05-14 11:11:59 上传评论 2 收藏 27KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap-step.zip （6个子文件）

bootstrap-step

arrow.htm 6KB

jquery.js 294B

lib.js 557B

index.htm 4KB

css

bootstrap.css 118KB

style.css 11KB

<!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title></title> </head> <body>   <div class="container"> <h5>arrow模式</h5> <ul class="nav nav-pills nav-justified step step-arrow"> <li class="active"> <a>step1</a> </li> <li> <a>step2</a> </li> <li> <a>step3</a> </li> <li> <a>step4</a> </li> <li> <a>step5</a> </li> </ul> <ul id="step-content"> <li class="step-content-item"> <div class="box"> <div class="box-header"> <h3 class="box-title">步骤1</h3> </div>  <div class="box-body"> 内容 </div>  <div class="box-footer clearfix"> <button class="btn btn-success pull-right" onclick="goStep(2)">下一步</button> </div> </div> </li> <li class="step-content-item"> <div class="box"> <div class="box-header"> <h3 class="box-title">步骤2</h3> </div>  <div class="box-body no-padding"> 内容 </div>  <div class="box-footer clearfix"> <button class="btn btn-info" onclick="goStep(1)">上一步</button> <button class="btn btn-success pull-right" onclick="goStep(3)">下一步</button> </div> </div> </li> <li class="step-content-item"> <div class="box"> <div class="box-header"> <h3 class="box-title">步骤3</h3> </div>  <div class="box-body no-padding"> 内容 </div>  <div class="box-footer clearfix"> <button class="btn btn-info" onclick="goStep(2)">上一步</button> <button class="btn btn-success pull-right" onclick="goStep(4)">下一步</button> </div> </div> </li> <li class="step-content-item"> <div class="box"> <div class="box-header"> <h3 class="box-title">步骤4</h3> </div>  <div class="box-body no-padding"> 内容 </div>  <div class="box-footer clearfix"> <button class="btn btn-info" onclick="goStep(3)">上一步</button> <button class="btn btn-success pull-right" onclick="goStep(5)">下一步</button> </div> </div> </li> <li class="step-content-item"> <div class="box"> <div class="box-header"> <h3 class="box-title">步骤5</h3> </div>  <div class="box-body no-padding"> 内容 </div>  <div class="box-footer"> <button class="btn btn-info" onclick="goStep(4)">上一步</button> <button class="btn btn-success pull-right" onclick="">完成</button> </div> </div> </li> </ul> </div> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/lib.js"></script> <script type="text/javascript"> $(document).ready(function () { goStep(1); }); function goStep(step) { bsStep(step); $(".step-content-item").hide(); $("#step-content").find("li").eq(step - 1).show(); } </script> </body></html>

评论收藏

内容反馈