ildar-k
2/7/2019 - 8:59 PM

BootStrap4 Basic Typography

<!-- HEADINGS -->
    <!-- pmst igale tekstielemendi saab  muuta pealkirjaks andes klassi h1-h6  -->
    <h1>Heading One</h1>
    <p class="h1">Heading One</p>
    <h2>Heading Two</h2>
    <p class="h2">Heading Two</p>
    <h3>Heading Three</h3>
    <h4>Heading Four</h4>
    <h5>Heading Five</h5>
    <h6>Heading Five</h6>
    <h6 class="h6">Heading Six</h6>

    <br>
    <br>


    <!-- DISPLAY CLASSES -->
    <!-- klass display muudab tekstielemendi suuremaks ja peenejoonseliseks  display-1-display-4-->
    <h1 class="display-1">Display 1</h1>
    <h1>Display 2</h1>
    <h1>Display 3</h1>
    <h1>Display 4</h1>

    <br>
    <br>

    <!-- PARAGRAPHS -->
    <!-- kui on vaja paragrahvi üles tõsta või märgatavaks teha, nt'ks esimest, siis anda klass "lead", mis teeb fondi suuremaks, peenemaks ning reavahe suuremaks -->
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore repellendus veniam consequatur vero numquam
      voluptatem quam ab expedita eum, ipsam? Necessitatibus dicta quaerat, vitae dolorum, dolor autem reiciendis sapiente.</p>

    <!-- LEAD -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore repellendus veniam consequatur vero numquam
      voluptatem quam ab expedita eum, ipsam? Necessitatibus dicta quaerat, vitae dolorum, dolor autem reiciendis sapiente.</p>

    <!-- MONOSPACE PARAGRAPH -->
    <!-- kui tekstil on vaja tähevahelist suurust suurendada -->
    <p class="text-monospace">My monospace paragraph</p>

    <!-- STYLE CLASSES -->
    <!-- selle asemel et kasutada tag bold ja italic saab kasutada klasse -->
    <p class="font-weight-bold">Bold Text</p>
    <p >Normal Text</p>
    <p class="font-italic">Italic Text</p>

    <!-- TEXT TRANSFORMS -->
    <p class="text-lowercase">MAKE LOWERCASE</p>
    <p class="text-uppercase">make uppercase</p>
    <p class="text-capitalize">make capitalized</p>

    <br>
    <br>

    <!-- BLOCKQUOTES -->
    <!-- teeb paksemaks ja muust tekstist eristatavamaks -->
    <blockquote class="blockquote">
      <p>This is a blockquote</p>
    </blockquote>

    <!-- BLOCKQUOTE RIGHT ALIGNED -->
    <!--joondatud paremale  -->
    <blockquote class="blockquote text-right">
      <p>This is a blockquote aligned right</p>
    </blockquote>

    <!-- BLOCKQUOTE WITH FOOTER -->
    <blockquote class="blockquote text-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <!-- blockquote footer annab ilusa kujunduse tsitaadi allikale -->
      <footer class="blockquote-footer">Someone famous in
        <cite title="Source Title">Source Title</cite>
      </footer>
    </blockquote>

    <br>
    <br>

    <!-- TEXT TRUNCATE -->
    <!-- Kui on vaja et tekstist oleks nähtav aint üks rida ntks preview's siis kasuta text-truncate -->
    <div class="text-truncate">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda repellat nobis sunt qui consequatur architecto veritatis,
      iure odit, debitis pariatur perspiciatis? Asperiores facere veniam, totam ullam dignissimos voluptate atque! Eos, animi
      quos. Sint magni nulla provident et consequatur officia tempora!
    </div>

    <br>
    <br>

    <!-- LISTS -->
    <!-- Kui on vaja esialgsest kujundusest lahti saada -->
    <ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
    </ul>

    <!-- INLINE LIST -->
    <!-- Kui list on vaja horisontaalseks saada -->
    <ul class="list-inline">
      <li class="list-inline-item">Lorem ipsum</li>
      <li class="list-inline-item">Lorem ipsum </li>
      <li class="list-inline-item">Lorem ipsum </li>
    </ul>
  </div>