，我們來看一個基本的示例。在以下代碼中，我們使用了Bootstrap框架的CSS樣式和JavaScript庫，以及一些自定義的CSS樣式。代碼中的.div元素使用了class為"collapse"的屬性，代表這是一個可收起的元素。我們通過在內(nèi)部添加class為"collapse show"的div元素，使其默認展開。通過在按鈕a元素的href屬性中指定目標為div元素的id，點擊按鈕后，相關(guān)div元素即會展開或收起。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" >
<title>Bootstrap Div 收起示例</title>
<style>
.custom-style {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Bootstrap Div 收起示例</h1>
<br>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
點擊展開/收起
</a>
<br>
<div class="collapse show" id="collapseExample">
<div class="custom-style">這是一個可收起的div元素</div>
</div>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>在上述代碼中，當頁面加載時，由于div元素使用了class為"collapse show"，所以它默認處于展開狀態(tài)，顯示文本"這是一個可收起的div元素"。當點擊按鈕"a"后，通過data-bs-toggle屬性和href屬性指定div元素的id，點擊動作將會觸發(fā)展開/收起的效果。
除了基本的示例，我們還可以對收起的div元素進行更多的自定義。例如，在下面的代碼中，我們將使用Bootstrap框架提供的一些樣式類來調(diào)整展開/收起的樣式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" >
<title>自定義樣式的 Bootstrap Div 收起示例</title>
<style>
.custom-style {
color: red;
}
<br>
.accordion-button {
font-size: 18px;
}
<br>
.accordion-body {
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<h1>自定義樣式的 Bootstrap Div 收起示例</h1>
<br>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
點擊展開/收起
</button>
</div>
<div id="collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">
<div class="custom-style">這是一個有自定義樣式的可收起的div元素</div>
</div>
</div>
</div>
</div>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>在上述代碼中，我們使用了Bootstrap提供的accordion組件，通過定義accordion-header和accordion-body來展示可收起的div元素。同時，我們還自定義了accordion-button、accordion-body的樣式，使之與原始的Bootstrap樣式區(qū)分開來。
通過以上的兩個代碼示例，我們可以看到如何使用Bootstrap的<div class="collapse">來實現(xiàn)<div>元素的收起和展開。結(jié)合使用相關(guān)的JavaScript庫和自定義的CSS樣式，我們可以靈活地定制展開/收起的樣式和效果，使頁面看起來更加美觀和易用。