부트 스트랩 클래스를 사용하여 글꼴 두께 설정

129

에 대한 Twitter Bootstrap 클래스 font-weight: bold및 기타 값이 있습니까?font-weight 있습니까?

이것이 이미 Bootstrap에 존재한다면 새로운 것을 만들지 않을 것입니다.

— Ionică Bizău
소스

5

수업이 없습니다. 자신 만의 맞춤화가 필요합니다.

— Manoz 2013 년

2

네, Font-weight : bold에 대한 별도의 클래스가 없습니다

— Dinesh Kanivu 2013 년

54

EDIT 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/>상자에 추가 할 수 있으며 내부 텍스트는 굵게 표시됩니다. 필요할 때 강조하기 위해 제목 필드와 함께 사용합니다. Chrome ver76 및 IE11의 Windows x64에서 테스트되었습니다.

— timmi4sa

멋지고 멋진 남자. 효과가있다!!! CSS 파일에 수동으로 스타일을 추가하여 콘텐츠를 대담하게 만들려고했지만 실제로는 발생하지 않았습니다. 그런 다음 귀하의 답을 찾았습니다. D

— Travis Le

93

나는 이것을 Bootstrap 웹 사이트 에서 찾았 지만 실제로는 Bootstrap 클래스가 아니라 HTML 일뿐입니다.

<strong>rendered as bold text</strong>

— 브렛 메리 필드
소스

3

또한 strong반드시 대담한 의미는 아닙니다. 에서 developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : "일반적으로이 요소는 굵은 글꼴 두께를 사용하여 기본적으로 렌더링 그러나, 대담한 스타일을 적용하기 위해 간단하게 사용할 수 없습니다; 사용. 이를위한 CSS 글꼴 두께 속성. "

강한이 강한, 굵게 굵게 :( @GurgenHakobyan에 의한 대답은 훨씬 선호한다.

— MattAllegro

이것은 CSS가 없었던 옛날부터입니다. 관심사 디자인 패턴의 분리로 인해 CSS는 HTML에서 콘텐츠와 프레젠테이션이 혼합되는 것을 방지하기 위해 발명되었습니다. 웹 브라우저는 이전 버전과의 호환성을 위해 여전히이를 지원하지만 및 , 및 등을 사용하지 않는 것이 좋습니다. en.wikipedia.org/wiki/Cascading_Style_Sheets

— Wildhammer

49

에서 부트 스트랩 4 :

class="font-weight-bold"

또는:

<strong>text</strong>

— 제레미 린치
소스

39

Site.css (또는 다른 위치)에 .font-bold라는 이름의 새 클래스를 만들고이를 요소로 설정합니다.

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

— 구르 겐 하코 뱌
소스

8

이에 대해 조언하고 싶습니다. 마크 업은 다음과 같이 의미 론적이어야합니다. .some-functional-description-of-the-element {font-weight : bold}. CSS와 같은 이름의 클래스를 사용하는 것보다 style = "font-weight : bold;"를 사용하면 빠르고 더러워지는 것이 더 정직합니다.

— cmc

23

이것은 완벽한 솔루션이며 .text-uppercase 또는 .list-unstyled와 같은 다른 많은 부트 스트랩 클래스와 마찬가지로 의미 론적입니다. 예를 들어 나중에 모든 굵은 요소가 다른 색상이거나 텍스트 효과를 가져야한다고 결정하는 경우 인라인 스타일은 관리상의 악몽이 될 수 있습니다. 수업이 있으면 이것을 더 쉽게 할 수 있으며 이것이 가장 좋은 대답입니다.

— Andy Mehalick 2015 년

나는 여기 Andy와 동의합니다. 이것은 질문에 올바르게 대답합니다. 일반화 된 클래스를 사용하면 생성기, 툴킷 및 템플릿이 사용되는 가장 깨끗한 html 출력이 제공되는 유효한 사용 사례가 있습니다.

— dperish

이것은 부트 스트랩 <4에 적합한 솔루션입니다. 그 목적은 strong 텍스트를 굵게 만드는 것이 아니라 , 규칙이 강한 강조가있는 굵은 텍스트이기 때문에 브라우저에서합니다. HTML 태그는 디자인 목적으로 만 존재하는 것이 아니라 의미 론적 의미를 가져야합니다. 실제로 W3 권장 사항에 언급되지 않았으며 b 굵게 표시되어서는 안됩니다 .

— Andre Figueiredo

1

이것은 부트 스트랩 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 에서 모든 문서를 찾을 수 있습니다 .

— 마이 오만
소스