在前端開發中，布局是一個重要的方面。Bootstrap是一個流行的前端開發框架，它提供了一套用于快速構建響應式和移動設備友好的網頁布局的工具和組件。其中，div是Bootstrap中最重要和常用的組件之一。在本文中，我們將詳細介紹bootstrap中div的使用和案例。
<div>是Bootstrap中的一個HTML元素，它用于創建一個容器，用于包含其他內容。通過使用不同的class，我們可以輕松地控制和自定義容器的外觀和布局。
下面是幾個例子，展示如何在Bootstrap中使用div:
1. 基本的div容器:

<code>
<div class="container">
<p>這是一個基本的div容器。</p>
</div>
</code>

在上面的示例中，我們使用了Bootstrap提供的"container" class來創建一個基本的div容器。你可以在這個容器中添加其他內容，比如文字、圖像、表單等。
2. 列表布局:

<code>
<div class="container">
<div class="row">
<div class="col-md-6">
<p>這是左側的列。</p>
</div>
<div class="col-md-6">
<p>這是右側的列。</p>
</div>
</div>
</div>
</code>

在這個例子中，我們使用Bootstrap的網格系統來創建一個包含兩列的列表布局。通過將內容放置在不同的列中，我們可以實現自適應和響應式的布局。在這個示例中，我們使用"col-md-6" class來指定每個列的寬度，并使用"row" class來創建一行。
3. 內聯布局:

<code>
<div class="container">
<div class="row">
<div class="col-md-4">
<p>這是第一列。</p>
</div>
<div class="col-md-4">
<p>這是第二列。</p>
</div>
<div class="col-md-4">
<p>這是第三列。</p>
</div>
</div>
</div>
</code>

在這個例子中，我們創建了一個內聯布局，將內容分成三列并在同一行中顯示。通過使用"col-md-4" class，我們指定了每個列的寬度為1/3。這樣，無論屏幕尺寸如何，這三列都會自動調整大小和排列。