부트스트랩 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>

예제

<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>

표시 제목

예제

<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>

<small>

Bootstrap 4에서는 HTML <small>요소를 사용하여 제목에 더 가벼운 보조 텍스트를 만든다.

예제

<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>

<mark>

Bootstrap 4 <mark>는 노란색 배경색과 일부 패딩을 사용하여 HTML 요소의 스타일을 지정한다.

예제

<p>Use the mark element to <mark>highlight</mark> text.</p>

<abbr>

Bootstrap 4 <abbr>는 점선 테두리 하단으로 HTML 요소의 스타일을 지정한다.

예제

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

<blockquote>

다른 소스의 콘텐츠 블록을 인용할 때 .blockquote 클래스를 a에 추가하자.

예제

<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>

<dl>

Bootstrap 4 는 다음과 같은 방식으로 HTML 요소의 스타일을 지정한다.

예제

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

<code>

Bootstrap 4 는 다음과 같은 방식으로 HTML 요소의 스타일을 지정한다.

예제

The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.

<kbd>

Bootstrap 4 는 다음과 같은 방식으로 HTML 요소의 스타일을 지정한다.

예제

Use <kbd>ctrl + p</kbd> to open the Print dialog box.

<pre>

Bootstrap 4 <pre>는 다음과 같은 방식으로 HTML 요소의 스타일을 지정한다.

예제

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기