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

演示