<h1>부터 < ;h6> 사용 가능<h1> 到 <h6> 均可使用
<p> 默认情况下，从h1到h6的font-size如下所示
2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;
36px -> 30px -> 24px -> 18px -> 14px -> 12px;
.h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式，除了display属性不同外，其他属性与<h1> 到 <h6>样式相同
h1,.h1{
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}<small> 标签或赋予 .small 类的元素，可以用来标记副标题。<small>标签和.small类的元素的样式相同
h1 small,.h1 small, h1 .small, .h1 .small{
font-size: 65%;
font-weight: normal;
line-height: 1;
color: #777;
}<h1>标题一 <small>副标题一</small></h1><h2>标题二 <small>副标题二</small></h2><h3>标题三 <small>副标题三</small></h3><h4>标题四 <small>副标题四</small></h4><h5>标题五 <small>副标题五</small></h5><h6>标题六 <small>副标题六</small></h6>
font-size 设置为 14px，line-height 设置为 20px。这些属性直接赋予 <body> 元素和所有段落元素
<span style="color: #000000;">body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
background-color: #fff;<br> margin:0;
}</span><p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）
p{
margin: 0 0 10px;
}.lead 类可以让段落突出显示
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}<p>一般内容</p><p class="lead">中心内容</p><p>一般内容</p>
mark, .mark {
padding: .2em;
background-color: #fcf8e3;
}small, .small {
font-size: 85%;
}<div>You can use the mark tag to <mark>highlight</mark> text.</div><div><del>This line of text is meant to be treated as deleted text.</del></div><div><s>This line of text is meant to be treated as no longer accurate.</s></div><div><ins>This line of text is meant to be treated as an addition to the document.</ins></div><div><u>This line of text will render as underlined</u></div><div><small>This line of text is meant to be treated as fine print.</small></div><div><strong>rendered as bold text</strong></div><div><em>rendered as italicized text</em></div>
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}<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-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
<abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性
<p>【基本缩略语】
abbr[title], abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #777;
}.initialism 类，可以让 font-size 变得稍微小些
.initialism {
font-size: 90%;
text-transform: uppercase;
}<abbr title="attribute">attr</abbr> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<br> 기본적으로 h1부터 h6까지의 글꼴 크기는 다음과 같습니다
address {
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857143;
}<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}.h1에서 .h6 클래스까지 인라인 속성의 텍스트에 제목 스타일을 지정하는 데에도 제공됩니다. 표시 속성을 제외하면 <small> 태그와 같습니다. 또는 .small 클래스가 할당된 요소를 사용하여 자막을 표시할 수 있습니다. <small>태그와 .small 클래스 요소의 스타일은 동일합니다🎜🎜<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
font-size를 14px로, line-height를 20px로 설정합니다. 이러한 속성은 <body> 요소와 모든 단락 요소🎜🎜<blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
<p>(단락 ) 요소도 설정됩니다. 아래쪽 여백(여백)은 줄 높이의 1/2(예: 10px)과 동일합니다.🎜🎜.blockquote-reverse, blockquote.pull-right {
padding-right: 15px;
padding-left: 0;
text-align: right;
border-right: 5px solid #eee;
border-left: 0;
}.lead 클래스를 추가하면 단락을 작성할 수 있습니다. 강조하세요🎜🎜ul, ol {
margin-top: 0;
margin-bottom: 10px;<ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit<ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>
<ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ol>
.list-unstyled {
padding-left: 0;
list-style: none;
}<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit<ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}<ul class="list-inline"> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> <li>Nulla volutpat</li> </ul>
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt {
font-weight: bold;
}
dt, dd {
line-height: 1.42857143;
}
dd {
margin-left: 0;
}<abbr> 요소로 표시됩니다. 약어 요소에는 title 속성이 있으며 밝은 점선 프레임으로 나타납니다. 마우스를 해당 요소 위로 이동하면 "물음표"가 있는 포인터로 변합니다. 전체 내용을 보려면 약어 위에 마우스를 올리면 됩니다(보조 기술을 사용하는 사용자에게도 표시됨). 하지만 제목 속성🎜🎜[기본 약어]🎜🎜<dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> </dl>
.initialism 클래스를 추가하면 글꼴 크기가 약간 작아질 수 있습니다🎜🎜.dl-horizontal dt {float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}<dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> </dl>
<br>를 추가하세요🎜🎜code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}kbd {
padding: 2px 4px;
font-size: 90%;
color: #fff;
background-color: #333;
border-radius: 3px;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}中即可表现为引用样式。对于直接引用，建议用 <p> 标签blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; }로그인 후 복사로그인 후 복사<p><br> <p>【多种引用样式】 <p> 对于标准样式的<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>로그인 후 복사로그인 후 복사，可以通过几个简单的变体就能改变风格和内容 <p> 1、命名来源 <p> 添加
.pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}<div>For example, <code><section></code> should be wrapped as inline. </div> <div>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> </div> <div> <pre class="brush:php;toolbar:false"><p>Sample text here...</p>
<p>Sample text here...</p>
위 내용은 타이포그래피에 부트스트랩 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
