# Docker 文档编译 - 创建标签（Tab）页

**URL:** <https://www.isharkfly.com/t/docker-tab/725>\
**Category:** DevOps\
**Created:** [November 21, 2020, 4:02pm UTC](https://www.isharkfly.com/t/docker-tab/725 "2020-11-21T16:02:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![honeymoose](https://www.isharkfly.com/user_avatar/www.isharkfly.com/honeymoose/32/20796_2.png) [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Post date:** [November 21, 2020, 4:02pm UTC](https://www.isharkfly.com/t/docker-tab/725/1 "2020-11-21T16:02:51Z")

</div>

为了在页面中使用标签页，例如测试页面中的标签页：[https://docker.ossez.com/test/](https://docker.ossez.com/test/) 这个需要使用 HTML 文件。  
标签页使用的是 Bootstrap CSS/JS，因此请参考相关的文档来获得有关标签页使用的更多有关内容和信息。针对标准的水平标签页，你可以拷贝和粘贴下面的表单内容，在上面的表单内容中关键的地方在 `href="#id"` 和 `id="id"`。

这个需要和你的标签页配置进行对应。以便于添加和删除标签页。

```html
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" data-target="#tab1">TAB 1 HEADER</a></li>
  <li><a data-toggle="tab" data-target="#tab2">TAB 2 HEADER</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">TAB 1 CONTENT</div>
  <div id="tab2" class="tab-pane fade">TAB 2 CONTENT</div>
</div>

```

有关更多标签页的内容，请参考 `https://docker.ossez.com/test/` 页面中的内容。

![docker-docs-tab-01](https://www.isharkfly.com/images/transparent.png)

如果上图显示的标签页。