부트에서 사용 가능한 텍스트 색상 클래스

부트에서 사용 가능한 텍스트 색상 클래스

---

탐색 표시 줄에 제목으로 텍스트를 추가하여 가입 페이지를 개발 중입니다. 그 텍스트에 다른 색을주고 싶습니다. 이를 위해 별도의 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;
}

다른 하나는 역 내비게이션 막대 (검은 색) 사용하는 경우를 텍스트는 회색 (60) 으로 -display 됩니다.

.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>

참고 URL : https://stackoverflow.com/questions/21495243/available-text-color-classes-in-bootstrap