API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 10th, 2018
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Bootstrap</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <!-- Latest compiled and minified CSS -->
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  10.  
  11. <script src="js/jquery-3.3.1.min.js"></script>
  12. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  13.  
  14. <!-- Latest compiled and minified JavaScript -->
  15. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  16. <style>
  17. .box {
  18. height: 100px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="container">
  24. <h1>My First Bootstrap Page</h1>
  25. <p>I'm paragraph</p>
  26. <div class="row">
  27. <div class="col-md-4 box" style="background-color: aquamarine"></div>
  28. <div class="col-md-4 box" style="background-color: red"></div>
  29. <div class="col-md-4 box" style="background-color: green"></div>
  30. </div>
  31. <div class="row">
  32. <h2>Typhography</h2>
  33. small ==><small>Ini adalah small</small><br/>
  34. mark ==><mark>Ini adalah small</mark><br/>
  35. abbr ==><abbr>Ini adalah small</abbr><br/>
  36. blockquote ==><blockquote>Ini adalah small</blockquote><br/>
  37. dl ==><dl>Ini adalah small</dl><br/>
  38. code ==><code>Ini adalah small</code><br/>
  39. </div>
  40. <div class="row">
  41. <div class="col-md-6">
  42. <table class="table table-striped table-hover text-center">
  43. <thead>
  44. <td>Firstname</td>
  45. <td>Lastname</td>
  46. <td>Email</td>
  47. <td>Action</td>
  48. </thead>
  49. <tr>
  50. <td>Ahmad</td>
  51. <td>Zuhair</td>
  52. <td>ahmad@gmail.com</td>
  53. <td>
  54. <div class="btn-group">
  55. <a class="btn btn-xs btn-primary">
  56. <i class="fa fa-eye"></i></a>
  57. <a class="btn btn-xs btn-warning">
  58. <i class="fa fa-edit"></i></a>
  59. <a class="btn btn-xs btn-danger">
  60. <i class="fa fa-trash"></i></a>
  61. </div>
  62. </td>
  63. </tr>
  64. <tr>
  65. <td>Jhon</td>
  66. <td>Doer</td>
  67. <td>jhon.doer@gmail.com</td>
  68. <td>
  69. <div class="btn-group">
  70. <a class="btn btn-xs btn-primary">
  71. <i class="fa fa-eye"></i></a>
  72. <a class="btn btn-xs btn-warning">
  73. <i class="fa fa-edit"></i></a>
  74. <a class="btn btn-xs btn-danger">
  75. <i class="fa fa-trash"></i></a>
  76. </div>
  77. </td>
  78. </tr>
  79. <tr>
  80. <td>Susilo</td>
  81. <td>Bambang</td>
  82. <td>yudhoyono@gmail.com</td>
  83. <td>
  84. <div class="btn-group">
  85. <a class="btn btn-xs btn-primary">
  86. <i class="fa fa-eye"></i></a>
  87. <a class="btn btn-xs btn-warning">
  88. <i class="fa fa-edit"></i></a>
  89. <a class="btn btn-xs btn-danger">
  90. <i class="fa fa-trash"></i></a>
  91. </div>
  92. </td>
  93. </tr>
  94. <tfoot>
  95. <td colspan="2">Total</td>
  96. <td>3</td>
  97. </tfoot>
  98. </table>
  99. </div>
  100. <div class="col-md-6">
  101. <table class="table table-striped table-hover text-center">
  102. <thead>
  103. <td>Firstname</td>
  104. <td>Lastname</td>
  105. <td>Email</td>
  106. <td>Action</td>
  107. </thead>
  108. <tr>
  109. <td>Ahmad</td>
  110. <td>Zuhair</td>
  111. <td>ahmad@gmail.com</td>
  112. <td>
  113. <div class="btn-group">
  114. <a class="btn btn-xs btn-primary">
  115. <i class="fa fa-eye"></i></a>
  116. <a class="btn btn-xs btn-warning">
  117. <i class="fa fa-edit"></i></a>
  118. <a class="btn btn-xs btn-danger">
  119. <i class="fa fa-trash"></i></a>
  120. </div>
  121. </td>
  122. </tr>
  123. <tr>
  124. <td>Jhon</td>
  125. <td>Doer</td>
  126. <td>jhon.doer@gmail.com</td>
  127. <td>
  128. <div class="btn-group">
  129. <a class="btn btn-xs btn-primary">
  130. <i class="fa fa-eye"></i></a>
  131. <a class="btn btn-xs btn-warning">
  132. <i class="fa fa-edit"></i></a>
  133. <a class="btn btn-xs btn-danger">
  134. <i class="fa fa-trash"></i></a>
  135. </div>
  136. </td>
  137. </tr>
  138. <tr>
  139. <td>Susilo</td>
  140. <td>Bambang</td>
  141. <td>yudhoyono@gmail.com</td>
  142. <td>
  143. <div class="btn-group">
  144. <a class="btn btn-xs btn-primary">
  145. <i class="fa fa-eye"></i></a>
  146. <a class="btn btn-xs btn-warning">
  147. <i class="fa fa-edit"></i></a>
  148. <a class="btn btn-xs btn-danger">
  149. <i class="fa fa-trash"></i></a>
  150. </div>
  151. </td>
  152. </tr>
  153. <tfoot>
  154. <td colspan="2">Total</td>
  155. <td>3</td>
  156. </tfoot>
  157. </table>
  158. </div>
  159. </div>
  160.  
  161. <div class="row">
  162. <h2>Form Tambah Data Siswa</h2>
  163. <form>
  164. <div class="col-md-6">
  165. <div class="form-group">
  166. <label>Nama Depan</label>
  167. <input type="text" class="form-control" />
  168. </div>
  169. </div>
  170. <div class="col-md-6">
  171. <div class="form-group">
  172. <label>Nama Belakang</label>
  173. <input type="text" class="form-control" />
  174. </div>
  175. </div>
  176. <div class="col-md-6">
  177. <div class="form-group">
  178. <label>Gender</label>
  179. <input type="radio" name="gender"
  180. value="Pria"/>&nbsp;Pria
  181. <input type="radio" name="gender"
  182. value="Wanita"/>&nbsp;Wanita
  183. </div>
  184. </div>
  185. <div class="col-md-6">
  186. <div class="form-group">
  187. <label>Jenjang</label>
  188. <select class="form-control">
  189. <option>TK</option>
  190. <option>SD</option>
  191. <option>SMP</option>
  192. <option>SMA</option>
  193. </select>
  194. </div>
  195. </div>
  196. <div class="col-md-6">
  197. <div class="form-group">
  198. <label>Hobi</label>
  199. <div class="checkbox">
  200. <label><input type="checkbox"
  201. value="">Membaca</label>
  202. </div>
  203. <div class="checkbox">
  204. <label><input type="checkbox"
  205. value="">Menulis</label>
  206. </div>
  207. <div class="checkbox">
  208. <label><input type="checkbox"
  209. value="">Menggambar</label>
  210. </div>
  211. </div>
  212. </div>
  213. </form>
  214. </div>
  215. </div>
  216. </body>
  217. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!