前端开发之响应式布局,响应式 HTML, CSS and JavaScript 框架介绍;
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。是一套用于 HTML、CSS 和 JS 开发的开源工具集。Foundation 是一个免费的前端框架,用于快速开发。包含了 HTML 和 CSS 的设计模板,提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。移动优先,可创建响应式网页。适用
·
1. Bootstrap5;
2. Foundation5;
首先应该明白什么是响应式布局:简单来说,就是用Bootstrap5和Foundation5代码写出的网页会根据用户屏幕的大小自适应页面元素的大小;而且Bootstrap5和Foundation5里封装了大量的组件和样式方便开发者直接调用,大大提高了开发效率!
学习初步要求:对html css js 有了初步了解,能写出大部分的网页页面;学习响应式 HTML, CSS and JavaScript 框架,之后的开发将会变特别轻松,总之就是一个字“爽”!
1. Bootstrap5;
引入Bootstrap5:
<!-- Bootstrap5 CDN: -->
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/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="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/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 CDN: -->
<!-- css 文件 -->
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
<!-- jQuery 库 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
<!-- modernizr.js 文件 -->
<script src="http://cdn.static.runoob.com/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.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
<!-- jQuery 库 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
<!-- modernizr.js 文件 -->
<script src="http://cdn.static.runoob.com/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>
运行效果:
还将持续更新!
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献8条内容
所有评论(0)