[css] Bootstrap에서 사용 가능한 텍스트 색상 클래스

Program / 글쓴이

내비게이션 바의 제목으로 일부 텍스트를 넣어 가입 페이지를 개발 중입니다. 그 텍스트에 다른 색을주고 싶습니다. 이를 위해 별도의 CSS 파일을 사용하고 있지만 부트 스트랩의 CSS 파일을 사용하여이 작업을 수행하고 싶습니다.

누구나 부트 스트랩에서 사용 가능한 색상 클래스를 나열 할 수 있습니까?

답변

부트 스트랩 3 문서 헬퍼 클래스 아래에는이 :
Muted, Primary, Success, Info, Warning, Danger.

부트 스트랩 4 문서 유틸리티 아래에는이 -> 색상 및 더 많은 옵션이있다 :
primary, secondary, success, danger, warning, info, light, dark, muted, white.

액세스하려면 class text-[class-name]

예를 들어 파란색 텍스트를 원하면 다음과 같이합니다.

<p class="text-primary">This text is the blue primary color.</p>

이것은 엄청난 수의 선택은 아니지만 일부입니다.

답변

탐색 모음의 텍스트는 일반적으로 bootstrap.css파일 에서 다음 두 개의 css 클래스 중 하나를 사용하여 색상이 지정 됩니다.

첫째, 기본 내비게이션 바 (회색)를 사용하는 경우 .navbar-default클래스가 사용되며 텍스트는 진한 회색으로 표시 됩니다.

.navbar-default .navbar-text {
  color: #777;
}

다른 하나는 역 탐색 모음 (검은 색)을 사용하는 경우 텍스트가 gray60 으로 표시 됩니다.

.navbar-inverse .navbar-text {
  color: #999;
}

따라서 원하는대로 색상을 변경할 수 있습니다. 그러나 별도의 css 파일을 사용하여 변경하는 것이 좋습니다.

참고 : 섹션 에서에서 제공 하는 사용자 지정 도구를 사용할 수도 있습니다 .Twitter BootstrapNavbar

답변

텍스트 클래스를 사용할 수 있습니다.

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

필요한 경우 모든 태그에 텍스트 클래스를 사용하십시오.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

자신의 클래스를 추가하거나 요구 사항으로 위의 클래스를 수정할 수 있습니다.

답변

다른 답변에서 언급되지 않은 Bootstrap 4 (최신 버전에 추가됨) 에는 몇 가지 더 많은 클래스가 있습니다 .

.text-black-50및 .text-white-5050 %의 투명하다.

.text-body {
  color: #212529 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/*DEMO*/
p{padding:.5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<p class="text-body">.text-body</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

스 니펫 확장

답변