Bootstrap Contents / typography

- display

<div class="container">

        <h1 class="display-1 text-center">Display Headings</h1>

        <br>

        <h1 class="display-1">h1. Display heading 1</h1>

        <h1 class="display-2">h1. Display heading 2</h1>

        <h1 class="display-3">h1. Display heading 3</h1>

        <h1 class="display-4">h1. Display heading 4</h1>        

</div>

-> 같은 h1 태그지만 display의 값에 따라 크기가 달라진다. 이 클래스는 h(1~6) 태그, p 태그 모두 사용할 수 있지만 기본적으로 제공하는 태그들의 크기가 다르기 때문에 모든 태그의 display를 적용시키면 혼동할 수 있다. 때문에, 가급적 h1 태그에서만 사용하도록 권장하고 있다.

 

-lead 클래스

-> 부트스트랩에서 제공하는 p텍스트의 디자인

-> 부트스트랩에서만 있는 p텍스트 클래스

-> display 처럼 일반적인 p태그의 폰트 크기 보다 좀더 큰 글자체를 만듬

-> p태그보다 약 25% 큼

-> h5와 동일한 크기 (h5가 더 굵다.)

<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, harum.</p>

 * 위가 일반 p 태그 아래가 lead 클래스 적용한 p 태그

 

-s 태그

->취소선

 <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

 

- font-weight-bold 클래스

-> 굵게

 

- font-weight-nomal 클래스

-> 보통 굵기

 

- font-weight-light 클래스

 

- font-italic 클래스

 

<p class="font-weight-bold">Bold text.</p>

<p class="font-weight-normal">Normal weight text.</p>

<p class="font-weight-light">Light weight text.</p>

<p class="font-italic">Italic text.</p>

- blockquote 클래스 (인용문)

<div class="container">

        <h1 class="display-1 text-center">Blockquote Texts</h1>

        <br>

        <blockquote class="blockquote">

            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

        </blockquote>

 

        <br>

        <blockquote class="blockquote">

            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

            <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite>            </footer>

        </blockquote>

</div>

<style>

blockquote {

    border-left: .5rem solid red;

    padding-left: 1rem;

    font-size: 1.1rem;

}

</style>

- list

-> 전문단이나 숫자문단 개념

-> list-unstyled 클래스 : 점 표시나 , 숫자 표시를 없애주는 클래스

 <div class="container">

        <h1 class="display-1 text-center">Unstyled Lists</h1>

        <br>

        <h1>UNORDERED LISTS</h1>

        <ul class="list-unstyled">

            <li>Lorem ipsum dolor sit amet</li>

            <li>Consectetur adipiscing elit</li>

            <li>Integer molestie lorem at massa</li>

            <li>Facilisis in pretium nisl aliquet</li>

            <li>Nulla volutpat aliquam velit

                <ul>

                <li>Phasellus iaculis neque</li>

                <li>Purus sodales ultricies</li>

                <li>Vestibulum laoreet porttitor sem</li>

                <li>Ac tristique libero volutpat at</li>

                </ul>

            </li>

            <li>Faucibus porta lacus fringilla vel</li>

            <li>Aenean sit amet erat nunc</li>

            <li>Eget porttitor lorem</li>

        </ul>

        <br>

        <h1>ORDERED LISTS</h1>

        <ol class="list-nustyled">

            <li>Lorem ipsum dolor sit amet</li>

            <li>Consectetur adipiscing elit</li>

            <li>Integer molestie lorem at massa</li>

            <li>Facilisis in pretium nisl aliquet</li>

            <li>Nulla volutpat aliquam velit

                <ul>

                <li>Phasellus iaculis neque</li>

                <li>Purus sodales ultricies</li>

                <li>Vestibulum laoreet porttitor sem</li>

                <li>Ac tristique libero volutpat at</li>

                </ul>

            </li>

            <li>Faucibus porta lacus fringilla vel</li>

            <li>Aenean sit amet erat nunc</li>

            <li>Eget porttitor lorem</li>

        </ol>

    </div>