<div>標簽是HTML中的一個塊級元素，用于創建一個獨立的區域。而<div>元素常常與<footer>元素搭配使用，來創建一個位于頁面底部的區域，也就是footer底部。在這篇文章中，我們將詳細介紹如何使用div和footer標簽創建各種底部布局，并給出一些實際案例來幫助理解。

1. 使用div和footer標簽創建基本底部布局

，我們可以在HTML中使用<div>和<footer>標簽來創建基本的底部布局。以下是一個簡單的示例：

<div class="footer">
<footer>
<p>這是一個基本的底部布局</p>
</footer>
</div>

以上代碼會創建一個帶有一個段落的底部布局。我們可以使用CSS樣式來對該布局進行美化，并設置底部的位置、背景顏色等屬性。

2. 使用CSS樣式設置固定底部布局

有時候，我們希望讓底部布局在頁面中始終保持固定位置。這時，我們可以使用CSS樣式的position屬性來實現。以下是一個示例：

<style>
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #f5f5f5;
padding: 20px;
}
</style>
<br>
<div class="footer">
<footer>
<p>這是一個固定底部布局</p>
</footer>
</div>

通過設置CSS樣式中的position屬性為fixed，并將bottom屬性設置為0，我們可以實現一個固定在底部的布局。上述代碼中，我們還添加了一些其他CSS樣式，來設置底部布局的顏色、邊距等。

3. 使用flexbox實現響應式底部布局

為了使底部布局在不同設備上都能良好展示，我們可以使用flexbox布局來實現響應式的底部布局。以下是一個示例：

<style>
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
padding: 20px;
}
<br>
    .footer-container p {
margin: 0;
}
</style>
<br>
<div class="footer-container">
<div>
<p>左側內容</p>
</div>
<div>
<p>右側內容</p>
</div>
</div>

上述代碼中，我們使用了flexbox布局來創建一個水平方向上分為左右兩個部分的底部布局。其中，justify-content屬性用于設置子元素的水平排列方式，align-items屬性用于設置子元素的垂直對齊方式。我們還通過設置背景顏色、邊距等CSS樣式來美化底部布局。

4. 參考真實案例：Bootstrap框架中的footer

Bootstrap是一個流行的CSS框架，提供了許多實用的組件和布局。在Bootstrap中，我們可以以簡潔的方式創建一個具有響應式特性的底部布局。以下是一個示例：

<footer class="bg-dark text-white text-center">
<div class="container p-4">
<p>這是一個使用Bootstrap框架創建的底部布局</p>
</div>
</footer>

Bootstrap的footer組件中，我們可以使用多個CSS類來實現不同的樣式效果。例如bg-dark類設置了背景顏色為深色，text-white類設置了文字顏色為白色，text-center類用于居中對齊文字等。通過使用Bootstrap提供的組件和樣式，我們可以輕松地創建具有各種樣式的底部布局。

通過以上幾個實例，我們詳細介紹了如何使用div和footer標簽創建底部布局，并給出了一些實際案例進行參考。無論是簡單的布局還是復雜的響應式布局，我們都可以通過合理運用HTML和CSS來實現各種各樣的底部設計。