부트스트랩 타이포그래피

Bootstrap은 Helvetica Neue, Helvetica, Arial 및 sans-serif를 기본 글꼴 스택으로 사용합니다.

Bootstrap의 타이포그래피 기능을 사용하면 제목, 단락, 목록 및 기타 인라인 요소를 만들 수 있습니다.

Heading

Bootstrap은 모든 HTML 제목(h1~h6)의 스타일을 정의합니다. 아래 예를 참조하십시오.

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标题</title>
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

</body>
</html>

예제 실행 »

온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.

인라인 자막

모든 제목에 인라인 자막을 추가해야 하는 경우 , 요소의 양쪽에 <small>을 추가하거나 .small 클래스를 추가하면 다음 예와 같이 더 작은 글꼴 크기와 더 밝은 텍스트를 얻을 수 있습니다.

< html>
<html>
<head>
<title>Bootstrap 예 - 인라인 자막</title>
<link href="/bootstrap/css/bootstrap.min.css" rel ="stylesheet"> ;
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js">< ;/script>
</head>
<body>

<h1>나는 제목 1 h1입니다. . 저는 자막 2 h2</h2>

저는 타이틀 3 h3입니다.< /h3>
< ;h4>저는 제목 4 h4입니다. 저는 자막 4 h4

저는 제목 5 h5입니다. ;</h5>
<h6>저는 제목 6 h6입니다. <small>저는 자막 6 h6</small></h6>

</body>
< /html>

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联子标题</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

</body>
</html>

예제 실행»온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

문단에 강조 텍스트를 추가하려면, 다음 예와 같이 class="lead"를 추가하면 텍스트가 더 크고 두껍고 길어집니다.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引导主体副本</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引导主体副本</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>

예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

Emphasis

HTML의 기본 강조 태그 <small> (텍스트를 상위 텍스트 크기의 85%로 설정) < Strong>(텍스트를 더 굵게 설정), <em>(텍스트를 기울임꼴로 설정)

Bootstrap은 다음 예와 같이 텍스트를 강조하기 위한 몇 가지 클래스를 제공합니다.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 强调</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 强调</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在 <em> 标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

</body>
</html>

예제 실행»

온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요

약어

HTML 요소는 WWW 또는 HTTP와 같은 약어에 대한 마크업을 제공합니다. 부트스트랩은 <abbr> 요소의 스타일을 텍스트 하단에 나타나는 점선 테두리로 정의하며, 해당 요소 위에 마우스를 올리면 전체 텍스트가 나타납니다(<abbr> 제목에 텍스트를 추가하는 경우) 기인하다). 텍스트의 글꼴 크기를 더 작게 하려면 <abbr>에 .initialism을 추가하세요.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩写</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩写</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

주소(Address)

<address> 태그를 사용하면 표시할 수 있습니다. 웹 페이지 정보의 연락처. <address>의 기본값은 display:block;이므로
태그를 사용하여 포함된 주소 텍스트에 줄 바꿈을 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 地址</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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:#">mailto@somedomain.com</a>
</address>

</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 地址</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<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:#">mailto@somedomain.com</a>
</address>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Blockquote

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

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 예 - Quote</title>
<link href="/bootstrap /css /bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js /bootstrap .min.js"></script>
</head>
<body>

<blockquote><p>
이것은 기본 참조 인스턴스입니다. 이는 기본 참조 인스턴스입니다. 이는 기본 참조 인스턴스입니다. 이는 기본 참조 인스턴스입니다. 이는 기본 참조 인스턴스입니다. 이는 기본 참조 인스턴스입니다. 이는 기본 참조 인스턴스입니다. 이는 기본 참조 인스턴스입니다. </p></blockquote>
<blockquote>원본 제목이 포함된 인용문입니다. <small><cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">이것은 오른쪽 정렬된 인용문입니다. <small><cite title="Source Title">원본 제목</cite></small></blockquote>

</body>
</html>

에서 유명한 사람

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引用</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<blockquote><p>
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

List

