HTML 进阶-第十八篇：响应式HTML设计-布局框架与对比

HTML 进阶-第十八篇：响应式HTML设计-布局框架与对比

一、Bootstrap框架概述

（一）Bootstrap简介

Bootstrap 是目前最流行的前端开源框架之一，由 Twitter 开发。它为开发者提供了一整套丰富的 CSS 样式、实用的 JavaScript 插件以及强大的响应式网格系统，大大简化了响应式网页的开发流程，使得开发者能够快速构建出美观、功能丰富且在各种设备上都能良好显示的网页。

（二）基本结构

1. 容器（container）
   容器用于包裹页面内容，它提供了一个固定宽度且居中的区域，以确保页面内容在不同屏幕尺寸下都能保持合适的布局。Bootstrap 中有两种类型的容器：

   • .container：在小屏幕上，它会自动适应屏幕宽度；在大屏幕上，它会有一个固定的最大宽度，以防止内容过于分散。例如，在桌面浏览器上，.container 的最大宽度可能是 1140px 或 1200px，具体取决于所使用的 Bootstrap