English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 기본 가이드

Bootstrap 플러그인

Bootstrap 정렬

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

Bootstrap의 정렬 기능을 사용하여 제목, 문단, 목록 및 다른 내장 요소를 생성할 수 있습니다.

제목

Bootstrap는 모든 HTML 제목（h1 h6）의 스타일을 설정하세요. 아래의 예시를 참고하세요：

결과는 다음과 같습니다：

내장 서브 제목

아무 제목에 내장 서브 제목을 추가하려면 간단히 요소 주위에 <small>를 추가하거나 추가하세요 .small class를 추가하면 작은 글자와 더 밝은 색상의 텍스트를 얻을 수 있습니다. 다음 예제와 같이 보입니다：

在线示例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>Bootstrap　示例　-　인라인 부제목</title>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>제목1　h1.　<small>제목1　h1</small></h1>　
	<h2>제목2　h2.　<small>제목2　h2</small></h2>
	<h2>제목3　h2.　<small>제목3　h2</small></h2>
	<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>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

주요 본문 복사체

구절에 강조 텍스트를 추가하려면 다음과 같이 추가할 수 있습니다. 이렇게 하면 더 크고 두꺼운 글자, 더 높은 라인 힐리를 가진 텍스트를 얻을 수 있습니다. 다음 예제와 같이 보입니다：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　주요 본문 복사체/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>주요 본문 복사체/h2>
<p class="lead">이는 주요 본문 복사체 사용법을 보여주는 예제입니다。이는 주요 본문 복사체 사용법을 보여주는 예제입니다。이는 주요 본문 복사체 사용법을 보여주는 예제입니다。이는 주요 본문 복사체 사용법을 보여주는 예제입니다。이는 주요 본문 복사체 사용법을 보여주는 예제입니다。이는 주요 본문 복사체 사용법을 보여주는 예제입니다。이는 주요 본문 복사체 사용법을 보여주는 예제입니다。</p>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

강조

HTML의 기본 강조 태그 <small>（텍스트를 부모 텍스트 크기로 설정） 85%）、<strong>（텍스트를 더 두꺼운 글자로 설정）、<em>（텍스트를 기울임 글자로 설정）。

Bootstrap는 다음 예제와 같이 텍스트를 강조하기 위한 클래스를 제공합니다：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　강조/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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 클래스가 있습니다</p>
<p class="text-success">이 줄의 내용에는 success 클래스가 있습니다</p>
<p class="text-info">이 줄의 내용에는 info 클래스가 있습니다</p>
<p class="text-warning">이 줄의 내용에는 warning 클래스가 있습니다</p>
<p class="text-danger">이 줄의 내용에는 danger 클래스가 있습니다</p>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

약자

HTML 요소는 약자를 표시하기 위한 태그를 제공합니다. 예를 들어, WWW 또는 HTTP. Bootstrap는 <abbr> 태그의 스타일을 텍스트 아래에 표시되는 선형 경계로 정의하고 있습니다. 마우스를 올리면 전체 텍스트가 표시됩니다(만약 <abbr> 태그의 title 속성에 텍스트를 추가하면 됩니다). 더 작은 글꼴의 텍스트를 얻기 위해 .initialism을 <abbr>에 추가하세요.

在线示例

!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　示例　-　약자</title>
　　　<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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;로 설정되어 있으므로, 닫힌 주소 텍스트에 브라이드를 추가하기 위해 <br> 태그를 사용해야 합니다.

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　주소/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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:#">[email protected]</a>
</address>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

인용문(Blockquote)

기본적인 <blockquote>를 사용하여 어떤 HTML 텍스트 옆에도 사용할 수 있습니다. 다른 옵션으로는 <small> 태그를 추가하여 인용의 출처를 표시하거나 class를 사용할 수 있습니다. .pull-right 오른쪽 정렬 인용문. 다음 예제는 이러한 기능을 보여줍니다:

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　인용문</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote>
	<p>
		이것은 기본 인용문 예제입니다。이것은 기본 인용문 예제입니다。이것은 기본 인용문 예제입니다。이것은 기본 인용문 예제입니다。이것은 기본 인용문 예제입니다。이것은 기본 인용문 예제입니다。이것은 기본 인용문 예제입니다。이것은 기본 인용문 예제입니다。
	</p>
</blockquote>
<blockquote>
	이것은 소스 제목이 있는 인용문입니다.
	<small>Some　famous　in　<cite　title="Source　Title">Source　Title</cite></small>
</blockquote>
<blockquote　class="pull-right">
	이것은 오른쪽 정렬된 인용문입니다.
	<small>Some　famous　in　<cite　title="Source　Title">Source　Title</cite></small>
</blockquote>
</body>
</html>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

목록

Bootstrap는 순서 목록, 비순서 목록 및 정의 목록을 지원합니다.

  • 有序列表有序列表는 숫자나 다른 순서가 있는 문자로 시작된 목록을 의미합니다.

  • 无序列表无序列表은 특정 순서가 없는 목록을 의미하며, 전통적인 스타일의 강조점으로 시작된 목록입니다. 이 강조점을 표시하지 않고 싶다면 class를 사용할 수 있습니다. .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。

  • 定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典。接着，<dd> 是 <dt> 的描述。.dl-horizontal은 <dl> 내의 문구 및 설명을 한 줄에 정렬할 수 있습니다. 초반에는 <dl>의 기본 스타일로 쌓여 있으며, 네비게이션 튜브가 점점 펼쳐지면서 한 줄에 정렬됩니다.

下面的示例演示了这些类型的列表：

在线示例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　示例　-　列表</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>
테스트를 보세요 ‹/›

결과는 다음과 같습니다：

更多排版类

아래 표는 Bootstrap의 다른 정렬 클래스의 예제를 제공합니다：

클래스설명예제
.lead구절을 강조 표시합니다한번 시도해 보세요
.text-left텍스트를 왼쪽 정렬합니다한번 시도해 보세요
.text-right텍스트를 오른쪽 정렬합니다한번 시도해 보세요
.text-nowrap화면을 초과하는 구절은 줄바꿈하지 않습니다한번 시도해 보세요
.text-uppercase텍스트를 대문자로 설정합니다한번 시도해 보세요
.initialism소문자를 대문자로 변환하여 <abbr> 요소에 표시된 텍스트를 작은 글씨로 표시할 수 있습니다.한번 시도해 보세요
.list-unstyled기본 목록 스타일을 제거하고, 목록 항목에서 왼쪽 정렬 ( <ul>과 <ol>에서)을 적용합니다. 이 클래스는 직접 자식 목록 항목에만 적용됩니다 　 　(내장된 목록 항목을 제거하려면, 내장된 목록에 이 스타일을 사용해야 합니다)한번 시도해 보세요
.dl-horizontal이 클래스는 float와 offset을 설정하며 <dl> 요소와 <dt> 요소에 적용되며, 구체적인 구현은 예시를 참조하세요한번 시도해 보세요
Bootstrap 코드Bootstrap 그리드 시스템