bootstrap选项卡
时间: 2023-07-10 19:19:58 浏览: 89
Bootstrap 提供了选项卡组件(Tab),可以让用户在不同的标签页之间切换。以下是使用 Bootstrap 选项卡组件的基本步骤:
1. 创建一个带有选项卡导航(Tab Navigation)的容器元素,用来包含所有选项卡内容。
```
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
</div>
```
2. 创建选项卡内容的容器元素,用来放置每个选项卡对应的内容。
```
<div class="tab-content">
<div id="tab1" class="tab-pane active">Tab 1 Content</div>
<div id="tab2" class="tab-pane">Tab 2 Content</div>
<div id="tab3" class="tab-pane">Tab 3 Content</div>
</div>
```
3. 将选项卡导航和选项卡内容进行关联。
```
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Tab 1 Content</div>
<div id="tab2" class="tab-pane">Tab 2 Content</div>
<div id="tab3" class="tab-pane">Tab 3 Content</div>
</div>
```
4. 根据需要自定义选项卡样式,如更改选项卡导航的颜色、字体等。
```
.nav-tabs {
border-bottom: none;
}
.nav-tabs > li > a {
border: none;
color: #666;
font-size: 16px;
font-weight: 600;
padding: 10px 15px;
}
.nav-tabs > li > a:hover {
background-color: #f5f5f5;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:focus,
.nav-tabs > .active > a:hover {
background-color: #fff;
border: none;
color: #333;
font-weight: 600;
}
.tab-content {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)