文字排版 (Typography)

標題

h1.h1

h2.h2

h3.h3

h4.h4

h5.h5
h6.h6

顯示標題

.display-1

.display-2

.display-3

.display-4

前導主題

添加一個 .lead,讓一個段落突出。

p.lead 添加一個 .lead,讓一個段落突出。

行內文本元素

You can use the mark tag to mark.highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

p You can use the mark tag to
  mark highlight
  |  text.
p
  del This line of text is meant to be treated as deleted text.
p
  s This line of text is meant to be treated as no longer accurate.
p
  ins This line of text is meant to be treated as an addition to the document.
p
  u This line of text will render as underlined
p
  small This line of text is meant to be treated as fine print.
p
  strong This line rendered as bold text.
p
  em This line rendered as italicized text.

縮寫

attr HTML

p
  abbr(title='attribute') attr
  abbr.initialism(title='HyperText Markup Language') HTML

引用

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

blockquote.blockquote
  p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

引用來源

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

p.mb-0
  | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  footer.blockquote-footer
      | Someone famous in
      cite(title='Source Title') Source Title

反轉排版

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

blockquote.blockquote.blockquote-reverse
  p.mb-0
  |    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  footer.blockquote-footer
      | Someone famous in
      cite(title='Source Title') Source Title

列表-無樣式

  • Lorem ipsum
ul.list-unstyled
  li Lorem ipsum

列表-行內

  • Lorem ipsum
  • Phasellus iaculis
ul.list-inline
  li.list-inline-item Lorem ipsum
  li.list-inline-item Phasellus iaculis

列表-行內

Description lists
A description list is perfect for defining terms.
Description lists
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
dl.row
  dt.col-sm-3 Description lists
  dd.col-sm-9 A description list is perfect for defining terms.
  dt.col-sm-3 Description lists
  dd.col-sm-9
      dl.row
          dt.col-sm-4 Nested definition list
          dd.col-sm-8 Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.