ตั้งค่าน้ำหนักตัวอักษรโดยใช้คลาส Bootstrap

129

มีคลาส Twitter Bootstrap สำหรับfont-weight: boldและค่าอื่น ๆ ของfont-weightหรือไม่?

ฉันจะไม่สร้างใหม่หากสิ่งนี้มีอยู่แล้วใน Bootstrap

— IonicăBizău
แหล่งที่มา

5

ไม่มีคลาสคุณต้องปรับแต่งเอง

— Manoz

2

ใช่ไม่มีคลาสแยกสำหรับ Font-weight: bold

— Dinesh Kanivu

54

แก้ไข 2 (สุดท้าย): ตามเอกสารบูต 4 , class="font-weight-bold"คือสิ่งที่คุณกำลังมองหา

แก้ไข: คุณสามารถใช้ได้class="font-weight-bold"ตามที่แสดงไว้ที่นี่ (Bootstrap 4 alpha)

ฉันเก็บคำตอบเดิมไว้ด้านล่างเพื่อความชัดเจน

ฉันโพสต์คำตอบนี้เนื่องจากดูเหมือนว่ากระทู้นี้จะมีผู้เข้าชมจำนวนมาก แต่ก็ไม่มีวิธีแก้ปัญหาที่เหมาะสมในการแก้ปัญหานี้ แต่จะมีวิธีในเร็ว ๆ นี้กับ Bootstrap 4:

ในฐานะที่เป็นนี้ GitHub คำขอดึงแสดงให้เห็นว่าคุณก็จะต้องใช้text-weight-normal, text-weight-boldและtext-weight-italicชั้นเรียน

สิ่งนี้อาจเปลี่ยนแปลงได้จนกว่าจะมีการเปิดตัวที่เสถียรอย่างเป็นทางการ ณ วันที่เขียนนี้ยังไม่มีการรวมคำขอดึงนี้ในสาขาอัลฟา

ฉันจะอัปเดตโพสต์นี้เมื่อ Bootstrap v4 ได้รับการเผยแพร่

— Ilshidur
แหล่งที่มา

โอ้ยน่ารัก! คุณสามารถปรับปรุงคำตอบของคุณเพื่อระบุว่าสิ่งนี้จะเกิดขึ้นใน Bootstrap 4 และเพิ่มโซลูชันสำหรับเวอร์ชันปัจจุบัน (ไม่ว่าจะใช้และเพียงแค่สร้างคลาสของคุณเอง) ฉันจะทำเครื่องหมายคำตอบของคุณแล้ว

— IonicăBizău

นอกจากนี้ (ใน Bootstrap 4) คุณสามารถเพิ่มคลาสที่แนะนำ ("font-weight-bold") ลงใน<input/>กล่องและข้อความภายในจะเปลี่ยนเป็นตัวหนา เราใช้สิ่งนี้กับฟิลด์ Title เพื่อเน้นเมื่อจำเป็น ทดสอบใน Windows x64 ใน Chrome ver76 และ IE11

— timmi4sa

ผู้ชายเย็นชา มันได้ผล!!! ฉันพยายามทำให้เนื้อหาเป็นตัวหนาโดยการเพิ่มสไตล์ลงในไฟล์ css ด้วยตนเอง แต่มันก็ไม่เกิดขึ้น แล้วฉันก็พบคำตอบของคุณ: D

— Travis Le

93

ฉันพบสิ่งนี้ในเว็บไซต์ Bootstrapแต่จริงๆแล้วมันไม่ใช่คลาส Bootstrap มันเป็นแค่ HTML

<strong>rendered as bold text</strong>

— Brett Merrifield
แหล่งที่มา

3

นอกจากนี้strongไม่ได้หมายความว่าเป็นตัวหนาเสมอไป จากdeveloper.mozilla.org/en-US/docs/Web/HTML/Element/strong : "โดยปกติองค์ประกอบนี้จะแสดงผลโดยค่าเริ่มต้นโดยใช้น้ำหนักตัวอักษรที่เป็นตัวหนาอย่างไรก็ตามไม่ควรใช้เพียงเพื่อใช้รูปแบบตัวหนาใช้ คุณสมบัติ CSS font-weight สำหรับจุดประสงค์นั้น "

