bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet"/>
响应式布局是指根据屏幕大小自动调整网站的布局。在移动设备普及的今天，响应式布局已成为网站设计的必备功能。
流行框架的优势
使用流行框架（如 Bootstrap 和 Foundation）构建响应式布局有以下优势：
- 快速开发：框架提供了预构建的组件和布局，可以快速创建响应式网站。
- 一致性：框架确保了网站在不同设备上的一致外观和行为。
- 跨浏览器兼容性：框架经过测试，可以与所有主要浏览器兼容。
Bootstrap 和 Foundation：两种流行框架
Bootstrap 和 Foundation 是最受欢迎的响应式框架之一。两者都提供了一套强大的组件和布局，可以轻松创建响应式网站。
Bootstrap 以其轻量级和易用性而闻名。它提供了各种预先构建的组件，包括导航栏、按钮和表格。
Foundation 以其灵活性而著称。它提供了更广泛的组件和自定义选项，使其适合更复杂的项目。Foundation 还建立在 Sass 之上，这是一种强大的 CSS 预处理器，可以提高代码的可维护性和可扩展性。
如何使用框架构建响应式布局
使用框架构建响应式布局非常简单。您需要在 HTML 文档中包含框架的 CSS 和 JavaScript 文件。您就可以使用框架的组件来创建您的布局。
例如，以下代码使用 Bootstrap 创建了一个基本的响应式布局：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式布局</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body><nav class="navbar navbar-expand-md navbar-dark bg-dark"><div class="container"><a class="navbar-brand" href="">公司名称</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-md-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="">主页</a></li><li class="nav-item"><a class="nav-link" href="">产品</a></li><li class="nav-item"><a class="nav-link" href="">服务</a></li><li class="nav-item"><a class="nav-link" href="">联系我们</a></li></ul></div></div></nav><main role="main"><div class="container"><div class="row"><div class="col-md-8"><h1>欢迎来到我们的网站</h1><p>我们是提供广泛的产品和服务的领先公司。我们致力于为客户提供最佳的体验。</p></div><div class="col-md-4"><img src="image.jpg" alt="公司徽标" class="img-fluid"></div></div><hr><div class="row"><div class="col-md-6"><h2>我们的产品</h2><ul><li>产品 1</li><li>产品 2</li><li>产品 3</l<div class="col-md-6"><h2>我们的服务</h2><ul><li>服务 1</li><li>服务 2</li><li>服务 3</li></ul></div></div><hr><div class="row"><div class="col-md-12"><h2>联系我们</h2><form><div class="mb-3"><label for="name" class="form-label">姓名</label><input type="text" class="form-control" id="name"></div><div class="mb-3"><label for="email" class="form-label">电子邮件</label><input type="email" class="form-control" id="email"></div><div class="mb-3"><label for="message" class="form-label">留言</label><textarea class="form-control" id="message" rows="3"></textarea></div><button type="submit" class="btn btn-primary">发送</button></form></div>
</div></div></main><footer class="bg-dark text-white py-5"><div class="container"><p class="text
