1. Bootstrap5；
2. Foundation5；
首先应该明白什么是响应式布局：简单来说，就是用Bootstrap5和Foundation5代码写出的网页会根据用户屏幕的大小自适应页面元素的大小；而且Bootstrap5和Foundation5里封装了大量的组件和样式方便开发者直接调用，大大提高了开发效率！
学习初步要求：对html css js 有了初步了解，能写出大部分的网页页面；学习响应式 HTML, CSS and JavaScript 框架，之后的开发将会变特别轻松，总之就是一个字“爽”！
1. Bootstrap5；
Bootstrap5官网
引入Bootstrap5：
<!-- Bootstrap5 CDN： --><!-- 新 Bootstrap5 核心 CSS 文件 --><link rel="stylesheet" href="/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!-- 最新的 Bootstrap5 核心 JavaScript 文件 --><script src="/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
Bootstrap5 Demo：
<!DOCTYPE html><html><head><title>Bootstrap5 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 新 Bootstrap5 核心 CSS 文件 --><link rel="stylesheet" href="/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!-- 最新的 Bootstrap5 核心 JavaScript 文件 --><script src="/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script><!-- bootstrap.bundle.js （未压缩版）或 bootstrap.bundle.min.js（压缩版） 包含了捆绑的插件如 popper.min.js 及其他依赖脚本 --></head><body><div class="container-fluid p-5 bg-primary text-white text-center"><h1>我的第一个 Bootstrap 页面</h1><p>这是一个响应式页面，重置浏览器大小查看效果!</p></div><div class="container mt-5"><div class="row"><div class="col-sm-4"><h3>第一列</h3><p>菜鸟教程</p><p>学的不仅是技术，更是梦想！！！</p></div><div class="col-sm-4"><h3>第二列</h3><p>菜鸟教程</p><p>学的不仅是技术，更是梦想！！！</p></div><div class="col-sm-4"><h3>第三列</h3><p>菜鸟教程</p><p>学的不仅是技术，更是梦想！！！</p></div></div></div></body></html>
运行效果：
2. Foundation5；
Foundation5官网
引入Foundation5：
<!-- Foundation5 CDN： --><!-- css 文件 --><link rel="stylesheet" href="http://cdn./libs/foundation/5.5.3/css/foundation.min.css"><!-- jQuery 库 --><script src="http://cdn./libs/jquery/2.1.1/jquery.min.js"></script><!-- JavaScript 文件 --><script src="http://cdn./libs/foundation/5.5.3/js/foundation.min.js"></script><!-- modernizr.js 文件 --><script src="http://cdn./libs/foundation/5.5.3/js/vendor/modernizr.js"></script>
Foundation5 Demo：
<!DOCTYPE html><html><head><title>Foundation 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- css 文件 --><link rel="stylesheet" href="http://cdn./libs/foundation/5.5.3/css/foundation.min.css"><!-- jQuery 库 --><script src="http://cdn./libs/jquery/2.1.1/jquery.min.js"></script><!-- JavaScript 文件 --><script src="http://cdn./libs/foundation/5.5.3/js/foundation.min.js"></script><!-- modernizr.js 文件 --><script src="http://cdn./libs/foundation/5.5.3/js/vendor/modernizr.js"></script></head><body><div class="row"><div class="medium-12 columns"><div class="panel"><h1>Foundation 页面</h1><p>重置窗口大小，查看效果！</p><button type="button" class="button small">我是按钮!</button></div></div></div><div class="row"><div class="medium-4 columns"><h3>菜鸟教程</h3><p>学的不仅是技术，更是梦想！！！</p></div><div class="medium-4 columns"><h3>菜鸟教程</h3><p>学的不仅是技术，更是梦想！！！</p></div><div class="medium-4 columns"><h3>菜鸟教程</h3><p>学的不仅是技术，更是梦想！！！</p></div></div></body></html>
运行效果：
还将持续更新！
