Bootstrap'te mevcut metin rengi sınıfları

119

Gezinme çubuğuna başlık olarak bir metin ekleyerek bir kayıt sayfası geliştiriyorum. Bu metinlere farklı renkler vermek istiyorum. Bu amaçla ayrı bir CSS dosyası kullanıyorum, ancak bunu bootstrap'ın CSS dosyasını kullanarak yapmak istiyorum.

Mevcut renk sınıflarını bootstrap'ta listeleyen var mı?

— Fidel Castro
kaynak

3

Bootstrap, #333333metin rengi için tek renk kullanır .

— Bindiya Patoliya

tek başına sadece bunu kullanıyor mu?

— fidel castro

Ancak farklı etiket için farklı kullanabilirsiniz.

— Bindiya Patoliya

u Bunu açıklamak ya da mümkünse link yer misiniz

— Fidel Castro,

195

Önyükleme 3 dokümantasyon yardımcı sınıflar altında listeler bu: Muted, Primary, Success, Info, Warning, Danger.

Önyükleme 4 dokümantasyon kamu altında listeler bu -> rengi ve daha fazla seçenek vardır: primary, secondary, success, danger, warning, info, light, dark, muted, white.

Bunlara erişmek için, class text-[class-name]

Öyleyse, örneğin mavi metin istersem şöyle bir şey yapardım:

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

Bu çok fazla seçenek değil, ama bazıları.

— Ted Delezene
kaynak

2

"Mavi metin istiyorsanız" tereddüt ediyorum. Varsayılan olarak mavi olan ana rengi uygulamak istediğinizde bu sınıf kullanılmalıdır. Ancak $primarydeğişirse, resmi olarak mavi metniniz de değişir. Her zaman mavi metne sahip olduğunuzdan emin olmak istiyorsanız, metni istediğiniz mavi tonuna ayarlamalısınız.

— jacroe

7

Gezinme çubuğundaki metin normalde bootstrap.cssdosyada aşağıdaki iki css sınıfından biri kullanılarak renklendirilir .

Öncelikle, varsayılan bir gezinme çubuğu (gri olan) .navbar-defaultkullanılması durumunda , sınıf kullanılacak ve metin koyu gri olarak renklendirilecektir .

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

Diğeri, ters bir gezinme çubuğu (siyah olan) kullanılması durumunda, metin gri olarak renklendirilir60 .

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

Böylece rengini dilediğiniz gibi değiştirebilirsiniz. Ancak, değiştirmek için ayrı bir css dosyası kullanmanızı tavsiye ederim.

NOT: Ayrıca kullanabilirsiniz özelleştiricinizi tarafından sağlanan Twitter Bootstrapiçinde, Navbarbölüm.

— lvarayut
kaynak

6

Metin sınıflarını kullanabilirsiniz:

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

gerektiğinde herhangi bir etikette metin sınıfları kullanı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>

Gereksiniminiz doğrultusunda kendi sınıflarınızı ekleyebilir veya yukarıdaki sınıfları değiştirebilirsiniz.

— Dipendra Ghatal
kaynak

0

Bootstrap 4'te (son sürümlerde eklenen) diğer yanıtlarda belirtilmeyen birkaç sınıf daha var .

.text-black-50ve .text-white-50% 50 şeffaftır.

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

Snippet'i genişlet

— Jakub Muda
kaynak