在Bootstrap框架中實現響應式設計非常簡單，因為Bootstrap內置了一套基于柵格系統（Grid system）的響應式布局。以下是使用Bootstrap實現響應式設計的基本步驟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Responsive Design</title>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的HTML內容 -->
<!-- 引入Bootstrap JavaScript和Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
```>
2. **創建柵格系統**：Bootstrap使用一個基于12列的響應式柵格系統。你可以通過添加`d-*-*`類來指定元素的寬度。其中，`d-*`表示屏幕尺寸（如`sm`, `md`, `lg`, `xl`, `xxl`），`*`表示列數（1到12）。例如，`d-md-6`表示在中等及以上尺寸的屏幕上占據6列。
```html
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 導航欄內容 -->
</nav>
<div class="container mt-4">
<div class="row">
<div class="col-md-4">Card 1</div>
<div class="col-md-4">Card 2</div>
<div class="col-md-4">Card 3</div>
</div>
</div>
!important來覆蓋默認樣式（不推薦）。/* 自定義樣式 */
@media (max-width: 768px) {
.custom-class {
background-color: red !important;
}
}
通過以上步驟，你可以在Bootstrap框架中實現基本的響應式設計。當然，Bootstrap還提供了許多其他功能和組件，你可以根據需要進一步學習和探索。
