lyear_ui_step.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  6. <title>步骤 - 光年(Light Year Admin)后台管理系统模板</title>
  7. <link rel="icon" href="favicon.ico" type="image/ico">
  8. <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  9. <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  10. <meta name="author" content="yinqi">
  11. <link href="css/bootstrap.min.css" rel="stylesheet">
  12. <link href="css/materialdesignicons.min.css" rel="stylesheet">
  13. <link href="css/style.min.css" rel="stylesheet">
  14. </head>
  15. <body>
  16. <div class="container-fluid p-t-15">
  17. <div class="alert alert-info" role="alert">
  18. 实际应用中,给a标签加上 <code>data-toggle="tab"</code> ,可查看示例页面中的 表单向导。
  19. </div>
  20. <div class="row">
  21. <div class="col-lg-12">
  22. <div class="card">
  23. <div class="card-header"><h4>步骤</h4></div>
  24. <div class="card-body">
  25. <ul class="nav-step step-dots">
  26. <li class="nav-step-item active">
  27. <span>步骤一</span>
  28. <a class="active" href="#"></a>
  29. </li>
  30. <li class="nav-step-item">
  31. <span>步骤三</span>
  32. <a href="#"></a>
  33. </li>
  34. <li class="nav-step-item">
  35. <span>步骤四</span>
  36. <a href="#"></a>
  37. </li>
  38. <li class="nav-step-item">
  39. <span>步骤五</span>
  40. <a href="#"></a>
  41. </li>
  42. </ul>
  43. <ul class="nav-step step-dots">
  44. <li class="nav-step-item complete">
  45. <span>步骤一</span>
  46. <a class="active" href="#"></a>
  47. </li>
  48. <li class="nav-step-item active">
  49. <span>步骤三</span>
  50. <a href="#"></a>
  51. </li>
  52. <li class="nav-step-item">
  53. <span>步骤四</span>
  54. <a href="#"></a>
  55. </li>
  56. <li class="nav-step-item">
  57. <span>步骤五</span>
  58. <a href="#"></a>
  59. </li>
  60. </ul>
  61. <ul class="nav-step step-anchor">
  62. <li class="nav-step-item active">
  63. <a href="#step-1">
  64. <h6>步骤一</h6>
  65. <p class="m-0">步骤一说明</p>
  66. </a>
  67. </li>
  68. <li class="nav-step-item">
  69. <a href="#step-2">
  70. <h6>步骤二</h6>
  71. <p class="m-0">步骤二说明</p>
  72. </a>
  73. </li>
  74. <li class="nav-step-item">
  75. <a href="#step-3">
  76. <h6>步骤三</h6>
  77. <p class="m-0">步骤三说明</p>
  78. </a>
  79. </li>
  80. <li class="nav-step-item">
  81. <a href="#step-4">
  82. <h6>步骤四</h6>
  83. <p class="m-0">步骤四说明</p>
  84. </a>
  85. </li>
  86. </ul>
  87. <ul class="nav-step step-anchor">
  88. <li class="nav-step-item complete">
  89. <a href="#step-1">
  90. <h6>步骤一</h6>
  91. <p class="m-0">步骤一说明</p>
  92. </a>
  93. </li>
  94. <li class="nav-step-item active">
  95. <a href="#step-2">
  96. <h6>步骤二</h6>
  97. <p class="m-0">步骤二说明</p>
  98. </a>
  99. </li>
  100. <li class="nav-step-item">
  101. <a href="#step-3">
  102. <h6>步骤三</h6>
  103. <p class="m-0">步骤三说明</p>
  104. </a>
  105. </li>
  106. <li class="nav-step-item">
  107. <a href="#step-4">
  108. <h6>步骤四</h6>
  109. <p class="m-0">步骤四说明</p>
  110. </a>
  111. </li>
  112. </ul>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <!-- .row -->
  118. </div>
  119. <script type="text/javascript" src="js/jquery.min.js"></script>
  120. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  121. <script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
  122. <script type="text/javascript" src="js/main.min.js"></script>
  123. </body>
  124. </html>