重置

针对 HTML 的特定元素重置样式,以便 Bootstrap 能在各种浏览器下表现一致。

方式

Bootstrap 重置了大部分基本的HTML元素的视觉效果,不过这只能通过调用特定的 class 来实现,比如 <table> 的样式,需要使用 .table, .table-bordered 类来实现其重置后统一的视觉效果。

以下是为什么我们要重置的原因:

  • 更新部分浏览器的预设值,在可变动的文字间距上使用 rem 替代 em。
  • 避免 margin-top。垂直边缘可能会发生重叠,产生无法预料的错误。更重要的是 margin 应该是单向、简单的思维。
  • 为了在设备之间之间轻松缩放,block 元素应当在 margin 上采用 rem。
  • 尽可能使用继承将字体相关属性的声明保持在最低限度。

默认的效果

<html><body> 已被重置为一些预设的值. 具体有这些改变:

  • 每个地方都设置了 box-sizing , 以及在 border-box 设置 *::before *::after。 这可确保由于填充或边框而不会超出声明的宽度。
    • <html>上没有声明基本字体大小,但假定为16px(浏览器默认值)。 font-size 应用于 <body> ,以便通过媒体查询轻松响应类型扩展,同时尊重用户偏好并确保更易于访问的方法。
  • <body> 还设置全局字体系列,行高和文本对齐。 稍后由某些表单元素继承,以防止字体不一致。
  • 为安全起见,<body> 具有声明的背景颜色,默认为#fff。

浏览器字体

目前放弃了针对浏览器字体的覆盖,因为不同系统的可用字体不一样,因此由浏览器的默认设置来决定应该能获得最佳的显示效果。

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

font-family 应用于 <body>,并在 Bootstrap 中自动继承。 要切换全局 font-family ,请更新 $font-family-base 并重新编译Bootstrap。

标题和段落

重置所有标题元素 - 例如,<h1> - 和 <p> 以删除其边距顶部。 标题添加了 margin-bottom: .5rem ,段落则是添加了 margin-bottom: 1rem。这样看起来更有美感。

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap heading

列表

刪除全部列表 <ul><ol><dl> 中的 margin-top,並设置为 margin-bottom: 1rem。嵌套列表沒有 margin-bottom

  • 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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

为了更简单的样式,清晰的层次结构和更好的间距,描述列表重置了边距。 <dd>margin-left重置为0并添加 margin-bottom: .5rem<dt> 是粗体。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

预先格式化的文字

重置 <pre> 元素以移除其 margin-top 并使用 rem 单位作为其 margin-bottom

.example-element {
  margin-bottom: 1rem;
}
        

表格

表格略微调整为样式<caption>,折叠边框,并确保始终保持一致的文本对齐。 text-align 类附带的边框,填充等更改。

This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

表单

已重置动各种表单元素以实现更简单的基本样式。 以下是一些最显着的变化:

  • <fieldset> 没有边框,填充或边距以便包覆独立输入和成组输入。
  • <legend> 和fieldsets一样,<legend> 已经被重新定义样式以便显示为类型的标题。
  • <label> 设定被为 display: inline-block 以便让 margin 应用。
  • 透过Normalize于<input><select><textarea>s,和<button> ,重置删除了他们的 margin 并同样设定line-height: inherit
  • <textarea> 修改为仅可调整垂直尺寸,因为调整水平宽度通常“破坏”了页面配置。

下面将说明这些变化以及更多变化。

Example legend

100

其他调整的HTML元素

Address

更新<address>元素以将浏览器默认字体样式从斜体重置为正常。 line-height 现在也被继承,并且 margin-bottom: 1rem 已被添加。 <address> 用于显示联系信息。 通过使用 <br> 结束行来保留格式。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

引用段落

Blockquotes的预设margin1em 40px,因此我们将其重新设定为0 0 1rem以便更符合其他元素的设定。

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

Someone famous in Source Title

内联元素

<abbr> 元素接收基本样式,使其在段落文本中脱颖而出。

Nulla attr vitae elit libero, a pharetra augue.

摘要

cursor 摘要上的默认值是text,因此我们将其重置为pointer通过单击来传达元素可以与之交互。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 [hidden] 属性

HTML5添加了一个名为 [hidden] 的新全局属性display: none默认情况下将其设置为样式。借用PureCSS的一个想法,我们通过[hidden] { display: none !important; }帮助防止display被意外覆盖来改进这个默认值。虽然[hidden]在IE10本身不支持,但CSS中的显式声明可以解决这个问题。

<input type="text" hidden>
jQuery的不兼容问题

[hidden]与jQuery $(...).hide()$(...).show()方法不兼容。因此,我们目前并不特别支持[hidden]管理display

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

