Bootstrap中Tab页签使用方法

最新推荐文章于 2024-11-25 06:16:10 发布

iteye_4712

最新推荐文章于 2024-11-25 06:16:10 发布

阅读量548

点赞数

分类专栏： web前端Boostrap

本文链接：https://blog.youkuaiyun.com/iteye_4712/article/details/82655132

版权

web前端Boostrap 专栏收录该内容

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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