มีคลาสสีข้อความใน Bootstrap

ฉันกำลังพัฒนาหน้าลงชื่อสมัครใช้โดยใส่ข้อความเป็นชื่อที่แถบนำทาง ฉันต้องการให้ข้อความเหล่านั้นมีสีที่แตกต่างกัน เพื่อจุดประสงค์นี้ฉันใช้ไฟล์ CSS แยกต่างหาก แต่ฉันต้องการทำสิ่งนี้โดยใช้ไฟล์ CSS ของ bootstrap

ใครสามารถแสดงรายการคลาสสีที่มีอยู่ใน bootstrap ได้บ้าง?

บูต 3 เอกสารรายการนี้อยู่ภายใต้การเรียนผู้ช่วย: Muted, Primary, Success, Info, ,WarningDanger

บูต 4 เอกสารรายการนี้อยู่ภายใต้สาธารณูปโภค -> สีและมีตัวเลือกมากขึ้น: primary, secondary, success, danger, warning, info, light, dark, ,mutedwhite

ในการเข้าถึงให้ใช้ไฟล์ class text-[class-name]

ดังนั้นหากฉันต้องการข้อความสีน้ำเงินเช่นฉันจะทำสิ่งนี้:

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

นี่ไม่ใช่ตัวเลือกมากมาย แต่เป็นบางส่วน

ข้อความที่แถบนำทางตามปกติจะมีสีโดยใช้หนึ่งในสองคลาส css ต่อไปนี้ในbootstrap.cssไฟล์

ประการแรกในกรณีของการใช้แถบนำทางเริ่มต้น (สีเทาหนึ่ง) ที่.navbar-defaultระดับจะถูกใช้และข้อความที่เป็นสีเป็นสีเทาเข้ม

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

อื่น ๆ คือในกรณีของการใช้แถบนำทางผกผัน (สีดำหนึ่ง) ข้อความที่เป็นสีเป็นgray60

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

ดังนั้นคุณสามารถเปลี่ยนสีได้ตามต้องการ อย่างไรก็ตามฉันขอแนะนำให้คุณใช้ไฟล์ css แยกต่างหากเพื่อเปลี่ยนแปลง

หมายเหตุ: คุณยังสามารถใช้เครื่องมือปรับแต่งที่มีให้Twitter BootstrapในNavbarส่วน

คุณสามารถใช้คลาสข้อความ:

.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-50โปร่งใส 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>