<div>和<row>是Bootstrap框架中常用的CSS類，用于實現網格布局。網格布局是一種將頁面分割成等寬的列和行的布局方式，可以使網頁在不同終端和屏幕尺寸下自適應地展示。在Bootstrap中，<div>表示一個容器，而<row>則表示一個行，可以包含多個列。接下來將通過幾個代碼案例來詳細解釋<div>和<row>的用法和功能。
第一個案例中，我們創建一個簡單的兩列布局，一列占據8個網格單位，另一列占據4個網格單位。HTML代碼如下：

<p><div class=\"container\">
<row>
<div class=\"col-md-8\">
<p>This is column 1</p>
</div>
<div class=\"col-md-4\">
<p>This is column 2</p>
</div>
</row>
</div></p>

在上述代碼中，<div class="container">表示一個容器，<row>表示一個行。在行內，我們使用了兩個<div>元素來表示兩列，分別使用了類名"col-md-8"和"col-md-4"來指定每個列占據的網格單位。在Bootstrap中，網格單位的總數是12，所以8個網格單位和4個網格單位分別占據了總寬度的2/3和1/3。
接下來，我們來看看第二個案例，這個案例中，我們創建了一個復雜一些的三列布局，每列通過使用不同的類名來定義不同的寬度。HTML代碼如下：

<p><div class=\"container\">
<row>
<div class=\"col-sm-4\">
<p>This is column 1</p>
</div>
<div class=\"col-sm-3\">
<p>This is column 2</p>
</div>
<div class=\"col-sm-5\">
<p>This is column 3</p>
</div>
</row>
</div></p>

在上述代碼中，我們使用了不同的類名來定義每列的寬度，其中"col-sm-4"表示占據4個網格單位，"col-sm-3"表示占據3個網格單位，"col-sm-5"表示占據5個網格單位。這樣，三列加起來正好占據了總寬度的12個網格單位。
通過上述兩個案例，我們可以看到使用<div>和<row>可以快速地創建出各種不同的網格布局。在實際開發中，我們可以根據需要靈活地組合和嵌套使用<div>和<row>來實現復雜的頁面布局。這樣，無論是在大屏幕上還是在移動設備上，都能夠得到良好的顯示效果。