bs.html 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5. <title>Interactive notebook</title>
  6. <link href="css/mditor.min.css" rel="stylesheet">
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
  8. integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  9. <style>
  10. .container {
  11. margin: 45px auto;
  12. max-width: 880px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="container">
  18. <form>
  19. <div class="form-group">
  20. <label for="exampleInputEmail1">Label</label>
  21. <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
  22. placeholder="placeholder" list="team_list">
  23. <datalist id="team_list">
  24. <option>Detroit Lions</option>
  25. <option>Detroit Pistons</option>
  26. <option>Detroit Red Wings</option>
  27. <option>Detroit Tigers</option>
  28. </datalist>
  29. <div class="invalid-feedback">invalid-feedback.</div> <!-- input 添加 is-invalid 类 -->
  30. <div class="valid-feedback">valid-feedback!</div> <!-- input 添加 is-valid 类 -->
  31. <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  32. </div>
  33. <div class="form-group">
  34. <label for="exampleInputPassword1">Password</label>
  35. <input type="password" class="form-control" id="exampleInputPassword1">
  36. </div>
  37. <div class="form-group form-check">
  38. <input type="checkbox" class="form-check-input" id="exampleCheck1">
  39. <label class="form-check-label" for="exampleCheck1">Check me out</label>
  40. </div>
  41. <button type="submit" class="btn btn-primary">Submit</button>
  42. </form>
  43. <hr>
  44. <form>
  45. <div class="form-group">
  46. <label for="exampleInputPassword2">Input</label>
  47. <input type="password" class="form-control" id="exampleInputPassword2">
  48. </div>
  49. <div class="form-group">
  50. <label for="exampleFormControlSelect1">Select</label>
  51. <select class="form-control" id="exampleFormControlSelect1">
  52. <option>1</option>
  53. <option>2</option>
  54. <option>3</option>
  55. <option>4</option>
  56. <option>5</option>
  57. </select>
  58. </div>
  59. <div class="form-group">
  60. <label for="customFile">Upload file</label>
  61. <div class="custom-file">
  62. <input type="file" class="custom-file-input" id="customFile">
  63. <label class="custom-file-label" for="customFile">Choose file</label>
  64. </div>
  65. <div class="invalid-feedback">invalid-feedback.</div> <!-- input 添加 is-invalid 类 -->
  66. <div class="valid-feedback">valid-feedback!</div> <!-- input 添加 is-valid 类 -->
  67. <small class="form-text text-muted">We'll never share your email with anyone else.</small>
  68. </div>
  69. <div class="form-group">
  70. <label for="formControlRange">Example Range input</label>
  71. <input type="range" class="form-control-range" id="formControlRange">
  72. </div>
  73. <div class="form-group">
  74. <label for="exampleFormControlSelect2">Multiple select</label>
  75. <select multiple class="form-control" id="exampleFormControlSelect2">
  76. <option>1</option>
  77. <option>2</option>
  78. <option>3</option>
  79. <option>4</option>
  80. <option>5</option>
  81. </select>
  82. </div>
  83. <div class="form-group">
  84. <label for="exampleFormControlTextarea1">Textarea</label>
  85. <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  86. </div>
  87. <div class="form-group form-check">
  88. <input type="checkbox" class="form-check-input" id="exampleCheck2">
  89. <label class="form-check-label" for="exampleCheck2">Check me out</label>
  90. </div>
  91. <div class="form-group">
  92. <label>Radio</label>
  93. <div class="form-check">
  94. <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"
  95. checked>
  96. <label class="form-check-label" for="exampleRadios1">
  97. Option one is this and that—be sure to include why it's great
  98. </label>
  99. </div>
  100. <div class="form-check">
  101. <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  102. <label class="form-check-label" for="exampleRadios2">
  103. Option two can be something else and selecting it will deselect option one
  104. </label>
  105. </div>
  106. </div>
  107. <div class="form-group">
  108. <label>Radio inline</label> <br>
  109. <div class="form-check form-check-inline">
  110. <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"
  111. checked>
  112. <label class="form-check-label" for="exampleRadios1">
  113. Option one
  114. </label>
  115. </div>
  116. <div class="form-check form-check-inline">
  117. <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  118. <label class="form-check-label" for="exampleRadios2">
  119. Option two
  120. </label>
  121. </div>
  122. </div>
  123. <div class="form-group">
  124. <label>Checkout</label>
  125. <div class="form-check">
  126. <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  127. <label class="form-check-label" for="defaultCheck1">
  128. Option one is this and that—be sure to include why it's great
  129. </label>
  130. </div>
  131. <div class="form-check">
  132. <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
  133. <label class="form-check-label" for="defaultCheck2">
  134. Option two is disabled
  135. </label>
  136. </div>
  137. </div>
  138. <div class="form-group">
  139. <label>Checkout inline</label> <br>
  140. <div class="form-check form-check-inline">
  141. <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  142. <label class="form-check-label" for="defaultCheck1">
  143. Option one
  144. </label>
  145. </div>
  146. <div class="form-check form-check-inline">
  147. <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
  148. <label class="form-check-label" for="defaultCheck2">
  149. Option two
  150. </label>
  151. </div>
  152. </div>
  153. <button type="submit" class="btn btn-primary">Submit</button>
  154. </form>
  155. <hr>
  156. <form>
  157. <div class="form-row">
  158. <div class="form-group col-md-6">
  159. <label for="inputEmail4">Email</label>
  160. <input type="email" class="form-control" id="inputEmail4">
  161. </div>
  162. <div class="form-group col-md-6">
  163. <label for="inputPassword4">Password</label>
  164. <input type="password" class="form-control" id="inputPassword4">
  165. </div>
  166. </div>
  167. <div class="form-group">
  168. <label for="inputAddress">Address</label>
  169. <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  170. </div>
  171. <div class="form-group">
  172. <label for="inputAddress2">Address 2</label>
  173. <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  174. </div>
  175. <div class="form-row">
  176. <div class="form-group col-md-6">
  177. <label for="inputCity">City</label>
  178. <input type="text" class="form-control" id="inputCity">
  179. </div>
  180. <div class="form-group col-md-4">
  181. <label for="inputState">State</label>
  182. <select id="inputState" class="form-control">
  183. <option selected>Choose...</option>
  184. <option>...</option>
  185. </select>
  186. </div>
  187. <div class="form-group col-md-2">
  188. <label for="inputZip">Zip</label>
  189. <input type="text" class="form-control" id="inputZip">
  190. </div>
  191. </div>
  192. <div class="form-group">
  193. <div class="form-check">
  194. <input class="form-check-input" type="checkbox" id="gridCheck">
  195. <label class="form-check-label" for="gridCheck">
  196. Check me out
  197. </label>
  198. </div>
  199. </div>
  200. <button type="submit" class="btn btn-primary">Sign in</button>
  201. </form>
  202. </div>
  203. <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
  204. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  205. integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  206. crossorigin="anonymous"></script>
  207. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
  208. integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  209. crossorigin="anonymous"></script>
  210. </body>
  211. </html>