html - ブートストラップは、ドキュメント内の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>

デモ