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

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。是一套用于 HTML、CSS 和 JS 开发的开源工具集。Foundation 是一个免费的前端框架，用于快速开发。包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。移动优先，可创建响应式网页。适用

爪爪蛙

818人浏览 · 2022-09-19 12:29:32

爪爪蛙 · 2022-09-19 12:29:32 发布

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="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：

<!--  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>

运行效果：

还将持续更新！

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

ADS1292R 使用过程心电图高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

开放原子开发者工作坊

实现一个家庭安防与环境监测系统（一）

开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S