타이포그래피

소스코드는 해당 예제에 마우스 포인트를 갖다대면 버튼이 나타나며, 클릭하면 소스코드를 볼 수 있습니다.

제목

모든 HTML 제목인, <h1> 부터 <h6> 까지 사용가능합니다. 당신의 텍스트를 인라인으로 표시되면서 스타일만 제목 스타일로 맞추기 위해 .h1 부터 .h6 클래스 또한 사용 가능합니다.

예제

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

h1. Heading 1 Secondary text

h2. Heading 2 Secondary text

h3. Heading 3 Secondary text

h4. Heading 4 Secondary text

h5. Heading 5 Secondary text

h6. Heading 6 Secondary text

리드 문단

.lead 을 추가하여 문장을 눈에 띄도록 만드세요.

예제

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

표시된 텍스트

또다른 맥락에서 관련있는 텍스트들을 찾아내어 강조하기 위해, <mark> 태그를 사용하세요.

예제

당신은 강조할 텍스트에 mark 태그를 사용할 수 있습니다.

삭제된 텍스트

텍스트 블록이 삭제 되었음을 나타내기 위해서는 <del> 태그를 사용하세요.

예제

~~이 텍스트줄은 삭제된 텍스트로 다뤄짐을 의미합니다.~~

취소선 텍스트

텍스트 블록이 더 이상상 연관이 없음을 나타내기 위해서 <s> 태그를 사용하세요.

예제

                    이 텍스트줄은 더 이상 정확하지 않다고 다뤄짐을 의미합니다.
                

삽입된 텍스트

문서에 추가됨을 나타내기 위해서 <ins> 태그를 사용하세요.

예제

이 텍스트줄은 문서에 추가분으로 다뤄짐을 의미합니다.

밑줄친 텍스트

텍스트에 밑출을 치려면 <u> 태그를 사용하세요.

예제

이 텍스트줄은 밑줄이 그어질것입니다

작은 텍스트

텍스트 인라인이나 블록을 덜 강조하기 위해, 부모 태그보다 85% 의 크기로 보여지게 하는 <small> 태그를 사용하세요. 제목 요소는 내포된 <small> 요소를 위한 그들만의 font-size 를 가지고 있습니다.

당신은 <small> 대신 인라인 요소에 .small 을 사용할 수 있습니다.

예제

이 텍스트는 작게 보이도록 되어 있습니다.

두껍게

폰트 두께를 두껍게 하여 텍스트를 강조합니다.

예제

다음의 텍스트는 두꺼운 텍스트로 렌더링 됩니다.

이탤릭

이탤릭으로 텍스트를 강조합니다.

예제

다음의 텍스트는 이탤릭체로 렌더링 됩니다.

정렬 클래스

정렬 클래스로 콤포넌트의 텍스트를 손쉽게 재정렬하세요.

예제

좌측정렬된 텍스트.

중앙정렬된 텍스트.

우측정렬된 텍스트.

양쪽정렬된 텍스트.

그냥 텍스트.

변형 클래스

콤포넌트의 텍스트를 대소문자 클래스로 변형시킵니다. (한글은 해당사항이 없습니다.)

예제

Lowercased text.

Uppercased text.

Capitalized text.

약어

<abbr> 는 약어나 두문자어를 마우스를 올렸을 때 원래 텍스트를 보여주기 위한 요소입니다. title 속성이 있는 약어는 점으로된 밑줄을 가지고 있고 마우스를 올렸을때 물음표 커서가 보여지며, 원래 텍스트를 보여줍니다.

예제

An abbreviation of the word attribute is attr.

인용구

당신의 문서안에 다른 출처로부터 인용한 콘텐츠 블록을 위해 사용합니다.

인용구 HTML 을 <blockquote> 로 감싸세요. 직접 인용구를 위해서, 우리는 <p> 태그를 추천합니다.

예제

Donec id elit non mi porta gravida at eget metus.

출처를 알수 있게 <footer> 태그를 추가하세요. 출처 원천의 이름은 <cite> 로 감싸주세요.

예제

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Someone famous in Source Title

오른쪽 정렬된 인용구를 위해서 .blockquote-reverse 를 추가하세요.

예제

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Someone famous in Source Title

라인 색상별 예제입니다. 위 인용구 예제들과 조합하여 사용할수 있습니다.

예제

Donec id elit non mi porta gravida at eget metus.

박스형 컬러 종류별 예제입니다. 위 예제들과 조합하여 사용할수 없습니다.

예제

Donec id elit non mi porta gravida at eget metus.

설명

연관된 설명들의 목록입니다.

예제

                    
                        Description 1
                        Nullam non wisi a sem semper eleifend. Donec mattis.
                        Description 2
                        Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.
                        Aenean lectus lorem, imperdiet at, ultrices eget, ornare et.
                        Description 3
                        Pellentesque adipiscing purus ac magna.
                    
                

수평설명 - <dl> 내 용어들과 설명들을 나란히 놓습니다. 기본 <dl> 처럼 쌓이는 것부터 시작이지만, 네비게이션 바가 펼쳐지는 때와 같은 타이밍에 다음과 같이 됩니다.

