Advertisement
Guest User

Untitled

a guest
Feb 26th, 2017
69
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.81 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>002-bootstrap-typography</title>
  5. <!--link bootstrap terkini untuk css-->
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  7. <!--link javascript jquery dan bootstrap-->
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <div class="container-fluid">
  13. <h1>Bootstrap Typography</h1>
  14.  
  15. <div class="row">
  16. <div class="col-sm-12">
  17. <p>Heading</p>
  18. <h1>h1 Bootstrap heading (36px)</h1>
  19. <h2>h2 Bootstrap heading (30px)</h2>
  20. <h3>h3 Bootstrap heading (24px)</h3>
  21. <h4>h4 Bootstrap heading (18px)</h4>
  22. <h5>h5 Bootstrap heading (14px)</h5>
  23. <h6>h6 Bootstrap heading (12px)</h6>
  24. <hr>
  25. </div>
  26. </div>
  27.  
  28. <div class="row">
  29. <div class="col-sm-12">
  30. <p>Penggunaan tag <code>small</code></p>
  31. <h1>h1 heading <small>secondary text</small></h1>
  32. <h2>h2 heading <small>secondary text</small></h2>
  33. <h3>h3 heading <small>secondary text</small></h3>
  34. <h4>h4 heading <small>secondary text</small></h4>
  35. <h5>h5 heading <small>secondary text</small></h5>
  36. <h6>h6 heading <small>secondary text</small></h6>
  37. <hr>
  38. </div>
  39. </div>
  40.  
  41. <div class="row">
  42. <div class="col-sm-12">
  43. <p>Penggunaan tag <code>mark</code></p>
  44. <p>Use the mark element to <mark>highlight</mark> text.</p>
  45. <hr>
  46. </div>
  47. </div>
  48.  
  49. <div class="row">
  50. <div class="col-sm-12">
  51. <p>Penggunaan tag <code>abbr</code> untuk penjelasan singkatan</p>
  52. <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
  53. <hr>
  54. </div>
  55. </div>
  56.  
  57. <div class="row">
  58. <div class="col-sm-12">
  59. <p>Penggunaan tag <code>blockquote</code></p>
  60. <blockquote>
  61. <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
  62. <footer>From WWF's website</footer>
  63. </blockquote>
  64. <hr>
  65. </div>
  66. </div>
  67.  
  68. <div class="row">
  69. <div class="col-sm-12">
  70. <p>Penggunaan class <code>.blockquote-reverse</code></p>
  71. <blockquote class="blockquote-reverse">
  72. <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
  73. <footer>From WWF's website</footer>
  74. </blockquote>
  75. <hr>
  76. </div>
  77. </div>
  78.  
  79. <div class="row">
  80. <div class="col-sm-12">
  81. <p>Penggunaan tag <code>dl</code>, untuk membuat list</p>
  82. <dl>
  83. <dt>Coffee</dt>
  84. <dd>- black hot drink</dd>
  85. <dt>Milk</dt>
  86. <dd>- white cold drink</dd>
  87. </dl>
  88. <hr>
  89. </div>
  90. </div>
  91.  
  92. <div class="row">
  93. <div class="col-sm-12">
  94. <p>Penggunaan tag <code>code</code>, untuk menandakan bahwa itu sebuah code</p>
  95. <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
  96. <hr>
  97. </div>
  98. </div>
  99.  
  100. <div class="row">
  101. <div class="col-sm-12">
  102. <p>Penggunaan tag <code>kbd</code>, untuk menandakan bahwa itu perintah input dari keyboard</p>
  103. <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
  104. <hr>
  105. </div>
  106. </div>
  107.  
  108. <div class="row">
  109. <div class="col-sm-12">
  110. <p>Penggunaan tag <code>pre</code>, untuk menampilkan multiple line code</p>
  111. <pre>
  112. Text in a pre element
  113. is displayed in a fixed-width
  114. font, and it preserves
  115. both spaces and
  116. line breaks.
  117. </pre>
  118. <hr>
  119. </div>
  120. </div>
  121.  
  122. <div class="row">
  123. <div class="col-sm-12">
  124. <p>Penggunaan class untuk memberikan warna pada teks</p>
  125. <p class="text-muted">This text is muted.</p>
  126. <p class="text-primary">This text is important.</p>
  127. <p class="text-success">This text indicates success.</p>
  128. <p class="text-info">This text represents some information.</p>
  129. <p class="text-warning">This text represents a warning.</p>
  130. <p class="text-danger">This text represents danger.</p>
  131. <hr>
  132. </div>
  133. </div>
  134.  
  135. <div class="row">
  136. <div class="col-sm-12">
  137. <p>Penggunaan class untuk memberikan background warna pada teks</p>
  138. <p class="bg-primary">This text is important.</p>
  139. <p class="bg-success">This text indicates success.</p>
  140. <p class="bg-info">This text represents some information.</p>
  141. <p class="bg-warning">This text represents a warning.</p>
  142. <p class="bg-danger">This text represents danger.</p>
  143. <hr>
  144. </div>
  145. </div>
  146. </div>
  147. </body>
  148. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement