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

Bootstrap4 기본 튜토리얼

Bootstrap4 문자排版

Bootstrap 4 기본 설정

Bootstrap 4 기본의 font-size는 16px, line-height는 1.5。

기본의 font-family는 "Helvetica Neue", Helvetica, Arial, sans-serif.

또한, 모든 <p> 요소 margin-top: 0, margin-bottom: 1rem (16px)를 정의했습니다。

<h1> - <h6>

Bootstrap에서 모든 HTML 제목(h1 까지 h6의 스타일입니다. 아래 예시를 참조하세요：

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>h1　Bootstrap 제목2.5rem　=　40px)</h1>
　　<h2>h2　Bootstrap 제목2rem　=　32px)</h2>
　　<h2>h2　Bootstrap 제목1.75rem　=　28px)</h2>
　　<h4>h4　Bootstrap 제목1.5rem　=　24px)</h4>
　　<h5>h5　Bootstrap 제목1.25rem　=　20px)</h5>
　　<h6>h6　Bootstrap 제목1rem　=　16px)</h6>
</div>
</body>
</html>
테스트를 보세요 ‹/›

Display 제목 클래스

Bootstrap는 제목 스타일을 제어하기 위해 네 가지 Display 클래스를 제공합니다: .display-1, .display-2, .display-3, .display-4。

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Display 제목</h1>
　　<p>Display 제목은 더 크고 더 두꺼운 글자 스타일을 출력할 수 있습니다。</p>
　　<h1　class="display-1">Display　1</h1>
　　<h1　class="display-2">Display　2</h1>
　　<h1　class="display-3">Display　3</h1>
　　<h1　class="display-4">Display　4</h1>
</div>
</body>
</html>
테스트를 보세요 ‹/›

<small>

Bootstrap에서 4 중 HTML <small> 요소는字号이 작고 색이 연 텍스트를 생성하는 데 사용됩니다:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>더 작은 텍스트 제목</h1>
　　<p>small 요소는字号이 작고 색이 연 텍스트를 표시하는 데 사용됩니다:</p>　　　　　　　
　　<h1>h1　제목 <small> 부제목</small></h1>
　　<h2>h2　제목 <small> 부제목</small></h2>
　　<h2>h2　제목 <small> 부제목</small></h2>
　　<h4>h4　제목 <small> 부제목</small></h4>
　　<h5>h5　제목 <small> 부제목</small></h5>
　　<h6>h6　제목 <small> 부제목</small></h6>
</div>
</body>
</html>
테스트를 보세요 ‹/›

<mark>

Bootstrap 4 <mark>은 노란 배경과 일정한 내간격을 가지도록 정의됩니다:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>강조 텍스트</h1>　　　　
　　<p>mark 요소를 사용하여 <mark> 강조</mark> 텍스트。</p>
</div>
</body>
</html>
테스트를 보세요 ‹/›

<abbr>

Bootstrap 4 HTML <abbr> 요소의 스타일은 텍스트 아래에 투명한 실선 테두리를 표시합니다:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Abbreviations</h1>
　　<p>abbr 요소는 축약 또는 약자를 표시하는 데 사용됩니다:</p>
　　<p><abbr　title="World　Health　Organization">WHO</abbr>가1948년.</p>
</div>
</body>
</html>
테스트를 보세요 ‹/›

<blockquote>

참조된 내용에 대해 <blockquote>에 .blockquote 클래스를 추가할 수 있습니다 :

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Blockquotes</h1>
　　<p>blockquote 요소는 다른 출처의 내용을 표시하는 데 사용됩니다:</p>
　　<blockquote　class="blockquote">
　　　　<p>50년간, 세계 자연 보호 기금(WWF)은 자연의 미래를 보호해 왔습니다. 세계 자연 보호 기금(WWF)은100个国家/지역에서 활동을 수행하고 있습니다，
　　　　미국에서120만 회원과 전 세계에서500만 회원의 지지。</p>
　　　　<footer　class="blockquote-footer">From　WWF's　website</footer>
　　</blockquote>
</div>
</body>
</html>
테스트를 보세요 ‹/›

<dl>

Bootstrap 4 HTML <dl> 요소의 스타일을 다음과 같이 정의합니다:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>설명 목록</h1>　　　　
　　<p>dl 요소는 설명 목록을 나타냅니다:</p>
　　<dl>
　　　　<dt>커피</dt>
　　　　<dd>-　검은 뜨거운飲料</dd>
　　　　<dt>우유</dt>
　　　　<dd>-　백 냉饮</dd>
　　</dl>　　　　　
</div>
</body>
</html>
테스트를 보세요 ‹/›

<code>

Bootstrap 4 HTML <code> 요소의 스타일을 다음과 같이 정의합니다:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>코드 부분</h1>
　　>코드 부분</p>
　　<p>일부 코드 요소를 code 요소 안에 넣을 수 있습니다:</<p>다음 HTML 요소:　<code>span</code>,　<code>section</code>,　와　<code>div</p>
</div>
</body>
</html>
테스트를 보세요 ‹/›

code>　문서 일부를 정의하는 데 사용됩니다。<

Bootstrap 4 <kbd>

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1define HTML <kbd> 요소의 스타일은 다음과 같습니다:/h1>
　　>키보드 입력</p>
　　<p>컨트롤을 누른 상태에서 입력하는 것을 나타내려면 kbd 요소를 사용하세요:<　+　p</kbd>프린트 대화 상자를 엽니다.</p>
</div>
</body>
</html>
테스트를 보세요 ‹/›

<pre>

Bootstrap 4 HTML <pre> 요소의 스타일을 정의하면 다음과 같습니다:

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
<h1>다중 행 코드</h1>
<p>다중 행 코드를 사용하려면 pre 요소를 사용하세요:</p>
<pre>
프리뷰 요소의 텍스트
고정된 너비로 표시됩니다
폰트를 유지하며
공간과
줄 바꿈 문자.
</pre>
</div>
</body>
</html>
테스트를 보세요 ‹/›

更多排版类

다음 표는 Bootstrap4 더 많은 레이아웃 클래스 예제:

클래스 이름설명예제
.font-weight-bold粗体 텍스트시도해 보세요
.font-weight-normal보통 텍스트시도해 보세요
.font-weight-light더細한 텍스트시도해 보세요
.font-italic이탈릭 텍스트시도해 보세요
.lead단락을 더 강조하려면시도해 보세요
.small더 작은 텍스트를 지정하세요 (부모 요소의 85% )시도해 보세요
.text-left왼쪽 정렬시도해 보세요
.text-center가운데 정렬시도해 보세요
.text-right오른쪽 정렬시도해 보세요
.text-justify텍스트 정렬을 설정하고, 문단에서 스크린 밖 부분이 자동으로 개행됩니다시도해 보세요
.text-nowrap문단에서 스크린 밖 부분이 개행되지 않습니다시도해 보세요
.text-lowercase텍스트를 소문자로 설정합니다시도해 보세요
.text-uppercase텍스트를 대문자로 설정합니다시도해 보세요
.text-capitalize단어의 첫 글자를 대문자로 설정합니다시도해 보세요
.initialism<abbr> 요소 내의 텍스트를 소문자로 표시하고, 소문자를 대문자로 변환할 수 있습니다시도해 보세요
.list-unstyled기본 목록 스타일을 제거하고, 목록 항목에서 왼쪽 정렬 ( <ul> 및 <ol>에서)를 설정합니다. 이 클래스는 직접 자식 목록 항목에만 적용됩니다 　 　(끼임 목록 항목을 제거하려면, 끼임 목록에서 이 스타일을 사용해야 합니다)시도해 보세요
.list-inline모든 목록 항목을 동일한 줄에 배치합니다시도해 보세요
.pre-scrollable<pre> 요소를 스크롤 가능하게 하고, 코드 블록 영역의 최대 높이는340px, 이 높이를 초과하면 Y축에서 스크롤 바가 나타납니다시도해 보세요
Bootstrap4 색상Bootstrap4 그리드 시스템