<前言> <div class=\"container\"> 是HTML和CSS中常見的一個類選擇器，它被用來定義一個包含和包裹內容的容器。在本文中，我們將詳細介紹 <div class=\"container\"> 的用法并提供幾個實例來解釋說明。

1. 基本用法

<div class=\"container\"> 的基本用法非常簡單，它可以用來包裹HTML中的其他元素。下面是一個例子：

<div class=\"container\">
<h1>歡迎來到我的網站</h1>
<p>這是我的第一個網站。</p>
</div>

在這個例子中，我們使用了一個 <div class=\"container\"> 來包裹了一個標題和一個段落。這樣，這些元素就被包含在這個容器中了。

2. 使用Bootstrap

<div class=\"container\"> 還被廣泛地用于使用Bootstrap前端框架構建響應式頁面。在Bootstrap中，<div class=\"container\"> 被用來創建一個固定寬度的容器，用于放置頁面的內容。

<div class=\"container\">
<h1>歡迎來到我的網站</h1>
<p>這是一個使用Bootstrap構建的網站。</p>
</div>

在這個例子中，我們使用了同樣的基本結構，但是使用了Bootstrap框架。這樣，<div class=\"container\"> 的樣式會被Bootstrap所定義的樣式所覆蓋。

默認情況下，使用Bootstrap的 <div class=\"container\"> 會有一定的左右內邊距。如果你想要使用Bootstrap提供的全寬度容器，你可以使用 <div class=\"container-fluid\">。

3. 使用自定義樣式

除了使用默認的樣式以及使用Bootstrap提供的樣式外，你也可以自定義 <div class=\"container\"> 的樣式。下面是一個例子：

<style>
.my-container {
background-color: #f2f2f2;
padding: 20px;
}
</style>
<br>
<div class=\"my-container\">
<h1>歡迎來到我的網站</h1>
<p>這是一個使用自定義樣式的網站。</p>
</div>

在這個例子中，我們自定義了一個名為 "my-container" 的類，并應用到了 <div class=\"container\"> 元素上。通過這種方式，我們可以根據自己的需要來定義容器的背景色和內邊距。

結論

<div class=\"container\"> 在HTML和CSS中扮演了容器的角色，用于包含和包裹頁面的內容。無論是使用基本的結構、Bootstrap框架，還是自定義樣式，<div class=\"container\"> 都能夠提供一個統一的容器來組織和展示內容。希望本文能夠對你理解和應用 <div class=\"container\"> 有所幫助。