Kelas warna teks yang tersedia di Bootstrap

119

Saya sedang mengembangkan halaman pendaftaran, dengan meletakkan beberapa teks sebagai judul di bilah navigasi. Saya ingin memberi warna yang berbeda pada teks tersebut. Untuk tujuan ini saya menggunakan file CSS terpisah, tetapi saya ingin melakukan ini menggunakan file CSS bootstrap.

Adakah yang bisa membuat daftar kelas warna yang tersedia di bootstrap?

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 fidel castro
sumber
3
Bootstrap menggunakan satu warna #333333untuk warna teks.
Bindiya Patoliya
itu saja gunakan hanya ini?
fidel castro
Tetapi Anda dapat menggunakan perbedaan untuk tag yang berbeda.
Bindiya Patoliya
bisakah kamu menjelaskan ini atau menempatkan tautan jika memungkinkan
fidel castro

Jawaban:

195

The bootstrap 3 dokumentasi daftar ini di bawah kelas pembantu: Muted, Primary, Success, Info, Warning, Danger.

The bootstrap 4 dokumentasi daftar ini di bawah utilitas -> warna, dan memiliki lebih banyak pilihan: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Untuk mengaksesnya, seseorang menggunakan class text-[class-name]

Jadi, jika saya ingin teks biru misalnya, saya akan melakukan sesuatu seperti ini:

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

Ini bukan pilihan yang banyak, tapi ada beberapa.

Ted Delezene
sumber
2
Saya akan ragu untuk mengatakan jika Anda "ingin teks biru". Kelas itu harus digunakan saat Anda ingin menerapkan warna utama, yang secara default berwarna biru. Namun jika $primaryberubah, teks biru formal Anda juga akan berubah. Jika Anda ingin memastikan Anda selalu memiliki teks biru, Anda harus mengatur teks ke warna biru apa pun yang Anda inginkan.
jacroe
7

Teks pada bilah navigasi biasanya diwarnai dengan menggunakan salah satu dari dua kelas css berikut dalam bootstrap.cssfile.

Pertama, jika menggunakan bilah navigasi default (yang berwarna abu-abu), .navbar-defaultkelas akan digunakan dan teks diberi warna abu-abu tua .

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

Yang lainnya adalah jika menggunakan bilah navigasi terbalik (yang hitam), teks diberi warna abu - abu60 .

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

Jadi, Anda bisa mengubah warnanya sesuai keinginan. Namun, saya akan merekomendasikan Anda untuk menggunakan file css terpisah untuk mengubahnya.

CATATAN: Anda juga dapat menggunakan penyesuai yang disediakan oleh Twitter Bootstrap, di Navbarbagian.

lvarayut.dll
sumber
6

Anda dapat menggunakan kelas teks:

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

gunakan kelas teks di tag mana pun jika diperlukan.

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

Anda dapat menambahkan kelas Anda sendiri atau mengubah kelas di atas sebagai kebutuhan Anda.

Dipendra Ghatal
sumber
0

Ada beberapa kelas lagi di Bootstrap 4 (ditambahkan di versi terbaru) tidak disebutkan dalam jawaban lain.

.text-black-50dan .text-white-5050% transparan.

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

Jakub Muda
sumber