\# bootstrap 切換div
\[Bootstrap\]\[1\] 是一個流行的前端開發框架,它提供了豐富的組件和樣式,可用于快速構建現代化的網頁和應用程序。其中一個常見的需求是在同一個頁面中切換顯示不同的內容,而不是通過頁面的跳轉來實現。Bootstrap 提供了可以方便地切換 div 的組件,使我們能夠輕松地在同一個頁面中展示不同的內容。本文將詳細介紹如何使用 Bootstrap 實現 div 切換的幾個代碼案例。
## 實例1:基本的 div 切換
第一個例子演示了如何使用 Bootstrap 實現一個基本的 div 切換效果。代碼如下:
\<div class="container"\>
\<h1\>div 切換實例\</h1\>
\<div class="btn-group" role="group"\>
\<button type="button" class="btn btn-primary active" data-toggle="tab" data-target="#div1"\>Div 1\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div2"\>Div 2\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div3"\>Div 3\</button\>
\</div\>
\<div class="tab-content"\>
\<div id="div1" class="tab-pane fade in active"\>
\<h3\>Div 1 內容\</h3\>
\<p\>這里是 Div 1 的內容。\</p\>
\</div\>
\<div id="div2" class="tab-pane fade"\>
\<h3\>Div 2 內容\</h3\>
\<p\>這里是 Div 2 的內容。\</p\>
\</div\>
\<div id="div3" class="tab-pane fade"\>
\<h3\>Div 3 內容\</h3\>
\<p\>這里是 Div 3 的內容。\</p\>
\</div\>
\</div\>
\</div\>
上述代碼中,我們使用了 Bootstrap 的按鈕組和選項卡組件來實現 div 切換的效果。按鈕組用于切換不同的 div,選項卡組件用于展示當前選中的 div 內容。按鈕的
## 實例2:垂直排列的 div 切換
第二個例子演示了如何使用 Bootstrap 實現一個垂直排列的 div 切換效果。代碼如下:
\<div class="container"\>
\<h1\>垂直排列的 div 切換實例\</h1\>
\<div class="btn-group-vertical" role="group"\>
\<button type="button" class="btn btn-primary active" data-toggle="tab" data-target="#div4"\>Div 4\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div5"\>Div 5\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div6"\>Div 6\</button\>
\</div\>
\<div class="tab-content"\>
\<div id="div4" class="tab-pane fade in active"\>
\<h3\>Div 4 內容\</h3\>
\<p\>這里是 Div 4 的內容。\</p\>
\</div\>
\<div id="div5" class="tab-pane fade"\>
\<h3\>Div 5 內容\</h3\>
\<p\>這里是 Div 5 的內容。\</p\>
\</div\>
\<div id="div6" class="tab-pane fade"\>
\<h3\>Div 6 內容\</h3\>
\<p\>這里是 Div 6 的內容。\</p\>
\</div\>
\</div\>
\</div\>
與第一個例子類似,我們使用了按鈕組和選項卡組件來實現 div 切換。不同之處在于,我們使用了
## 實例3:切換按鈕形狀
第三個例子演示了如何使用 Bootstrap 實現切換按鈕形狀的 div 切換效果。代碼如下:
\<div class="container"\>
\<h1\>切換按鈕形狀的 div 切換實例\</h1\>
\<div class="btn-group" role="group"\>
\<button type="button" class="btn btn-primary active" data-toggle="tab" data-target="#div7"\>\<span class="glyphicon glyphicon-th-large"\>\</span\> Div 7\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div8"\>\<span class="glyphicon glyphicon-th-list"\>\</span\> Div 8\</button\>
\</div\>
\<div class="tab-content"\>
\<div id="div7" class="tab-pane fade in active"\>
\<h3\>Div 7 內容\</h3\>
\<p\>這里是 Div 7 的內容。\</p\>
\</div\>
\<div id="div8" class="tab-pane fade"\>
\<h3\>Div 8 內容\</h3\>
\<p\>這里是 Div 8 的內容。\</p\>
\</div\>
\</div\>
\</div\>
在這個例子中,我們在按鈕的內部使用了 Bootstrap 的圖標樣式類
通過以上代碼案例,我們演示了如何使用 Bootstrap 實現 div 切換的幾種常見方式。這些方法都遵循類似的原理,即使用按鈕組和選項卡組件來實現切換效果,并通過指定不同的目標 div 來展示不同的內容。利用 Bootstrap 提供的豐富樣式和組件,我們可以輕松地創建漂亮和功能豐富的 div 切換效果。
\[1\]: https://getbootstrap.com/
\[Bootstrap\]\[1\] 是一個流行的前端開發框架,它提供了豐富的組件和樣式,可用于快速構建現代化的網頁和應用程序。其中一個常見的需求是在同一個頁面中切換顯示不同的內容,而不是通過頁面的跳轉來實現。Bootstrap 提供了可以方便地切換 div 的組件,使我們能夠輕松地在同一個頁面中展示不同的內容。本文將詳細介紹如何使用 Bootstrap 實現 div 切換的幾個代碼案例。
## 實例1:基本的 div 切換
第一個例子演示了如何使用 Bootstrap 實現一個基本的 div 切換效果。代碼如下:
\<div class="container"\>
\<h1\>div 切換實例\</h1\>
\<div class="btn-group" role="group"\>
\<button type="button" class="btn btn-primary active" data-toggle="tab" data-target="#div1"\>Div 1\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div2"\>Div 2\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div3"\>Div 3\</button\>
\</div\>
\<div class="tab-content"\>
\<div id="div1" class="tab-pane fade in active"\>
\<h3\>Div 1 內容\</h3\>
\<p\>這里是 Div 1 的內容。\</p\>
\</div\>
\<div id="div2" class="tab-pane fade"\>
\<h3\>Div 2 內容\</h3\>
\<p\>這里是 Div 2 的內容。\</p\>
\</div\>
\<div id="div3" class="tab-pane fade"\>
\<h3\>Div 3 內容\</h3\>
\<p\>這里是 Div 3 的內容。\</p\>
\</div\>
\</div\>
\</div\>
上述代碼中,我們使用了 Bootstrap 的按鈕組和選項卡組件來實現 div 切換的效果。按鈕組用于切換不同的 div,選項卡組件用于展示當前選中的 div 內容。按鈕的
data-toggle="tab"
屬性指示點擊按鈕時切換選項卡,而data-target
屬性指定要切換的 div。## 實例2:垂直排列的 div 切換
第二個例子演示了如何使用 Bootstrap 實現一個垂直排列的 div 切換效果。代碼如下:
\<div class="container"\>
\<h1\>垂直排列的 div 切換實例\</h1\>
\<div class="btn-group-vertical" role="group"\>
\<button type="button" class="btn btn-primary active" data-toggle="tab" data-target="#div4"\>Div 4\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div5"\>Div 5\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div6"\>Div 6\</button\>
\</div\>
\<div class="tab-content"\>
\<div id="div4" class="tab-pane fade in active"\>
\<h3\>Div 4 內容\</h3\>
\<p\>這里是 Div 4 的內容。\</p\>
\</div\>
\<div id="div5" class="tab-pane fade"\>
\<h3\>Div 5 內容\</h3\>
\<p\>這里是 Div 5 的內容。\</p\>
\</div\>
\<div id="div6" class="tab-pane fade"\>
\<h3\>Div 6 內容\</h3\>
\<p\>這里是 Div 6 的內容。\</p\>
\</div\>
\</div\>
\</div\>
與第一個例子類似,我們使用了按鈕組和選項卡組件來實現 div 切換。不同之處在于,我們使用了
btn-group-vertical
類將按鈕垂直排列。## 實例3:切換按鈕形狀
第三個例子演示了如何使用 Bootstrap 實現切換按鈕形狀的 div 切換效果。代碼如下:
\<div class="container"\>
\<h1\>切換按鈕形狀的 div 切換實例\</h1\>
\<div class="btn-group" role="group"\>
\<button type="button" class="btn btn-primary active" data-toggle="tab" data-target="#div7"\>\<span class="glyphicon glyphicon-th-large"\>\</span\> Div 7\</button\>
\<button type="button" class="btn btn-primary" data-toggle="tab" data-target="#div8"\>\<span class="glyphicon glyphicon-th-list"\>\</span\> Div 8\</button\>
\</div\>
\<div class="tab-content"\>
\<div id="div7" class="tab-pane fade in active"\>
\<h3\>Div 7 內容\</h3\>
\<p\>這里是 Div 7 的內容。\</p\>
\</div\>
\<div id="div8" class="tab-pane fade"\>
\<h3\>Div 8 內容\</h3\>
\<p\>這里是 Div 8 的內容。\</p\>
\</div\>
\</div\>
\</div\>
在這個例子中,我們在按鈕的內部使用了 Bootstrap 的圖標樣式類
glyphicon
,可以通過添加不同的圖標類來改變按鈕的形狀。通過以上代碼案例,我們演示了如何使用 Bootstrap 實現 div 切換的幾種常見方式。這些方法都遵循類似的原理,即使用按鈕組和選項卡組件來實現切換效果,并通過指定不同的目標 div 來展示不同的內容。利用 Bootstrap 提供的豐富樣式和組件,我們可以輕松地創建漂亮和功能豐富的 div 切換效果。
\[1\]: https://getbootstrap.com/