Atur font-weight menggunakan kelas Bootstrap

129

Apakah ada kelas Bootstrap Twitter untuk font-weight: bolddan nilai lainnya font-weight?

Saya tidak akan membuat yang baru jika ini sudah ada di Bootstrap.

html css twitter-bootstrap twitter-bootstrap-3 Ionică Bizău
sumber
5
Tidak ada kelas, Anda perlu menyesuaikan sendiri.
Manoz
2
ya tidak ada kelas terpisah untuk Font-weight: bold
Dinesh Kanivu

Jawaban:

54

EDIT 2 (final): Menurut dokumentasi bootstrap 4 , class="font-weight-bold"inilah yang Anda cari.

EDIT: Anda dapat menggunakan class="font-weight-bold"seperti yang ditunjukkan di sini (Bootstrap 4 alpha).

Saya menyimpan jawaban asli di bawah untuk tujuan kejelasan.

Saya memposting jawaban ini karena utas ini tampaknya memiliki banyak pengunjung, namun tidak ada solusi yang tepat untuk menyelesaikan masalah ini. Tetapi sekarang akan segera ada cara dengan Bootstrap 4:

Seperti yang ditunjukkan oleh permintaan tarik GitHub ini , Anda hanya perlu menggunakan kelas text-weight-normal, text-weight-bolddan text-weight-italic.

Ini mungkin bisa berubah hingga rilis stabil resmi. Pada tanggal penulisan ini, permintaan tarik ini belum digabungkan di cabang alfa.

Saya akan memperbarui posting ini setelah Bootstrap v4 dirilis.

Ilshidur
sumber
Oh, itu lucu! Dapatkah Anda meningkatkan jawaban Anda dengan menyebutkan bahwa ini akan terjadi di Bootstrap 4, dan menambahkan solusi untuk versi saat ini (baik menggunakan <strong>dan hanya membuat kelas Anda sendiri)? Saya akan menandai jawaban Anda.
Ionică Bizău
Juga (di Bootstrap 4) Anda dapat menambahkan kelas yang disarankan ("font-weight-bold") ke <input/>kotak dan teks di dalamnya akan menjadi tebal. Kami menggunakan ini dengan bidang Judul untuk menekankannya bila perlu. Diuji di Windows x64 di Chrome ver76 dan IE11.
timmi4sa
Keren, pria keren. Berhasil!!! Saya memang mencoba membuat konten menjadi tebal dengan menambahkan gaya secara manual ke file css tetapi itu tidak terjadi. Kemudian saya menemukan jawaban Anda: D
Travis Le
93

Saya menemukan ini di situs web Bootstrap , tetapi sebenarnya ini bukan kelas Bootstrap, ini hanya HTML.

<strong>rendered as bold text</strong>
Brett Merrifield
sumber
3
Lebih lanjut strongtidak berarti berani. Dari developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : "Biasanya elemen ini dirender secara default menggunakan font yang tebal. Namun, ini tidak boleh digunakan hanya untuk menerapkan gaya tebal; gunakan Properti CSS font-weight untuk tujuan itu. "
Kuat itu kuat, berani itu berani :( Jawaban oleh @GurgenHakobyan seharusnya jauh lebih disukai.
MattAllegro
Ini dari masa lalu di mana tidak ada CSS. Karena pemisahan pola desain terkait, CSS diciptakan untuk menghindari pencampuran konten dan presentasi baik dalam HTML. Meskipun browser web masih mendukung ini untuk kompatibilitas ke belakang, sangat disarankan untuk tidak menggunakan <b> dan <strong>, <i> dan <em> dll. En.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammer
49

Di Bootstrap 4 :

class="font-weight-bold"

Atau:

<strong>text</strong>
Jeremy Lynch
sumber
39

Buat di Site.css Anda (atau di tempat lain) kelas baru bernama misalnya .font-bold dan setel ke elemen Anda

.font-bold {
  font-weight: bold;
}
Gurgen Hakobyan
sumber
8
Saya tidak menyarankan hal ini, markup seharusnya menjadi semantik, seperti ini: .some-functional-description-of-the-element {font-weight: bold}. Daripada hanya menggunakan kelas yang dinamai seperti css, cukup gunakan style = "font-weight: bold;", ini lebih jujur ​​tentang menjadi cepat dan kotor.
cmc
23
Ini adalah solusi sempurna dan semantik seperti banyak kelas Bootstrap lainnya seperti .text-uppercase atau .list-unstyled. Gaya sebaris bisa menjadi mimpi buruk manajemen, misalnya jika nanti Anda memutuskan bahwa semua elemen tebal harus memiliki warna yang berbeda atau memiliki efek teks. Memiliki kelas membuat ini lebih mudah dan ini adalah jawaban terbaik.
Andy Mehalick
Saya setuju dengan Andy di sini. Ini menjawab pertanyaan dengan benar. Ada kasus penggunaan yang valid saat menggunakan kelas umum akan memberikan keluaran html terbersih, di mana generator, toolkit & template digunakan.
bubar
Ini adalah solusi yang tepat untuk bootstrap <4. Tujuannya strong bukan untuk membuat teks menjadi tebal , browser melakukannya karena konvensi teks tebal dengan penekanan yang kuat. Tag HTML harus memiliki makna semantik, tidak hanya ada untuk tujuan desain. Nyatanya tidak dikutip dalam rekomendasi W3, dan bahkan b tidak boleh diandalkan untuk menjadi berani .
Andre Figueiredo
1
Ini sudah usang dalam bootstrap 4
toddmo
8

Di Bootstrap 4 Anda dapat menggunakan:

<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>
danramzdev
sumber
2

Anda harus menggunakan variabel bootstarp untuk mengontrol font-weight Anda jika Anda menginginkan nilai yang lebih disesuaikan dan / atau Anda mengikuti skema yang perlu diulang; Variabel digunakan di seluruh proyek sebagai cara untuk memusatkan dan berbagi nilai yang umum digunakan seperti warna, spasi, atau tumpukan font;

Anda dapat menemukan semua dokumentasi di http://getbootstrap.com/css .

maioman
sumber