Bootstrap選項卡淺析

一、Bootstrap選項卡漸變

Bootstrap選項卡提供了一種漸變的效果，可以通過data屬性實現。通過在HTML中添加data-toggle和data-target來控制選項卡的動態效果，其中data-sync可以用來協調選項卡的變化。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" href="#home" role="tab" data-toggle="tab" data-target="#myTabContent" data-sync="sync0">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" href="#profile" role="tab" data-toggle="tab" data-target="#myTabContent" data-sync="sync0">Profile</a>
  </li>
</ul>

二、Bootstrap選項卡切換頁面

Bootstrap選項卡不僅可以與靜態內容一起使用，還可以與動態內容進行組合。通過添加data屬性，可以使選項卡和內容組合在一起，並通過jQuery的load（）方法將數據加載到選項卡中。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" href="#home" role="tab" data-toggle="tab" data-target="#myTabContent" data-sync="sync0">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" href="#profile" role="tab" data-toggle="tab" data-target="#myTabContent" data-sync="sync0">Profile</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <h3>Home content</h3>
    <div>Loading content ...</div>
    <script>
      $('#home').load('content.html');
    </script>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <h3>Profile content</h3>
    <div>Loading content ...</div>
    <script>
      $('#profile').load('content.html');
    </script>
  </div>
</div>

三、Bootstrap選項卡導航

Bootstrap選項卡可以幫助你創建漂亮的導航欄，使用.nav，.nav-tabs和.nav-pills類可以創建水平和垂直的導航欄。nav-justified和nav-stacked類可以控制選項卡的居中和堆疊效果。

<ul class="nav nav-tabs nav-justified nav-pills" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" href="#home" role="tab" data-toggle="tab" data-target="#myTabContent" data-sync="sync0">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" href="#profile" role="tab" data-toggle="tab" data-target="#myTabContent" data-sync="sync0">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="message-tab" href="#message" role="tab" data-toggle="tab" data-target="#myTabContent" data-sync="sync0">Message</a>
  </li>
</ul>

四、Bootstrap選項卡切換

Bootstrap選項卡支持不同的切換效果，使用data-attribute實現。在選項卡中，通過添加data-toggle=“tab”屬性來打開選項卡。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active show" id="home-tab" href="#home" role="tab" data-toggle="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" href="#profile" role="tab" data-toggle="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="message-tab" href="#message" role="tab" data-toggle="tab" aria-controls="message" aria-selected="false">Message</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p>Home content</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p>Profile content</p>
  </div>
  <div class="tab-pane fade" id="message" role="tabpanel" aria-labelledby="message-tab">
    <p>Message content</p>
  </div>
</div>

五、Bootstrap選項卡美化

通過修改bootstrap.css文件，可以修改選項卡的樣式，例如字體、背景色、邊框等。

.nav-tabs {
  border-color: #ddd;
  border-radius: 5px;
}

.nav-tabs a:hover,
.nav-tabs a:focus,
.nav-tabs a:active {
  background-color: #EEE;
  border-color: #ddd;
}

.nav-tabs .active a,
.nav-tabs .active a:hover,
.nav-tabs .active a:focus,
.nav-tabs .active a:active {
  background-color: #337ab7;
  border-color: #ddd;
  color: #fff;
}

.nav-tabs a {
  border: none;
  color: #565656;
}

.nav-tabs a:hover,
.nav-tabs a:focus {
  border-color: #ddd;
  background-color: #eee;
  color: #444;
}

六、Bootstrap選項卡顏色修改

Bootstrap選項卡提供了許多顏色修改的選項，可以通過修改class名稱來實現。例如，.nav-pills包括紅色選項卡；.nav-tabs-dark用於更改顏色主題。

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active (Red)</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

七、Bootstrap選項卡原理

Bootstrap選項卡的原理是使用HTML、CSS和JS結合在一起達到選項卡的效果。通過設置ul和li元素的基本樣式和data屬性，控制選項卡的切換和效果。其中active用於控制選項卡的初始狀態，tab-pane用於控制選項卡和內容的內部結構。

八、Bootstrap選項卡鼠標移開顏色

鼠標移開時，Bootstrap選項卡通過修改active類和disabled類的樣式來實現顏色的變化和效果的隱藏。在CSS中，我們可以使用:hover偽類和:out偽類來實現鼠標移入和移出的效果。

.nav-tabs a:hover,
.nav-tabs a:focus,
.nav-tabs a:active {
  background-color: #EEE;
  border-color: #ddd;
}

.nav-tabs .active a,
.nav-tabs .active a:hover,
.nav-tabs .active a:focus,
.nav-tabs .active a:active {
  background-color: #337ab7;
  border-color: #ddd;
  color: #fff;
}

.nav-tabs a {
  border: none;
  color: #565656;
}

.nav-tabs a:hover,
.nav-tabs a:focus {
  border-color: #ddd;
  background-color: #eee;
  color: #444;
}

.nav-tabs .disabled a {
  color: #999;
  pointer-events: none;
  background-color: #f7f7f7;
  border-color: #ddd;
}

.nav-tabs .disabled a:hover {
  background-color: #f7f7f7;
  border-color: #ddd;
}

九、Bootstrap選項卡導航膠囊

Bootstrap選項卡中的膠囊式選項卡意味着它們有圓角，這可以通過CSS border-radius屬性來實現。.rounded，.rounded-0等類可以控制選項卡的邊框圓角，可用的值有0、sm、md和lg。

<ul class="nav nav-pills rounded-pill bg-white">
  <li class="nav-item rounded-end">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item rounded-start">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

十、Bootstrap選

原創文章，作者：NSAEQ，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/330088.html