仅仅切换元素的可见性,这意味着其 display 不被修改和元素还会影响文档的流程,请使用的 .invisible 类来代替。

排版

Bootstrap 排版功能,包括全局设置,标题,正文,列表等。

全局设定

Bootstrap 设置基本的全局显示,排版和链接样式。 当需要更多控制时,请查看文本工具。

  • 使用本机字体为每个操作系统和设备选择最佳字体系列。
  • 更具包容性和可访问的缩放设置,我们假设浏览器默认根字体大小(通常为16px),以便访问者可以根据需要自定义其浏览器默认值。
  • 使用$font-family-base$font-size-base和$$line-height-base属性作为应用于<body>的排版基础。
  • 通过 $link-color 设置全局链接颜色,并仅在 :hover 上应用链接下划线。
  • 使用$body-bgbackground-color 上设置背景颜色(默认情况下为#fff)。

这些样式可以在 _reboot.scss 中找到,全局变量在 _variables.scss 中定义。 确保在 $font-size-base 中设置 rem

标题

所有HTML标题<h1><h6>都可用。

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

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

同时提供 .h1 到 .h6 的 Class,因为当你想匹配某一标题的字体样式,但不能直接使用 HTML 元素时。

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

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

定制标题样式

使用包含的工具类创建 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
<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>

引言

可以使用 .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类也可用于应用与<mark><small>相同的样式,同时避免标记带来的任何不必要的语义含义。

虽然上面没有展示,但可以在HTML5中使用<b><i><b>旨在突出显示单词或短语而不会传达额外的重要性,而 <i> 主要用于声音,技术术语等。

文本工具

使用文本工具和颜色工具更改文本对齐,转换,样式,重量和颜色。

缩写

用于缩写和首字母缩略词的HTML的 <abbr> 元素的程式化实现,以显示悬停时的扩展版本。 缩写具有默认下划线并获得帮助光标以提供有关悬停和辅助技术用户的其他上下文。

.initialism添加到缩写中以获得略小的字体大小。

attr

HTML

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

引用

用于引用文档中其他来源的内容块。 将任何HTML包含在<blockquote class="blockquote">里作为引用。

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

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

署名

<footer class="blockquote-footer"> 里添加需要署名的内容。 并在 <cite> 里添加作者。

我们中国的最伟大最永久,而且最普遍的“艺术”是男人扮女人。

来自 鲁迅
<blockquote class="blockquote">
  <p class="mb-0">我们中国的最伟大最永久,而且最普遍的“艺术”是男人扮女人。</p>
  <footer class="blockquote-footer">来自 <cite title="Source Title">鲁迅</cite></footer>
</blockquote>

对齐

根据需要使用文本工具来更改 blockquote 的对齐方式。

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

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

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

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

列表

无特效列表

删除列表项上的默认列表样式和左边距(仅限直接子项)。 仅适用于直接子列表项,这意味着你还需要为任何嵌套列表添加类。

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

行内列表

删除列表的项目符号并使用两个类的组合应用一些微小的边距,使用 .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>

响应式排版设计

响应式排版是指通过简单地在一系列媒体查询中调整根元素的 font-size 来缩放文本和组件。 Bootstrap 不会为你执行此操作,但如果你需要,它可以很容易地添加。

这是一个例子。 根据你希望的任何字体大小和媒体查询进行调整。

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

代码

这里教你如何使用 bootstrap 来展示多行代码

行内代码

<code> 里编写行内代码,请务必转义HTML的尖括号。

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

大段引用

<pre> 里编写多行代码。 再次确保在代码中转义任何尖括号以进行正确渲染。 你可以选择添加 .pre-scrollable 类,它将设置最大高度为340px并提供y轴滚动条。

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

变量

使用 <var> 标记变量。

y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

按钮

你可以使用 <kbd> 来标记键盘上的按钮,这看起来很生动。

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
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>

输出

使用 <samp> 标签来展示可能的输出结果

This text is meant to be treated as sample output from a computer program.
<samp>This text is meant to be treated as sample output from a computer program.</samp>

图片

添加响应式设计的图片,这很简单,只需要给图片加上一些类就可以了。

响应式图片

Bootstrap 中,给图片添加 .img-fluid 类,这样它就变成了一张响应式设计的图片。另外添加 max-width: 100%;height: auto; 可以让图片根据父元素的大小进行等比例缩放。

Generic responsive image
<img src="..." class="img-fluid" alt="Responsive image">
SVG 在 IE 10 上的表现

在Internet Explorer 10中,具有 .img-fluid 的SVG图像的大小不成比例。 要解决此问题,请添加 width: 100% \9; 。 由于此调整不能正确地调整其他图像格式的大小,因此Bootstrap不会自动应用它。

缩略图

除了使用 border-radius 工具, 你还可以使用 .img-thumbnail 类来设置一个1像素宽度的边框。

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-thumbnail">

对齐

给图像设置浮动类进行对齐。 块级图像可以使用 .mx-auto margin 工具居中。

A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
A generic square placeholder image with rounded corners
<img src="..." class="rounded mx-auto d-block" alt="...">
A generic square placeholder image with rounded corners
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Picture 标签

如果使用 <picture> 元素为特定的 <img> 指定多个<source>元素,请确保将 <img> 类添加到 <img> 而不是 <picture> 标记。

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

表格

创建基于 Bootstrap 的表格。

例子

由于表格在日历和日期选择器等第三方小部件中的广泛使用,我们设计的表格是可选择的。 只需将基类 .table 添加到任何 <table> ,然后就可以使用自定义样式或各种包含的修饰符类进行扩展。

使用最基本的.table标记,下面的例子是基于.table-*的表格在 Bootstrap 中的外观。 所有表格样式都在 Bootstrap 4 中继承,这意味着任何嵌套表格的样式都与父表格相同。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

你还可以使用 .table-dark 在深色背景上使用浅色文本反转颜色。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

表头选项

与表格和暗表类似,使用修饰符类 .thead-light.thead-dark 使 <thead> 显示为浅灰色或深灰色。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

带有条纹的行

使用 .table-striped 来给 <tbody> 的所有行添加条纹效果。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

表格边框

加上这个 .table-bordered 类可以给表格内的所有单元添加边框。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

去除表格边框

使用 .table-borderless 类来移除表格里的所有边框。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderless 还可以用在黑色模式。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

高亮

使用 .table-hover 类可以使 <tbody> 里的内容在获得鼠标停留时高亮显示。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

更小的表格

使用 .table-sm 类可以让表格所有单元的间距缩小一半。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

表格工具类

使用表格工具类可以给表格的列或者行单独上色。

Class Heading Heading
Active Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

暗色表格不提供常规表格背景类,但是,你可以使用文本或背景工具来实现类似的样式。

# Heading Heading
1 Cell Cell
2 Cell Cell
3 Cell Cell
4 Cell Cell
5 Cell Cell
6 Cell Cell
7 Cell Cell
8 Cell Cell
9 Cell Cell
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
使用辅助技术传达内容

使用颜色添加含义仅提供视觉指示,这些指示不会传达给辅助技术的用户 - 例如屏幕阅读器。 确保颜色表示的信息从内容本身(例如可见文本)中显而易见,或者通过其他方式包含,例如使用 .sr-only 类隐藏的附加文本。

通过使用 .table-responsive{-sm|-md|-lg|-xl} 配合任意 .table 来创建响应式表,使表在每个最大宽度断点处水平滚动,最多(但不包括)576px,768px, 分别为992px和1120px。

请注意,由于浏览器当前不支持范围上下文查询,因此我们通过使用更高的值来解决具有小数宽度的 min-max- 前缀和 viewport 的限制(例如,在高dpi设备的某些条件下可能会出现这种情况) 这些比较的精确度。

标题

<caption>的功能类似于表格的标题。 它可以帮助屏幕阅读器的用户找到一张桌子,了解它的含义,并决定是否要阅读它。

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

响应式设计的表格

响应式设计的表格允许水平滚动。 通过使用 .table 包装 .table-responsive ,使所有 viewport 都能响应。 或者,使用 .table-responsive{-sm|-md|-lg|-xl}选择一个最大断点,通过该断点可以获得响应。

.table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

垂直截断

响应表使用 overflow-y: hidden ,它会截断超出表格底部或顶部边缘的任何内容。 特别是,这可以截断下拉菜单和其他第三方小部件。

始终水平滚动

给需要水平滚动的表添加 .table-responsive 类。

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

选择性设置水平滚动

使用 .table-responsive{-sm|-md|-lg|-xl} 类来使表格再某些特定的情况下变成水平滚动的设计。

在响应样式应用于特定 viewport 宽度之前,这些表格可能会崩溃。

# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>

图文区 - Figures

展示图片及其说明

如果需要显示带有标题的图像,请考虑使用<figure>(一种全新的玩法)。

使用包含的 .figure.figure-img.figure-caption 类为HTML5 <figure><figcaption> 元素提供一些基本样式。 <figure> 中的图像没有明确的大小,因此请务必将 .img-fluid 类添加到 <img> 以使其成为响应式设计的图像。

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

使用文本工具可以轻松对齐 figure 中标题。

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
<figure class="figure">
  <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>