예제

                    
                        Description 1
                        Nullam non wisi a sem semper eleifend. Donec mattis.
                        Description 2
                        Duis pretium velit ac mauris.
                        Proin eu wisi suscipit nulla suscipit interdum.
                        Description 3
                        Pellentesque adipiscing purus ac magna.
                        Description 4
                        Mauris a dolor. Nulla facilisi.
                    
                

순서없는 - 순서가 명확치 않은 항목들의 목록입니다.

예제

                            Nullam non wisi a sem semper
Semper eleifend. Donec mattis
Duis pretium velit ac mauris
                                    Proin eu wisi suscipit
Nulla suscipit interdum
Pellentesque adipiscing purus
Adipiscing purus ac magna

                                
Mauris a dolor nulla facilis

                        

순서있는 - 순서가 명확한 항목들의 목록입니다.

예제

                            Nullam non wisi a sem semper
Semper eleifend. Donec mattis
Duis pretium velit ac mauris
                                    Proin eu wisi suscipit
Nulla suscipit interdum
Pellentesque adipiscing purus
Adipiscing purus ac magna

                                
Mauris a dolor nulla facilis

                        

스타일 없는 - 항목에서 list-style 과 좌측 마진을 제거하세요. (직접 자식만) 이것은 오직 바로 아래 항목들에게만 적용됩니다. 그래서 당신은 중첩된 목록에도 따로 클래스를 추가하여야 합니다.

예제

                            Nullam non wisi a sem semper
Semper eleifend. Donec mattis
Duis pretium velit ac mauris
                                    Proin eu wisi suscipit
Nulla suscipit interdum
Pellentesque adipiscing purus
Adipiscing purus ac magna

                                
Mauris a dolor nulla facilis

                        

인라인 - display: inline-block; 로 항목들을 한줄에 보여주고 약간의 패딩을 줍니다.

예제

1. Home
2. About
3. Services
4. Blog
5. Contacts

텍스트 컬러

텍스트 컬러는 감싸고 있는 태그에 .color-색상 클래스를 추가하세요.

지정된 색상 종류 - grey, dark, red, blue, green, yellow, purple, brown, orange, indigo, teal, pink

예제

Donec ullamcorper nulla non metus auctor fringilla.

Vestibulum id ligula porta felis euismod semper.

Duis mollis, est non commodo luctus, nisi erat porttitor.

Maecenas faucibus mollis interdum.

Donec sed odio dui.

Fusce dapibus, tellus ac cursus commodo, tortor mauris.

Ipsum Magna Fermentum.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Sed posuere consectetur est at lobortis.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Sed posuere consectetur est at lobortis.

Cras mattis consectetur purus sit amet fermentum.

텍스트 언더라인

텍스트 언더라인은 해당 텍스트를 감싸고 있는 태그에 .text-underline-색상 클래스를 추가하세요.

지정된 색상 종류 - grey, dark, red, blue, green, yellow, purple, brown, orange, indigo, teal, pink

예제

Donec ullamcorper nulla non metus auctor fringilla.

Vestibulum id ligula porta felis euismod semper.

Duis mollis, est non commodo luctus, nisi erat porttitor.

Maecenas faucibus mollis interdum.

Donec sed odio dui.

Fusce dapibus, tellus ac cursus commodo, tortor mauris.

Ipsum Magna Fermentum.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Sed posuere consectetur est at lobortis.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Sed posuere consectetur est at lobortis.

Cras mattis consectetur purus sit amet fermentum.

텍스트 하이라이트

텍스트 하이라이트는 해당 텍스트를 감싸고 있는 태그에 .text-hl .text-hl-색상 클래스를 추가하세요.
.rounded .rounded-2x .rounded-3x 를 추가하여 라운드 처리를 할수 있습니다.

지정된 색상 종류 - grey, dark, red, blue, green, yellow, purple, brown, orange, indigo, teal, pink

예제

Aenean lorem text-hl text-hl-light sit malesuada.

Bibendum text-hl text-hl-dark magna dapibus condimentum.

Mollis Ornare fringilla text-hl text-hl-red rounded ipsum.

Mattis euismod text-hl text-hl-blue rounded-2x tortor justo.

Justo text-hl text-hl-green rounded-3x fusce vehicula mattis.

Elit vehicula parturient text-hl text-hl-yellow rounded-3x porta.

Aenean lorem text-hl text-hl-purple sit malesuada.

Bibendum text-hl text-hl-brown magna dapibus condimentum.

Mollis Ornare fringilla text-hl text-hl-orange rounded ipsum.

Mattis euismod text-hl text-hl-indigo rounded-2x tortor justo.

Justo text-hl text-hl-teal rounded-3x fusce vehicula mattis.

Elit vehicula parturient text-hl text-hl-pink rounded-3x porta.

텍스트 백그라운드

예제

bg-primary

bg-info

bg-success

bg-warning

bg-danger

Default

rounded

rounded-2x

rounded-3x

rounded-4x

경보 (알림)

예제

alert-primary

alert-info

alert-success

alert-warning

alert-danger

툴팁

예제

팝오버

예제

헤드라인 1

예제

Headline h1

Headline h2

Headline h3

Headline h4

Headline h5

Headline h6

헤드라인 2

예제

Headline h1

Headline h2

Headline h3

Headline h4

Headline h5