前端开发之响应式布局，响应式 HTML, CSS and JavaScript 框架介绍；

百科大全

更新时间：2025-10-05 14:39:1131

admin管理员组
文章数量:1794759

前端开发之响应式布局，响应式 HTML, CSS and JavaScript 框架介绍；

1. Bootstrap5；

2. Foundation5；

首先应该明白什么是响应式HTML style="color:#2aa0ea" target=_blank class=infotextkey>布局：简单来说，就是用Bootstrap5和Foundation5代码写出的网页会根据用户屏幕的大小自适应页面元素的大小；而且Bootstrap5和Foundation5里封装了大量的组件和样式方便开发者直接调用，大大提高了开发效率！

学习初步要求：对html CSS js 有了初步了解，能写出大部分的网页页面；学习响应式 HTML, CSS and JavaScript 框架，之后的开发将会变特别轻松，总之就是一个字“爽”！

1. Bootstrap5；

Bootstrap5官网

引入Bootstrap5：

<link rel="stylesheet" href="cdn.staticfile/twitter-bootstrap/5.1.1/css/bootstrap.min.css">  <script src="cdn.staticfile/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">  <link rel="stylesheet" href="cdn.staticfile/twitter-bootstrap/5.1.1/css/bootstrap.min.css">  <script src="cdn.staticfile/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>  </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：

<link rel="stylesheet" href="cdn.static.runoob/libs/foundation/5.5.3/css/foundation.min.css">  <script src="cdn.static.runoob/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="cdn.static.runoob/libs/foundation/5.5.3/js/foundation.min.js"></script>  <script src="cdn.static.runoob/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">  <link rel="stylesheet" href="cdn.static.runoob/libs/foundation/5.5.3/css/foundation.min.css">  <script src="cdn.static.runoob/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="cdn.static.runoob/libs/foundation/5.5.3/js/foundation.min.js"></script>  <script src="cdn.static.runoob/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>

运行效果：

还将持续更新！

本文标签：布局框架 css html JavaScript

版权声明：本文标题：前端开发之响应式布局，响应式 HTML, CSS and JavaScript 框架介绍；内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968962a123625.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。