bootstrap 如何在其文档中的 div 上创建“示例”选项卡？

Question

我尝试查看代码，但无法确定如何将其放置在 div 上方。另外，谷歌搜索“div 上的选项卡”、“div 上的嵌套选项卡”似乎没有显示任何相关内容，因此我的术语已关闭。

Answer 1

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

<div>

。

演示：

输出：

CSS：

#container {
    border: 1px solid lightgrey;
    border-radius: 5px;
    height: 100px;
    position: relative;
    width: 200px;    
}

.tab {
    background-color: rgb( 242, 242, 242 );
    border-right: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    border-radius: 0 0 5px 0;
    color: grey;
    display: inline-block;
    font: 12px Arial;
    left: 0;
    padding: 5px;
    position: absolute;
    top: 0;
}

HTML：

<div id="container"><div class="tab">Example</div></div>

Answer 2

就用这个：

CSS

.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;
}

HTML

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

演示