Bootstrap sınıflarını kullanarak yazı tipi ağırlığını ayarlayın


129

İçin herhangi bir Twitter Bootstrap sınıfı font-weight: boldve diğer değerleri var font-weightmı?

Bu Bootstrap'te zaten mevcutsa yeni bir tane oluşturmam.


5
Sınıf yok, kendinizinkini özelleştirmeniz gerekiyor.
Manoz

2
evet, Font-weight için ayrı bir sınıf yoktur: bold
Dinesh Kanivu

Yanıtlar:


54

DÜZENLEME 2 (son): bootstrap 4 belgelerine göre , class="font-weight-bold"aradığınız şey bu.


DÜZENLEME: Burada gösterildiğiclass="font-weight-bold" gibi kullanabilirsiniz (Bootstrap 4 alpha).

Açıklık sağlamak amacıyla aşağıdaki orijinal cevabı sakladım.


Bu cevabı gönderiyorum çünkü bu konu çok fazla ziyaretçiye sahip gibi görünüyor, ancak bu sorunu çözmek için uygun bir çözümü yoktu. Ama yakında Bootstrap 4'ün bir yolu olacak:

Gibi bu GitHub çekme isteği gösterileri, sadece kullanmak zorunda olacak text-weight-normal, text-weight-boldve text-weight-italicsınıfları.

Bu, resmi kararlı sürüme kadar değişebilir. Bu yazı tarihinde, bu çekme talebi henüz alfa dalında birleştirilmemiştir.

Bootstrap v4 yayınlandıktan sonra bu yazıyı güncelleyeceğim.


Oh, bu çok şirin! Yanıtınızı, bunun Bootstrap 4'te gerçekleşeceğini belirtmek için geliştirebilir ve mevcut sürümler için bir çözüm ekleyebilir <strong>misiniz (kendi sınıfınızı kullanarak ve yalnızca oluşturarak)? O zaman cevabını işaretleyeceğim.
Ionică Bizău

Ayrıca (Bootstrap 4'te) önerilen sınıfı ("font-weight-bold") <input/>kutulara ekleyebilirsiniz ve içindeki metin kalın olacaktır. Bunu gerektiğinde vurgulamak için Başlık alanları ile birlikte kullanıyoruz. Windows x64'te Chrome ver76 ve IE11'de test edilmiştir.
timmi4sa

Harika, havalı adam. İşe yarıyor!!! stili elle css dosyasına ekleyerek içeriği kalın yapmaya çalıştım ama olmadı. Sonra cevabınızı buldum: D
Travis Le

93

Bunu Bootstrap web sitesinde buldum , ancak bu gerçekten bir Bootstrap sınıfı değil, sadece HTML.

<strong>rendered as bold text</strong>

3
Dahası strong, mutlaka kalın anlamına gelmez. Gönderen developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : "Genellikle bu eleman cesur bir yazı ağırlık kullanılarak varsayılan olarak oluşturulur Ancak, kalın stil uygulamak için basitçe kullanılmamalıdır; kullanın. Bu amaç için CSS yazı tipi ağırlığı özelliği. "

Güçlü güçlüdür, cesurdur :( @GurgenHakobyan'ın cevabı çok tercih edilmelidir.
MattAllegro

Bu, CSS'nin olmadığı eski günlerden. Endişelerin tasarım modelinin ayrılması nedeniyle, hem HTML'de içeriği hem de sunumu karıştırmaktan kaçınmak için CSS icat edildi. Web tarayıcıları geriye dönük uyumluluk için hala bunu desteklese de, <b> ve <strong>, <i> ve <em> vb. En.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammer


39

Site.css dosyanızda (veya başka bir yerde) örneğin .font-bold adlı yeni bir sınıf oluşturun ve bunu öğenize ayarlayın

.font-bold {
  font-weight: bold;
}

8
Buna karşı tavsiye ederim, işaretlemenin semantik olması gerekiyor, şöyle: .some-function-description-of-the-element {font-weight: bold}. Biraz css gibi adlandırılmış bir sınıf kullanmak yerine, sadece style = "font-weight: bold;" kullanın, hızlı ve kirli olma konusunda daha dürüst.
cmc

23
Bu mükemmel bir çözümdür ve .text-büyük harf veya .list-styled gibi diğer birçok Bootstrap sınıfı kadar anlamsaldır. Satır içi stiller, örneğin daha sonra tüm kalın öğelerin farklı bir renk olması veya bir metin efektine sahip olması gerektiğine karar verirseniz, bir yönetim kabusu haline gelebilir. Bir sınıfa sahip olmak bunu kolaylaştırır ve bu en iyi cevaptır.
Andy Mehalick

Andy'ye burada katılıyorum. Bu, soruyu doğru yanıtlıyor. Jeneratörlerin, araç takımlarının ve şablonların kullanımda olduğu, genelleştirilmiş sınıfların en temiz html çıktısını sağlayacağı durumlarda geçerli kullanım durumları vardır.
2016

Bu, bootstrap <4 için doğru çözümdür. Bunun amacı, strong metni kalın yapmak değildir , tarayıcılar bunu yapar, çünkü kural, güçlü vurgu ile kalın metindir. HTML etiketinin anlamsal anlamı olmalıdır, sadece tasarım amaçları için mevcut olmamalıdır. Aslında W3 tavsiyesinde belirtilmemiştir ve hatta b cesur olmasına güvenilmemelidir .
Andre Figueiredo

1
Bu bootstrap 4'te modası geçmiş
Toddmo

8

Bootstrap 4'te şunları kullanabilirsiniz:

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>

2

Daha özelleştirilmiş bir değer istiyorsanız ve / veya tekrarlanması gereken bir şemayı takip ediyorsanız, yazı tipi ağırlığınızı kontrol etmek için bootstarp değişkenlerini kullanmalısınız; Değişkenler, renkler, aralıklar veya yazı tipi yığınları gibi yaygın olarak kullanılan değerleri merkezileştirmenin ve paylaşmanın bir yolu olarak tüm proje boyunca kullanılır;

tüm belgeleri http://getbootstrap.com/css adresinde bulabilirsiniz .

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.