Tipografi teks di Bootstrap 3 bab 2

Sebelumnya kita telah membahas sebagian dari tipografi teks di bootstrap 3. Nah sekarang kita akan melanjutkannya. Kemarin kita telah membahasnya sampai pada tag <abbr> . Yang fungsinya untuk menandai singkatan atau akronim.

Selanjutnya adalah tag :

<blockquote>

Tag ini berfungsi untuk membuat sebuah blok pada suatu pargraf. Berikut ini adalah contoh codingnya.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Belajar Bootstrap 3</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="container">
      <h1>Blockquotes</h1>
      <p>The blockquote element is used to present content from another source:</p>
      <blockquote>
        <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>
        <footer>From WWF's website</footer>
      </blockquote>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Dengan output sebagai berikut ini.

Untuk menunjukkan kutipan di sebelah kanan, gunakan .blockquote-reverse pada classnya.

<dl>

Tag ini fungsinya hampir sama seperti tag <ul></ul> . Berikut contoh codingnya.


<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

Yang outputnya adalah seperti berikut ini.

<code>

Bootstrap akan menata tag <code> HTML dengan cara berikut:


<div class="container">
  <h1>Code Snippets</h1>
  <p>Inline snippets of code should be embedded in the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>

Yang outputnya adalah seperti berikut.

<kbd>

Bootstrap akan menata tag <kbd> HTML dengan cara berikut:


<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

Dan outputnya adalah seperti ini :

<pre>

Bootstrap akan menata tag <pre> HTML dengan cara berikut:


<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

Dan Outputnya seperti berikut ini.

Warna dan Latar Belakang Kontekstual

Bootstrap juga memiliki beberapa kelas kontekstual yang dapat digunakan untuk memberikan "makna melalui warna".

Class-class untuk warna teks: .text-muted, .text-primary, .text-success, .text-info, .text-warning, dan .text-danger :


<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

Dan outputnya adalah seperti berikut ini.

Sekian untuk hari ini, terimakasih.

Tipografi teks di Bootstrap 3 bab 2