版式

版式-Bootstrap 5和Material Design 2.0

Bootstrap排版的文档和示例,包括全局设置,标题,正文 文字,列表等。

全局设置:

MDB设置基本的全局显示,版式和链接样式。当需要更多控制时,请检查 出 文本实用程序类

  • 为了获得更具包容性和可访问性的类型比例,我们假定浏览器为默认根目录 font-size (通常为16像素),以便访问者可以自定义其浏览器默认设置为 需要。
  • 使用 $font-family-base, $font-size-base,和 $line-height-base 属性作为应用于我们的印刷基础 <body>.
  • 通过设置全局链接颜色 $link-color.
  • 采用 $body-bg 设置一个 background-color<body> (#fff 通过默认)。

这些样式可以在 _reboot.scss, 和全局变量是 定义于 _variables.scss.确保设置$font-size-baserem.


基本构成

文档外观的示例组成。

Main website heading (h1)

Website subheading (h4)


Section heading (h3)


Component heading (h5)

Component subheading

(p + .small .text-muted .text-uppercase)

Component alternative subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?

Component heading (h5)

Component subheading

(p + .small .text-muted .text-uppercase)

Component alternative subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?

Component heading (h5)

Component subheading

(p + .small .text-muted .text-uppercase)

Component alternative subheading (h6)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. A nemo commodi odio veniam nisi? Cupiditate nobis doloremque unde in ut, consequatur reprehenderit saepe iure perspiciatis, veniam facilis asperiores deleniti at?


标题

所有HTML标题,<h1> 通过 <h6>, 可用。

Heading Example
<h1></h1> h1. MDB heading
<h2></h2> h2. MDB heading
<h3></h3> h3. MDB heading
<h4></h4> h4. MDB heading
<h5></h5> h5. MDB heading
<h6></h6> h6. MDB heading

          <h1>h1. MDB heading</h1>
          <h2>h2. MDB heading</h2>
          <h3>h3. MDB heading</h3>
          <h4>h4. MDB heading</h4>
          <h5>h5. MDB heading</h5>
          <h6>h6. MDB heading</h6>
        

样式标题

通过 .h6 类的 .h1 也适用于需要 与标题的字体样式匹配,但不能使用关联的HTML元素。

h1. MDB heading


h2. MDB heading


h3. MDB heading


h4. MDB heading


h5. MDB heading


h6. MDB heading


            <p class="h1">h1. MDB heading</p>
            <p class="h2">h2. MDB heading</p>
            <p class="h3">h3. MDB heading</p>
            <p class="h4">h4. MDB heading</p>
            <p class="h5">h5. MDB heading</p>
            <p class="h6">h6. MDB heading</p>
          

自定义标题

使用随附的实用程序类从Bootstrap重新创建小的辅助标题文本 3。

Fancy display heading With faded secondary text


            <h3>
              Fancy display heading
              <small class="text-muted">With faded secondary text</small>
            </h3>
          

显示标题

传统的标题元素旨在最有效地处理您页面内容的内容。什么时候 您需要一个醒目的标题,请考虑使用 显示标题-更大,更自觉的标题样式。

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6

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

显示标题是通过 $display-font-sizes萨斯地图和两个 变量 $display-font-weight$display-line-height.


      $display-font-sizes: (
        1: 5rem,
        2: 4.5rem,
        3: 4rem,
        4: 3.5rem,
        5: 3rem,
        6: 2.5rem
      );

      $display-font-weight: 300;
      $display-line-height: $headings-line-height;
    

通过添加 .lead 使段落突出。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.


          <p class="lead">
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est
            non commodo luctus.
          </p>
        

内联文字元素

常见的嵌入式HTML5元素的样式。

You can use the mark tag to 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</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>
        

请注意,这些标记应用于语义目的:

  • <mark> 表示标记或突出显示以供参考的文本,或者 表示法的目的。
  • <small> 代表旁注和小字体,例如版权和 法律文本。
  • <s> 表示不再相关或不再准确的元素。
  • <u> 表示应以某种方式呈现的嵌入式文本范围 表示它具有非文本注释。

如果要设置文本样式,则应改用以下类:

  • .mark 将采用与以下样式相同的样式 <mark>.
  • .small将采用与以下样式相同的样式<small>.
  • .text-decoration-underline 将采用与以下样式相同的样式 <u>.
  • .text-decoration-line-through 将采用与以下样式相同的样式 <s>.

笔记

注释是小的组件,在插入其他信息时非常有帮助。

Note primary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note secondary: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note success: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note danger: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note warning: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note info: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note light: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?


          <p class="note note-primary">
            <strong>Note primary:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
            delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
          </p>

          <p class="note note-secondary">
            <strong>Note secondary:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing
            elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui
            necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis
            soluta porro?
          </p>

          <p class="note note-success">
            <strong>Note success:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
            delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
          </p>

          <p class="note note-danger">
            <strong>Note danger:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
            delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
          </p>

          <p class="note note-warning">
            <strong>Note warning:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
            delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
          </p>

          <p class="note note-info">
            <strong>Note info:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
            delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
          </p>

          <p class="note note-light">
            <strong>Note light:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
            delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
          </p>
        

文字工具

使用我们的更改文字对齐方式,变换,样式,粗细,行高,装饰和颜色 文字工具色彩工具.


缩略语

HTML的样式化实现 <abbr> 缩写元素和 首字母缩写词以显示悬停时的扩展版本。缩写带有默认下划线, 获取帮助光标,以提供有关悬停和辅助用户的更多上下文 技术。

.initialism 缩写为略小的字体大小。

attr

HTML


          <p><abbr title="attribute">attr</abbr></p>
          <p>
            <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
          </p>
        

块引用

用于引用文档中其他来源的内容块。包 <blockquote class="blockquote"> 周围任何 的HTML 作为报价。

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


          <blockquote class="blockquote">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
            </p>
          </blockquote>
        

命名来源

HTML规范要求将blockquote归因放在 <blockquote>. 提供归因时,请包装您的 <blockquote> 在一个 <figure> 并使用 <figcaption> 或块级元素(例如,<p>) w与 .blockquote-footer 类。确保将源工作的名称包装在 <cite> 也一样

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


            <figure>
              <blockquote class="blockquote">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                  ante.
                </p>
              </blockquote>
              <figcaption class="blockquote-footer">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </figcaption>
            </figure>
          

对准

根据需要使用文本实用程序来更改块引用的对齐方式。

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


            <figure class="text-center">
              <blockquote class="blockquote">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                  ante.
                </p>
              </blockquote>
              <figcaption class="blockquote-footer">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </figcaption>
            </figure>
          

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


            <figure class="text-end">
              <blockquote class="blockquote">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                  ante.
                </p>
              </blockquote>
              <figcaption class="blockquote-footer">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </figcaption>
            </figure>
          

清单

无样式

删除默认的 list-style 和列表项的左边距(立即子级) 只要)。这仅适用于直接子项列表项,这意味着您将 还需要为任何嵌套列表添加类。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

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

排队

删除列表的项目符号,并结合使用以下两种浅色 margin 类, .list-inline .list-inline-item

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

            <ul class="list-inline">
              <li class="list-inline-item">Lorem ipsum</li>
              <li class="list-inline-item">Phasellus iaculis</li>
              <li class="list-inline-item">Nulla volutpat</li>
            </ul>
          

说明列表对齐

通过使用我们的网格系统的预定义类(或 语义混合)。对于更长的期限,您可以选择添加一个 .text-truncate 类可使用省略号截断文本。

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

            <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">Euismod</dt>
              <dd class="col-sm-9">
                <p>
                  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                </p>
                <p>Donec id elit non mi porta gravida at eget metus.</p>
              </dd>

              <dt class="col-sm-3">Malesuada porta</dt>
              <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

              <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
              <dd class="col-sm-9">
                Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
                fermentum massa justo sit amet risus.
              </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">
                    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
                  </dd>
                </dl>
              </dd>
            </dl>