Bootstrap 5 텍스트/형식
- 이전 페이지 BS5 그리드 기본
- 다음 페이지 BS5 색상
Bootstrap 5 默认设置
Bootstrap 5 默认 font-size 为 1rem（默认为 16px），line-height 为 1.5。
此外，所有 <p> 元素都设置了 margin-top: 0 <mark> margin-bottom: 1rem （默认为 16px）。
<h1> - <h6>
Bootstrap 5 把 HTML 标题（<h1> 到 <h6>）的样式设置为有更粗的 font-weight 以及响应式的 font-size。
예제
如果需要，您还可以在其他元素上使用 .h1 到 .h6 类，使它们表现为标题：
예제
<p class="h1">h1 Bootstrap heading</p> <p class="h2">h2 Bootstrap heading</p> <p class="h3">h3 Bootstrap heading</p> <p class="h4">h4 Bootstrap heading</p> <p class="h5">h5 Bootstrap heading</p> <p class="h6">h6 Bootstrap heading</p>
display 标题
display 标题用于比普通标题更突出（更大的 font-size 和更细的 font-weight），有六个类可供选择：.display-1 到 .display-6：
예제
Bootstrap 5는 노란 배경색과 일부 내간격을 사용하여 설정합니다.
Bootstrap 5 将使用黄色背景颜色和一些内边距来设置 Bootstrap 5는 노란 배경색과 일부 내간격을 사용하여 설정합니다. <mark> 와 .mark
예제
<blockquote>
다른 출처의 내용 블록을 인용할 때는 다음과 같이 설정하세요: .blockquote 클래스를 추가하여 <blockquote>예를 들어, '세계 자연 기금의 웹사이트에서 가져온 것'과 같이 이름을 지을 때는 다음과 같이 사용하세요: .blockquote-footer 클래스:
예제
추가 레이아웃 클래스
아래의 Bootstrap 5 클래스는 HTML 요소의 스타일에 추가할 수 있습니다:
| 클래스 | 설명 | 예제 |
|---|---|---|
.lead |
단락을 강조합니다. | 시도해보세요 |
.text-left |
텍스트를 왼쪽 정렬합니다. | 시도해보세요 |
.text-break |
긴 텍스트가 레이아웃을 파괴하지 않도록 방지합니다. | 시도해보세요 |
.text-center |
가운데 정렬된 텍스트를 정의합니다. | 시도해보세요 |
.text-decoration-none |
링크의 밑줄을 제거합니다. | 시도해보세요 |
.text-end |
텍스트를 오른쪽 정렬합니다. | 시도해보세요 |
.text-nowrap |
텍스트를 줄바꿈하지 않도록 정의합니다. | 시도해보세요 |
.text-lowercase |
소문자 텍스트를 정의합니다. | 시도해보세요 |
.text-uppercase |
대문자 텍스트를 정의합니다. | 시도해보세요 |
.text-capitalize |
대문자 텍스트를 정의합니다. | 시도해보세요 |
.initialism |
<abbr> 요소 내의 텍스트를 조금 작은 글씨로 표시합니다. | 시도해보세요 |
.list-unstyled |
목록 항목의 기본 list-style 및 왼쪽 외곽 간격을 제거합니다(ul 및 ol에 적용됩니다). 이 스타일은 직접 자식 목록 항목에만 적용됩니다. 또한, 모든 들여쓰기 목록에서 기본 목록 스타일을 제거하려면 이 스타일을 들여쓰기 목록에도 적용하세요. |
시도해보세요 |
.list-inline |
모든 목록 항목을 한 줄에 배치합니다. 각 <li> 요소에 대해 .list-inline-item과 함께 사용하세요. |
시도해보세요 |
- 이전 페이지 BS5 그리드 기본
- 다음 페이지 BS5 색상
