jasny.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <th:block th:include="include :: header('功能扩展')" />
  5. <th:block th:include="include :: jasny-bootstrap-css" />
  6. </head>
  7. <body class="gray-bg">
  8. <div class="wrapper wrapper-content animated fadeInRight">
  9. <div class="row">
  10. <div class="col-sm-6">
  11. <div class="ibox float-e-margins">
  12. <div class="ibox-title">
  13. <h5>文件上传控件 <small>https://github.com/jasny/bootstrap</small></h5>
  14. </div>
  15. <div class="ibox-content">
  16. <div class="form-group">
  17. <label class="font-noraml">输入组示例</label>
  18. <div class="fileinput fileinput-new input-group" data-provides="fileinput">
  19. <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
  20. <span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file"></span>
  21. <a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
  22. </div>
  23. </div>
  24. <div class="form-group">
  25. <label class="font-noraml">按钮示例</label>
  26. <br/>
  27. <div class="fileinput fileinput-new" data-provides="fileinput">
  28. <span class="btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file" name="..."></span>
  29. <span class="fileinput-filename"></span>
  30. <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
  31. </div>
  32. </div>
  33. <div class="form-group">
  34. <label class="font-noraml">图片上传示例</label>
  35. <br/>
  36. <div class="fileinput fileinput-new" data-provides="fileinput">
  37. <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  38. <div>
  39. <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
  40. <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="form-group">
  45. <label class="font-noraml">图片预览示例</label>
  46. <br/>
  47. <div class="fileinput fileinput-new" data-provides="fileinput">
  48. <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
  49. <img th:src="@{/img/profile.jpg}">
  50. </div>
  51. <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
  52. <div>
  53. <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
  54. <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
  55. </div>
  56. </div>
  57. </div>
  58. <hr>
  59. <div class="form-group">
  60. <label class="font-noraml">相关参数详细信息</label>
  61. <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jasny-bootstrap</a></div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="col-sm-6">
  67. <div class="ibox float-e-margins">
  68. <div class="ibox-title">
  69. <h5>固定格式文本 <small>https://github.com/jasny/bootstrap</small></h5>
  70. </div>
  71. <div class="ibox-content">
  72. <div class="form-group">
  73. <label class="font-noraml">手机号码格式</label>
  74. <input type="text" class="form-control" data-mask="999-9999-9999" placeholder="请输入手机号码">
  75. <span class="help-block">158-8888-88888</span>
  76. </div>
  77. <div class="form-group">
  78. <label class="font-noraml">电话号码格式</label>
  79. <input type="text" class="form-control" data-mask="9999-9999999" placeholder="请输入电话号码">
  80. <span class="help-block">0730-8888888</span>
  81. </div>
  82. <div class="form-group">
  83. <label class="font-noraml">日期格式</label>
  84. <input type="text" class="form-control" data-mask="9999-99-99" placeholder="请输入日期格式">
  85. <span class="help-block">yyyy-mm-dd</span>
  86. </div>
  87. <div class="form-group">
  88. <label class="font-noraml">IPV4格式</label>
  89. <input type="text" class="form-control" data-mask="999.999.999.999" placeholder="请输入IP地址">
  90. <span class="help-block">192.168.100.200</span>
  91. </div>
  92. <div class="form-group">
  93. <label class="font-noraml">税务代码格式</label>
  94. <input type="text" class="form-control" data-mask="99-9999999" placeholder="请输入税务代码">
  95. <span class="help-block">99-9999999</span>
  96. </div>
  97. <hr>
  98. <div class="form-group">
  99. <label class="font-noraml">相关参数详细信息</label>
  100. <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jasny-bootstrap</a></div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <th:block th:include="include :: footer" />
  108. <th:block th:include="include :: jasny-bootstrap-js" />
  109. </body>
  110. </html>