Bootstrap-v5-页面内容(排版)
一、排版包括哪些内容
- 标题(Headings)
- 自定义标题(Customizing headings)
- 显示标题(Display headings)
- 段落突出显示(Lead)
- 内联文本元素(Inline text elements)
- 缩写(Abbreviations)
- 引用(Blockquotes)
- 对齐(Alignment)
- 列表(Lists)
二、排版实例
2.1 标题(Headings)
<!-- 标题 --> <h1>你好Bootstrap</h1> <h2>你好Bootstrap</h2> <h3>你好Bootstrap</h3> <h4>你好Bootstrap</h4> <h5>你好Bootstrap</h5> <h6>你好Bootstrap</h6> <hr> <!-- 或者 --> <p class="h1">h1. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p> <p class="h3">h3. Bootstrap heading</p> <p class="h4">h4. Bootstrap heading</p> <p class="h5">h5. Bootstrap heading</p> <p class="h6">h6. Bootstrap heading</p>
2.2 自定义标题(Customizing headings)
<h3> Fancy display heading <small class="text-muted">With faded secondary text</small> </h3>
2.3 显示标题(Display headings)
<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> <h1 class="display-5">Display 5</h1> <h1 class="display-6">Display 6</h1>
2.4 段落突出显示(Lead)
<p class="lead"> This is a lead paragraph. It stands out from regular paragraphs. </p>
2.5 内联文本元素(Inline text elements)
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined.</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p>
2.6 缩写(Abbreviations)
<p><abbr title="attribute">attr</abbr></p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
2.7 引用(Blockquotes)
<blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote>
2.8 对齐(Alignment)
<figure class="text-center"> <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure> <figure class="text-end"> <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure>
2.9 列表(Lists)
2.9.1 无样式列表(Unstyled)
<ul class="list-unstyled"> <li>This is a list.</li> <li>It appears completely unstyled.</li> <li>Structurally, it's still a list.</li> <li>However, this style only applies to immediate child elements.</li> <li>Nested lists: <ul> <li>are unaffected by this style</li> <li>will still show a bullet</li> <li>and have appropriate left margin</li> </ul> </li> <li>This may still come in handy in some situations.</li> </ul>
2.9.2 内联列表(inline)
<ul class="list-inline"> <li class="list-inline-item">This is a list item.</li> <li class="list-inline-item">And another one.</li> <li class="list-inline-item">But they're displayed inline.</li> </ul>
2.9.3 描述列表对齐(Description list alignment)
<dl class="row"> <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">Term</dt> <dd class="col-sm-9"> <p>Definition for the term.</p> <p>And some more placeholder definition text.</p> </dd> <dt class="col-sm-3">Another term</dt> <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd> <dt class="col-sm-3">Nesting</dt> <dd class="col-sm-9"> <dl class="row"> <dt class="col-sm-4">Nested definition list</dt> <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd> </dl> </dd> </dl>