Đặt trọng lượng phông chữ bằng các lớp Bootstrap

128

Có lớp Twitter Bootstrap nào font-weight: boldvà các giá trị khác font-weightkhông?

Tôi sẽ không tạo một cái mới nếu cái này đã tồn tại trong Bootstrap.

— Ionică Bizău
nguồn

5

Không có lớp, Bạn cần tùy chỉnh riêng.

— Manoz

2

vâng, không có lớp riêng cho phông chữ: đậm

— Dinesh Kanivu

52

EDIT 2 (cuối cùng): Theo tài liệu bootstrap 4 , class="font-weight-bold"là những gì bạn đang tìm kiếm.

EDIT: Bạn có thể sử dụng class="font-weight-bold"như được hiển thị ở đây (Bootstrap 4 alpha).

Tôi giữ câu trả lời ban đầu dưới đây cho mục đích rõ ràng.

Tôi đang đăng câu trả lời này bởi vì chủ đề này dường như có rất nhiều khách truy cập, nhưng nó không có giải pháp thích hợp để giải quyết vấn đề này. Nhưng sẽ sớm có một cách với Bootstrap 4:

Như này GitHub yêu cầu kéo chương trình, bạn sẽ chỉ phải sử dụng text-weight-normal, text-weight-boldvà text-weight-italiccác lớp học.

Điều này có thể thay đổi cho đến khi phát hành ổn định chính thức. Tại ngày viết này, yêu cầu kéo này chưa được hợp nhất trong nhánh alpha.

Tôi sẽ cập nhật bài viết này khi Bootstrap v4 được phát hành.

— Ilshidur
nguồn

Ôi, thật dễ thương! Bạn có thể cải thiện câu trả lời của mình để đề cập rằng điều này sẽ xảy ra trong Bootstrap 4 và thêm giải pháp cho các phiên bản hiện tại (sử dụng và chỉ tạo lớp của riêng bạn) không? Tôi sẽ đánh dấu câu trả lời của bạn sau đó.

— Ionică Bizău

Ngoài ra (trong Bootstrap 4), bạn có thể thêm lớp được đề xuất ("font-weight-bold") vào các <input/>hộp và văn bản bên trong sẽ được in đậm. Chúng tôi sử dụng điều này với các trường Tiêu đề để nhấn mạnh chúng khi cần thiết. Đã thử nghiệm trong Windows x64 trong Chrome ver76 và IE11.

— timmi4sa

Người đàn ông lạnh lùng, lạnh lùng. Nó hoạt động !!! tôi đã cố gắng làm cho nội dung được in đậm bằng cách thêm kiểu thủ công vào tệp css nhưng điều đó không xảy ra. Sau đó, tôi tìm thấy câu trả lời của bạn: D

— Travis Le

93

Tôi đã tìm thấy cái này trên trang web Bootstrap , nhưng nó thực sự không phải là lớp Bootstrap, nó chỉ là HTML.

<strong>rendered as bold text</strong>

— Brett Merrifield
nguồn

3

Hơn nữa strongkhông có nghĩa là táo bạo nhất thiết phải. Từ developer.mozilla.org/en-US/docs/Web/HTML/Euity/strong : "Thông thường, phần tử này được hiển thị theo mặc định bằng cách sử dụng trọng lượng phông chữ đậm. Tuy nhiên, không nên sử dụng đơn giản để áp dụng kiểu dáng đậm; Thuộc tính trọng lượng phông chữ CSS cho mục đích đó. "

Mạnh mẽ là mạnh mẽ, táo bạo là táo bạo :( Câu trả lời của @GurgenHakobyan nên được ưu tiên hơn nhiều

— MattAllegro

Đây là từ ngày xưa không có CSS. Do sự tách biệt của mẫu thiết kế mối quan tâm, CSS đã được phát minh để tránh trộn lẫn nội dung và trình bày cả trong HTML. Mặc dù các trình duyệt web vẫn hỗ trợ điều này để tương thích ngược, nhưng chúng tôi khuyên bạn không nên sử dụng và , và vv en.wikipedia.org/wiki/Cascading_Style_Sheets

— Wildhammer

49

Trong Bootstrap 4 :

class="font-weight-bold"

Hoặc là:

<strong>text</strong>

— Jeremy Lynch
nguồn

39

Tạo trong Site.css của bạn (hoặc ở một nơi khác) một lớp mới có tên chẳng hạn .font-bold và đặt nó thành phần tử của bạn

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

— Gurgen Hakobyan
nguồn

8

Tôi sẽ khuyên bạn nên đánh dấu, đánh dấu được coi là ngữ nghĩa, như thế này: .some-function-description-of-the-Element {font-weight: bold}. Thay vì chỉ sử dụng một lớp có tên như một chút css, chỉ cần sử dụng style = "font-weight: bold;", nó trung thực hơn về việc nhanh chóng bị bẩn.

— cmc

23

Đây là một giải pháp hoàn hảo và cũng có ngữ nghĩa như nhiều lớp Bootstrap khác như .text-in hoa hoặc .list-unstyled. Các kiểu nội tuyến có thể trở thành một cơn ác mộng trong quản lý, ví dụ nếu sau này bạn quyết định rằng tất cả các yếu tố in đậm phải là một màu khác hoặc có hiệu ứng văn bản. Có một lớp học làm cho điều này dễ dàng hơn và đây là câu trả lời tốt nhất.

— Andy Mehalick

Tôi đồng ý với Andy ở đây. Điều này trả lời chính xác câu hỏi. Có các trường hợp sử dụng hợp lệ khi sử dụng các lớp tổng quát sẽ cung cấp đầu ra html sạch nhất, trong đó các trình tạo, bộ công cụ & mẫu đang sử dụng.

— dperish

Đây là giải pháp phù hợp cho bootstrap <4. Mục đích của việc strong không làm đậm văn bản , các trình duyệt làm điều đó vì quy ước là văn bản in đậm với sự nhấn mạnh. Thẻ HTML phải có ý nghĩa ngữ nghĩa, không chỉ tồn tại cho mục đích thiết kế. Trên thực tế, nó không được trích dẫn trong khuyến nghị của W3 và thậm chí b không nên dựa vào phần in đậm .

— Andre Figueiredo

1

Điều này đã lỗi thời trong bootstrap 4

— chập chững

8

Trên Bootstrap 4, bạn có thể sử dụng:

<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
nguồn

2

Bạn nên sử dụng các biến của bootstarp để kiểm soát trọng lượng phông chữ của mình nếu bạn muốn một giá trị tùy chỉnh hơn và / hoặc bạn đang theo một sơ đồ cần được lặp lại; Các biến được sử dụng trong toàn bộ dự án như một cách để tập trung và chia sẻ các giá trị thường được sử dụng như màu sắc, khoảng cách hoặc ngăn xếp phông chữ;

bạn có thể tìm thấy tất cả các tài liệu tại http://getbootstrap.com/css .

— maioman
nguồn