<div>層疊是指將多個(gè)元素放置在同一個(gè)位置，通過設(shè)置樣式來使它們在頁面上呈現(xiàn)出一種"層疊"的效果。在Bootstrap中，我們可以使用<div>元素來創(chuàng)建這種層疊效果。</div>

下面通過幾個(gè)代碼案例來詳細(xì)解釋和說明Bootstrap的<div>層疊功能：

1. 層疊示例1：

<pre>html
<div class="container">
<div class="row">
<div class="col-lg-4">
<div>這是第一個(gè)層疊元素</div>
</div>
<div class="col-lg-4">
<div>這是第二個(gè)層疊元素</div>
</div>
<div class="col-lg-4">
<div>這是第三個(gè)層疊元素</div>
</div>
</div>
</div>

在這個(gè)示例中，我們使用了Bootstrap的容器（container）和行（row）來創(chuàng)建一個(gè)網(wǎng)格布局，并通過<div>元素將多個(gè)層疊元素放置在同一行。每個(gè)層疊元素都被包裝在一個(gè)列（column）中，并使用了Bootstrap的列類（如col-lg-4）來指定所占的寬度。

2. 層疊示例2：

<pre>html
<div class="container">
<div class="row">
<div class="col-lg-6">
<div>這是第一個(gè)層疊元素</div>
</div>
<div class="col-lg-6">
<div>這是第二個(gè)層疊元素</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div>這是第三個(gè)層疊元素</div>
</div>
</div>
</div>

在這個(gè)示例中，我們同樣使用了Bootstrap的容器和行來創(chuàng)建網(wǎng)格布局。不過這次我們將第三個(gè)層疊元素放置在了一個(gè)新的行中，使得它與前兩個(gè)元素呈現(xiàn)出錯(cuò)開的效果。

3. 層疊示例3：

<pre>html
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>這是一個(gè)層疊元素</p>
<div class="row">
<div class="col-lg-6">
<p>這是第一個(gè)子元素</p>
</div>
<div class="col-lg-6">
<p>這是第二個(gè)子元素</p>
</div>
</div>
</div>
</div>
</div>

在這個(gè)示例中，我們將一個(gè)層疊元素包裝在另一個(gè)層疊元素中，并使用<div>元素的嵌套來創(chuàng)建子元素。通過使用Bootstrap的行和列，我們可以實(shí)現(xiàn)更加復(fù)雜的層疊效果。

通過上述幾個(gè)示例，我們可以看到<div>元素在創(chuàng)建Bootstrap網(wǎng)格布局中的層疊效果方面的靈活性和便利性。我們可以自由地組合和嵌套<div>元素來實(shí)現(xiàn)不同的層疊布局。