Html 引导程序如何创建；例如；他们文档中的div选项卡？

我试图查看代码，但无法确定如何将其置于div之上。此外，谷歌搜索“div上的tabs”、“div上的嵌套tabs”似乎没有显示任何相关内容，因此我的术语是关闭的

---

我想他们使用了绝对定位的

演示：

输出：

CSS:

#容器{
边框：1px纯色浅灰色；
边界半径：5px；
高度：100px；
位置：相对位置；
宽度：200px；
}
.标签{
背景色：rgb（242、242、242）；
右边框：1px实心浅灰色；
边框底部：1px纯色浅灰色；
边界半径：0 5px 0；
颜色：灰色；
显示：内联块；
字体：12px Arial；
左：0；
填充物：5px；
位置：绝对位置；
排名：0；
}

HTML:

示例

只要用这个：

CSS

HTML

标题
段落

---

是否有链接内容的方法（即“uso条件”）？我正在寻找一个可以让人们点击以获取更多信息的侧标签。@dasickis，嗯，用我描述的方法，我想你不能。使用

thinkingstiff

解决方案。谢谢！只是需要让它更美观，但这是一个很好的开始。（我的尝试…）dasickis我认为你没有挽救你的尝试。你的链接与我的链接相同。现在保存它。傻。。。不管怎样，有没有办法让它只出现在悬停状态？此外，在我的页面上加载引导程序时，它看起来更好。（前端新手）@dasickis您必须使用Javascript在父

悬停上显示子

。

.bs-docs-example {
   position: relative;
   margin: 15px 5px;
   padding: 39px 19px 14px;
   *padding-top: 19px;
   background-color: #fff;
   border: 1px solid #ddd;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px; 
}

.bs-docs-example:after {
   content: "Condiciones de uso";
   position: absolute;
   top: -1px;
   left: -1px;
   padding: 3px 7px;
   font-size: 12px;
   font-weight: bold;
   background-color: #f5f5f5;
   border: 1px solid #ddd;
   color: #9da0a4;
   -webkit-border-radius: 4px 0 4px 0;
   -moz-border-radius: 4px 0 4px 0;
   border-radius: 4px 0 4px 0;
}

<div id="content">
   <div class="container">
     <div class="bs-docs-example" style="text-align: justify;">
   <h2>Header</h2>
       <p>Paragraph</p>
     </div>
   </div>
</div>