Các lớp màu văn bản có sẵn trong Bootstrap

Tôi đang phát triển một trang đăng ký, bằng cách đặt một số văn bản làm tiêu đề trên thanh điều hướng. Tôi muốn cung cấp cho các văn bản những màu sắc khác nhau. Vì mục đích này, tôi đang sử dụng một tệp CSS riêng biệt, nhưng tôi muốn thực hiện việc này bằng cách sử dụng tệp CSS của bootstrap.

Có ai có thể liệt kê các lớp màu có sẵn trong bootstrap không?

Các bootstrap 3 tài liệu danh sách này dưới lớp helper: Muted, Primary, Success, Info, Warning, Danger.

Các bootstrap 4 tài liệu danh sách này theo tiện ích -> màu sắc, và có nhiều lựa chọn hơn: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Để truy cập chúng, người ta sử dụng class text-[class-name]

Vì vậy, nếu tôi muốn văn bản màu xanh lam chẳng hạn, tôi sẽ làm như sau:

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

Đây không phải là một số lượng lớn các lựa chọn, nhưng đó là một số.

Văn bản trên thanh điều hướng thường được tô màu bằng cách sử dụng một trong hai lớp css sau trong bootstrap.csstệp.

Thứ nhất, trong trường hợp sử dụng thanh điều hướng mặc định (màu xám), .navbar-defaultlớp sẽ được sử dụng và văn bản có màu xám đậm .

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

Cái còn lại là trong trường hợp sử dụng thanh điều hướng ngược (thanh màu đen), văn bản có màu xám60 .

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

Vì vậy, bạn có thể thay đổi màu sắc của nó như bạn muốn. Tuy nhiên, tôi khuyên bạn nên sử dụng một tệp css riêng để thay đổi nó.

LƯU Ý: bạn cũng có thể sử dụng tùy biến được cung cấp bởi Twitter Bootstrap, trongNavbar phần.

Bạn có thể sử dụng các lớp văn bản:

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

sử dụng các lớp văn bản trong bất kỳ thẻ nào nếu cần.

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

Bạn có thể thêm các lớp của riêng mình hoặc sửa đổi các lớp trên theo yêu cầu của bạn.

Có một vài classess nữa trong Bootstrap 4 (được thêm vào trong các phiên bản gần đây) không được đề cập trong các câu trả lời khác.

.text-black-50và .text-white-50trong suốt 50%.

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