Bootstrap 레이아웃(텍스트 스타일)_javascript 기술 사용 방법에 대한 종합 분석

1. 단락

문단은 타이포그래피의 또 다른 중요한 요소입니다. Bootstrap에서 텍스트에 대한 전역 텍스트 스타일을 설정합니다(여기서의 텍스트는 본문 텍스트를 나타냄).

1. 전체 텍스트 글꼴 크기는 14px(글꼴 크기)입니다.

2. 행 높이는 1.42857143(line-height)으로 약 20px입니다(소수점 계열을 보면 헷갈릴 수 있습니다. 실제로는 LESS 컴파일러를 통해 계산됩니다. 물론 Sass에도 있습니다. 그런 기능).

3. 색상은 다크 그레이(#333)

2. 텍스트 스타일

실제 프로젝트에서는 일부 중요한 텍스트의 경우 강조하고 싶은 부분이 다양한 스타일로 처리됩니다. 부트스트랩은 또한 이 부분에 대해 가벼운 처리를 수행합니다.

단락 p를 강조 표시하려면 클래스 이름 ".lead"를 추가하면 됩니다. 해당 기능은 텍스트 글꼴 크기를 늘리고 텍스트를 굵게 표시하며 그에 따라 줄 높이와 여백을 처리하는 것입니다. .

1. 굵게: Bootstrap에서는 a4b561c25d9afb9ac8dc4d70affff419 및 8e99a69fbe029cd4e2b854e244eab143 태그를 사용하여 텍스트를 직접 굵게 만들 수 있습니다.

2. 기울임꼴: Bootstrap에서는 907fae80ddef53131f3292ee4f81644b 또는 5a8028ccc7a7e27417bff9f05adf5932을 사용하여 기울임꼴을 적용할 수 있습니다.

3. 강조 카테고리

.text-muted: 힌트, 밝은 회색(#999)을 사용하세요
.text-primary: 기본, 파란색 사용(#428bca)
.text-success: 성공, 연한 녹색 사용(#3c763d)
.text-info: 알림 정보, 하늘색 사용(#31708f)
.text-warning: 경고, 노란색(#8a6d3b)을 사용하세요
.text-danger: 위험합니다. 갈색을 사용하세요(#a94442)

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

효과는 다음과 같습니다.

4. 텍스트 정렬

조판에서는 텍스트 정렬이 필수입니다. Text-align은 CSS에서 텍스트 정렬 스타일을 설정하는 데 자주 사용됩니다. 네 가지 주요 스타일이 있습니다:

✓ 왼쪽 정렬, 가 왼쪽 값을 취함

✓ 중앙 정렬, 가 가치 중심

✓ 오른쪽 정렬, 가 올바른 값을 취함

✓ 양쪽 끝을 정렬하고, 은 justify

값을 취합니다.

작업을 단순화하고 사용을 용이하게 하기 위해 Bootstrap은 텍스트 정렬 스타일을 제어하기 위해 부터 까지 4개의 클래스 이름을 정의합니다.

✓ .text-left：왼쪽 정렬

✓ .text-center：가운데 정렬

✓ .text-right: 오른쪽 정렬

✓ .text-justify：양쪽 끝 정렬

텍스트 스타일을 사용하면 레이아웃 효과가 더 명확하고 간결해집니다. 작품에 좀 더 단순하고 넉넉한 텍스트 스타일을 사용하여 작품을 더욱 돋보이게 하고 매력적으로 만들 수 있기를 바랍니다.