Bootstrap 是一個流行的前端框架，它提供了一系列 UI 組件和樣式，使得我們可以輕松地構建漂亮的網頁。其中一個常見的需求是在點擊按鈕時隱藏或顯示某個 div 元素。本文將介紹幾個使用 Bootstrap 實現按鈕隱藏和顯示 div 的代碼案例，并參考了一些真實案例。
第一個案例是通過 Bootstrap 的類來實現按鈕隱藏和顯示 div。我們可以使用 Bootstrap 的d-none類和d-block類來控制元素的顯示和隱藏。其中d-none類將元素設置為不可見，而d-block類則將其恢復為可見。

html
<button class="btn btn-primary" onclick="toggleDiv()">點擊切換</button>
<div id="myDiv" class="d-none">這是要隱藏或顯示的內容</div>
<br>
<script>
function toggleDiv() {
var div = document.getElementById("myDiv");
div.classList.toggle("d-none");
div.classList.toggle("d-block");
}
</script>

在這個案例中，我們在按鈕上添加了btn和btn-primary類，以確保它具有適當的樣式。我們還為按鈕添加了一個onclick事件，當用戶點擊按鈕時，將觸發toggleDiv()函數。通過該函數，我們使用getElementById方法獲取到要隱藏或顯示的 div 元素。通過classList.toggle方法，我們將d-none類和d-block類切換應用到該 div 元素上，從而實現了按鈕點擊時的隱藏和顯示效果。
接下來，我們將介紹另一個案例，該案例使用 jQuery 實現按鈕隱藏和顯示 div。在 Bootstrap 的官方網站中，我們可以找到一個示例，其中使用了 jQuery 的toggle()方法來切換 class。我們可以將其應用到我們的按鈕隱藏和顯示 div 的需求中。

html
<button class="btn btn-primary" onclick="toggleDiv()">點擊切換</button>
<div id="myDiv">這是要隱藏或顯示的內容</div>
<br>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function toggleDiv() {
$("#myDiv").toggle();
}
</script>

在這個案例中，我們還是使用了一個具有適當樣式的按鈕，并添加了onclick事件，當用戶點擊按鈕時，會觸發toggleDiv()函數。通過該函數，我們使用了 jQuery 的toggle()方法來切換 div 元素的可見性。
最后，我們將介紹一個結合使用 Bootstrap 和 Angular 的案例，這個案例可以在單個頁面上顯示和隱藏多個 div 元素。通過這個案例，我們可以更好地理解如何在復雜的頁面結構中使用 Bootstrap 按鈕隱藏和顯示 div。

javascript
// app.component.html
<button class="btn btn-primary" (click)="toggleDiv()">點擊切換</button>
<div *ngIf="divVisible">
<div>This is the first div.</div>
</div>
<div *ngIf="!divVisible">
<div>This is the second div.</div>
</div>
<br>
// app.component.ts
import { Component } from '@angular/core';
<br>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
divVisible = true;
<br>
  toggleDiv() {
this.divVisible = !this.divVisible;
}
}

在這個案例中，我們在按鈕上添加了適當的樣式，并使用 Angular 的語法(click)="toggleDiv()"來監聽按鈕的點擊事件。在組件的 HTML 模板中，我們使用了*ngIf指令來根據divVisible屬性的值來切換 div 元素的可見性。在組件的 TypeScript 文件中，我們定義了divVisible屬性，并在toggleDiv()方法中切換該屬性的值。通過這種方式，我們可以實現在點擊按鈕時切換多個 div 元素的隱藏和顯示。
通過以上幾個案例，我們可以看到 Bootstrap 和其他的前端技術（如 jQuery 和 Angular）結合起來，可以很方便地實現按鈕隱藏和顯示 div 的效果。這些案例不僅可以用作參考，還可以通過修改和擴展來滿足我們自己的需求。