Bootstrap은 정렬된 목록, 정렬되지 않은 목록 및 정의된 목록을 지원합니다.

순서 목록:순서 목록은 숫자나 기타 순서 문자로 시작하는 목록입니다.
순서가 없는 목록: 순서가 없는 목록은 특별한 순서가 없는 목록을 말하며 전통적인 강조점으로 시작하는 목록입니다. 이러한 강조 표시를 표시하지 않으려면 클래스 .list-unstyled를 사용하여 스타일을 제거할 수 있습니다. 클래스 .list-inline을 사용하여 모든 목록 항목을 같은 줄에 배치할 수도 있습니다.
정의 목록: 이 유형의 목록에서는 각 목록 항목에 <dt> 및 <dd> 요소가 포함될 수 있습니다. <dt>는 사전과 마찬가지로 정의하는 용어를 의미하며 해당 용어가 정의됩니다. 다음으로 <dd>에 대한 설명입니다. dl-horizontal 클래스를 사용하여 <dl> 줄에 속성과 설명을 나란히 표시할 수 있습니다.

아래 예는 이러한 유형의 목록을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 列表</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

</body>
</html>

Instances

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 列表</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

추가 타이포그래피 클래스

다음 표에서는 추가 부트스트랩 타이포그래피 클래스의 예를 제공합니다.

시도해 보세요 .text-uppercase.text-capitalize.initialism.blockquote-reverse.list-unstyled.list-inline.dl-horizontal

← 부트스트랩 그리드 시스템

부트스트랩 코드 →

제출하다

PHP 중국어 웹사이트

Class	Description	Instances
.lead	문단 강조 표시 만들기	그냥
.small	작은 텍스트 설정(상위 텍스트 크기의 85%로 설정)	사용해 보세요
.text-left	텍스트 왼쪽 정렬 설정	사용해 보세요
.text -center	텍스트 가운데 정렬 설정	사용해보기
.text-right	텍스트 오른쪽 정렬 설정	사용해보기
.text-justify	텍스트 정렬, 단락 설정 단락 내 텍스트 화면을 초과하는 문단은 자동으로 줄 바꿈됩니다.
텍스트 대문자를 설정하세요	사용해 보세요. out
단어의 첫 글자를 대문자로 설정하세요	사용해 보세요
에 표시됨 & < abbr> 요소의 텍스트는 작은 문자로 표시됩니다. 글꼴	사용해 보세요
따옴표를 오른쪽 정렬로 설정하세요	사용해 보세요
기본 목록 스타일, 왼쪽 정렬 목록 항목 제거(<에서) ;ul> 및 <ol> 이 클래스는 직계 하위 목록 항목에서만 작동합니다. (중첩된 목록 항목을 제거해야 하는 경우 중첩된 목록에서 이 스타일을 사용해야 합니다)	사용해 보세요
모든 목록 항목을 같은 줄에 배치하세요	사용해 보세요
이 클래스는 <dl> 요소와 <dt> 요소에 적용되는 부동 소수점 및 오프셋을 설정합니다. -scrollable	<pre> 요소를 스크롤 가능하게 만드세요	사용해 보세요

부트스트랩 타이포그래피

Heading

Instance

인라인 자막

저는 타이틀 3 h3입니다.< /h3>< ;h4>저는 제목 4 h4입니다. 저는 자막 4 h4

저는 제목 5 h5입니다. ;</h5><h6>저는 제목 6 h6입니다. <small>저는 자막 6 h6</small></h6></body>< /html>

예제 실행»온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

Emphasis

Instance

약어

Instance

주소(Address)

Instance

Instance

List

Instances

추가 타이포그래피 클래스

PHP 중국어 웹사이트

저는 타이틀 3 h3입니다.< /h3>
< ;h4>저는 제목 4 h4입니다. 저는 자막 4 h4

저는 제목 5 h5입니다. ;</h5>
<h6>저는 제목 6 h6입니다. <small>저는 자막 6 h6</small></h6>

</body>
< /html>

예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요