Bootstrap中Tab页签使用方法

最新推荐文章于 2024-10-10 10:42:41 发布

原创最新推荐文章于 2024-10-10 10:42:41 发布 · 562 阅读

0 ·

CC 4.0 BY-SA版权

web前端Boostrap 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用TabbedContent布局的示例，通过不同标签页展示Home、Detail1和Detail2三个部分的内容。每个部分包含标题及测试信息，便于理解和实现类似的网页布局。

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#detail1" data-toggle="tab">Detail1</a></li>
     <li role="presentation"><a href="detail2" data-toggle="tab">Detail2</a></li> 
</ul>

<div class="tab-content">
     <div class = "tab-pane fade in  active" id="home">
          <h1>this is Home!</h1>
     </div>
     <div  class = "tab-pane fade" id = "detail1">
          <h1>detail1</h1>
          <h2>Test Test</h2>
     </div>
     <div class = "tab-pane fade" id = "detail2">
           <h1>detail2</h1>
           <h2>Test Test1</h2>
           <h2>Test Test2</h2>
     </div> 
</div>