Strong is strong, bold is bold :( คำตอบของ @GurgenHakobyan ควรเป็นที่ต้องการมาก

— MattAllegro

นี่คือจากสมัยก่อนที่ไม่มี CSS เนื่องจากการแยกรูปแบบการออกแบบความกังวล CSS จึงถูกคิดค้นขึ้นเพื่อหลีกเลี่ยงการผสมเนื้อหาและการนำเสนอทั้งใน HTML แม้ว่าเว็บเบราว์เซอร์จะยังคงรองรับสิ่งนี้เพื่อความเข้ากันได้แบบย้อนหลัง แต่ก็ไม่ควรใช้ และ , และ ฯลฯ en.wikipedia.org/wiki/Cascading_Style_Sheets

— Wildhammer

49

ในBootstrap 4 :

class="font-weight-bold"

หรือ:

<strong>text</strong>

— เจเรมีลินช์
แหล่งที่มา

40

สร้างใน Site.css ของคุณ (หรือที่อื่น) คลาสใหม่ที่มีชื่อว่า. Font-bold และตั้งค่าเป็นองค์ประกอบของคุณ

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

— Gurgen Hakobyan
แหล่งที่มา

8

ฉันขอแนะนำให้ทำเช่นนี้มาร์กอัปควรเป็นความหมายเช่นนี้: .some-functional-description-of-the-element {font-weight: bold} แทนที่จะใช้คลาสที่มีชื่อว่า css เพียงเล็กน้อยให้ใช้ style = "font-weight: bold;" แต่จะซื่อสัตย์กว่าในเรื่องการเร็วและสกปรก

— cmc

23

นี่เป็นโซลูชันที่สมบูรณ์แบบและมีความหมายเช่นเดียวกับคลาส Bootstrap อื่น ๆ เช่น. text-uppercase หรือ. list-unstyled รูปแบบอินไลน์อาจกลายเป็นฝันร้ายของการจัดการเช่นหากคุณตัดสินใจในภายหลังว่าองค์ประกอบที่เป็นตัวหนาทั้งหมดควรเป็นสีอื่นหรือมีเอฟเฟกต์ข้อความ การมีคลาสทำให้ง่ายขึ้นและนี่คือคำตอบที่ดีที่สุด

— Andy Mehalick

ฉันเห็นด้วยกับแอนดี้ที่นี่ สิ่งนี้ตอบคำถามได้อย่างถูกต้อง มีกรณีการใช้งานที่ถูกต้องเมื่อใช้คลาสทั่วไปซึ่งจะให้เอาต์พุต html ที่สะอาดที่สุดซึ่งมีการใช้เครื่องกำเนิดไฟฟ้าชุดเครื่องมือและเทมเพลต

— dperish

นี่เป็นวิธีแก้ปัญหาที่เหมาะสมสำหรับ bootstrap <4 จุดประสงค์strong คือไม่ทำให้ข้อความเป็นตัวหนาเบราว์เซอร์ทำเพราะการประชุมเป็นตัวหนาและเน้นหนัก แท็ก HTML ต้องมีความหมายเชิงความหมายไม่ใช่มีไว้เพื่อวัตถุประสงค์ในการออกแบบเท่านั้น ในความเป็นจริงมันไม่ได้อ้างถึงในคำแนะนำ W3 และb ไม่ควรพึ่งพาตัวหนาด้วยซ้ำ

— Andre Figueiredo

1

สิ่งนี้ล้าสมัยใน bootstrap 4

— Toddmo

8

ใน Bootstrap 4 คุณสามารถใช้:

<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
แหล่งที่มา

2

คุณควรใช้ตัวแปรของ bootstarp เพื่อควบคุมน้ำหนักตัวอักษรของคุณหากคุณต้องการค่าที่กำหนดเองมากขึ้นและ / หรือคุณกำลังทำตามรูปแบบที่ต้องทำซ้ำ ตัวแปรจะถูกใช้ตลอดทั้งโปรเจ็กต์เพื่อรวมศูนย์และแบ่งปันค่าที่ใช้กันทั่วไปเช่นสีระยะห่างหรือสแต็กแบบอักษร

คุณสามารถค้นหาเอกสารทั้งหมดที่http://getbootstrap.com/css

— maioman
แหล่งที่มา