Bootstrap-타이포그래피

Bootstrap은 기본 글꼴 스택에서 Helvetica Neue, Helvetica, Arial 및 sans-serif를 사용합니다. Bootstrap의 타이포그래피 기능을 사용하여 제목, 단락, 목록 및 기타 인라인 요소를 만들 수 있습니다. 다음 섹션에서 각각에 대해 알아보십시오.

제목

모든 HTML 제목 (h1 ~ h6)은 Bootstrap에서 스타일이 지정됩니다. 아래에 예가 나와 있습니다.

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

부트 스트랩이있는 위의 코드 세그먼트는 다음과 같은 결과를 생성합니다.

인라인 부제목

제목에 인라인 부제목을 추가하려면 요소 주위에 을 추가하거나 .small 아래 예제와 같이 더 밝은 색상의 작은 텍스트를 얻을 수 있습니다.

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

부트 스트랩이있는 위의 코드 세그먼트는 다음과 같은 결과를 생성합니다.

리드 바디 카피

단락에 약간의 강조를 추가하려면 class = "lead"를 추가하십시오. 이렇게하면 다음 예제에서와 같이 더 큰 글꼴 크기, 더 가벼운 두께 및 더 긴 줄 높이를 얻을 수 있습니다.

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

중요성

과 같은 HTML의 기본 강조 태그는 텍스트를 부모 크기의 85 %로 설정하고, 은 글꼴 두께가 더 두꺼운 텍스트를 강조하고, 은 기울임 꼴로 텍스트를 강조합니다.

부트 스트랩은 다음 예제에서 볼 수 있듯이 텍스트를 강조하는 데 사용할 수있는 몇 가지 클래스를 제공합니다.

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

약어

HTML <abbr> 요소는 WWW 또는 HTTP와 같은 약어 또는 두문자어에 대한 마크 업을 제공합니다. 부트 스트랩은 하단에 밝은 점선 테두리가있는 <abbr> 요소를 스타일링하고 마우스 오버시 전체 텍스트를 표시합니다 (해당 텍스트를 <abbr> 제목 속성에 추가하는 경우). 약간 더 작은 글꼴 크기를 얻으려면 <abbr>에 .initialism을 추가하십시오.

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

구애

<address> 태그를 사용하면 웹 페이지에 연락처 정보를 표시 할 수 있습니다. <address>는 기본적으로 display : block; 당신은 사용해야 할 것입니다

포함 된 주소 텍스트에 줄 바꿈을 추가하는 태그입니다.

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</a>
</address>

인용구

HTML 텍스트 주위에 기본 <blockquote>를 사용할 수 있습니다. 다른 옵션으로는 따옴표의 출처를 식별하기위한 태그를 추가하고 .pull-right 클래스를 사용하여 인용구를 오른쪽 정렬하는 것이 있습니다. 다음 예제는 이러한 모든 기능을 보여줍니다.

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

기울기

부트 스트랩은 정렬 된 목록, 정렬되지 않은 목록 및 정의 목록을 지원합니다.

Ordered lists − 정렬 된 목록은 일종의 순차적 인 순서로되어 있고 앞에 숫자가 붙은 목록입니다.
Unordered lists− 정렬되지 않은 목록은 특정 순서가없는 목록이며 전통적으로 글 머리 기호로 스타일이 지정됩니다. 글 머리 기호를 표시하지 않으려면 .list-unstyled 클래스를 사용하여 스타일을 제거 할 수 있습니다 . .list-inline 클래스를 사용하여 모든 목록 항목을 한 줄에 배치 할 수도 있습니다 .
Definition lists−이 유형의 목록에서 각 목록 항목은 <dt> 및 <dd> 요소로 구성 될 수 있습니다. <dt>는 용어 정의를 나타내며 사전과 마찬가지로 정의 되는 용어 (또는 구문)입니다. 결과적으로 <dd>는 <dt>의 정의입니다. dl-horizontal 클래스를 사용하여 <dl>의 용어와 설명을 나란히 정렬 할 수 있습니다 .

다음 예제는 이러한 각 유형을 보여줍니다-

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Definition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal Definition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>