跟着pink老师前端入门教程-day24

最新推荐文章于 2024-07-12 01:09:29 发布
最新推荐文章于 2024-07-12 01:09:29 发布
阅读量2k 收藏 21
点赞数 45
分类专栏： HTML5+CSS3 移动端 文章标签： 前端 html5 学习 开发语言 html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyx210603/article/details/136097088
版权

四、移动端WEB开发之响应式布局

1、响应式开发

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

平时响应式尺寸划分，也可以根据实际情况自己定义划分

超小屏幕（手机，小于 768px）：设置宽度为 100%

小屏幕（平板，大于等于 768px）：设置宽度为 750px

中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px

大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 

    <title>响应式布局</title>
    <style>
        .container {
            height: 150px;
            background-color: saddlebrown;
            margin: 0 auto;
        }

        /* 超小屏幕（手机，小于 768px）：设置宽度为 100% */
        @media screen and (max-width: 768px) {
            .container {
                width: 100%;
                background-color: red;
            }
        }

        /* 小屏幕（平板，大于等于 768px）：设置宽度为 750px */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
                background-color: orange;
            }
        }

        /* 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px */
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
                background-color: yellow;
            }
        }

        /* 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
                background-color: green;
            }
        }
    </style>
</head>

<body>
    <!-- 响应式需要一个父级做为布局容器 -->
    <div class="container"></div>
</body>

2、Bootstrap前端开发框架

2.1 Bootstrap 简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

中文官网：http://www.bootcss.com/

官网：http://getbootstrap.com/

推荐使用：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。icon-default.png?t=N7T8https://v3.bootcss.com/框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

优点 :标准化的html+css编码规范；提供了一套简洁、直观、强悍的组件；有自己的生态圈，不断的更新迭代；让开发更简单，提高了开发的效率

版本

        2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。

        3.x.x：目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目。

        4.x.x ：最新版，目前还不是很流行

2.2 Bootstrap 使用

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

Bootstrap 使用四步曲：

1. 创建文件夹结构

2. 创建 html 骨架结构
<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport " content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!-- 解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
3. 引入相关样式文件
<!-- Bootstrap 核心样式 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
4. 书写内容

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

    <title>Bootstrap 简介</title>
    <!--[if lt IE 9]>
     <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!-- [endif] -->
    <!-- 引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        .login {
            width: 48px;
            height: 45px;
        }
    </style>
</head>

<body>
    <button type="button" class="btn btn-success">成功</button>
    <div class="btn btn-success login">登录</div>
</body>

2.3 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类。

1. container 类

响应式布局的容器 固定宽度

大屏 ( >=1200px) 宽度定为 1170px

中屏 ( >=992px) 宽度定为 970px

小屏 ( >=768px) 宽度定为 750px

超小屏 (100%)

2. container-fluid 类

流式布局容器 百分百宽度

占据全部视口（viewport）的容器。

适合于单独做移动端开发

3、Bootstrap栅格系统

3.1 栅格系统简介

栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

3.2 栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

按照不同屏幕划分为1~12 等份

行（row） 可以去除父容器作用15px的边距

xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；

列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列

每一列默认有左右15像素的 padding

可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6

    <title>Bootstrap 栅格系统</title>
    <!--[if lt IE 9]-->
    <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!-- [endif] -->
    <link rel="stylesheet" href="./bootstrap.min.css">
    <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }

        .container .row:nth-child(1) {
            background-color: salmon;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <!-- 3+3+3+3=12 -->
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
        <!-- 如果孩子的份数相加 等于 12，则孩子能占满整个 container 的宽度 -->
        <div class="row">
            <!-- 6+2+2+2 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 如果孩子的份数相加 小于 12，则孩子不能占满整个 container 的宽度 有空白 -->
        <div class="row">
            <!-- 6+2+2+2 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加 大于 12，多的那一列会另起一行显示 -->
        <div class="row">
            <!-- 6+2+2+2 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>
</body>

3.3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内

<!-- 列嵌套 -->
<div class="col-sm-4">
        <div class="row">
                <div class="col-sm-6">小列</div>
                <div class="col-sm-6">小列</div>
        </div>
</div> 
    <title>列嵌套</title>
    <!--[if lt IE 9]-->
    <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!-- [endif] -->
    <link rel="stylesheet" href="./bootstrap.min.css">
    <style>
        .row>div {
            height: 50px;
            background-color: salmon;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 列嵌套最好加1行 row可以取消父元素的padding值 而且高度自动和父级一样高 -->
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

3.4 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

 <!-- 列偏移 -->
 <div class="row">
         <div class="col-lg-4">1</div>
         <div class="col-lg-4 col-lg-offset-4">2</div>
 </div> 

    <title>列偏移</title>
    <!--[if lt IE 9]-->
    <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!-- [endif] -->
    <link rel="stylesheet" href="./bootstrap.min.css">
    <style>
        .row div {
            height: 45px;
            background-color: salmon;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <!-- 使用 .col-md-offset-* 类可以将列向右侧偏移 -->
            <!-- 偏移的份数 12 - 两个盒子的份数 = 6 -->
            <div class="col-md-4 col-md-offset-4">右侧</div>
        </div>
        <div class="row">
            <!-- 左侧2 中间8 右侧2 因此中间的话偏移2即可 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>
</body>

3.5 列排序

通过使用 .col-md-push-* （推）和 .col-md-pull-* （拉）类就可以很容易的改变列（column）的顺序。

<!-- 列排序 -->
<div class="row">
        <div class="col-lg-4 col-lg-push-8">左侧 </div>
        <div class="col-lg-8 col-lg-pull-4">右侧 </div>
</div> 
    <title>列排序</title>
    <!--[if lt IE 9]-->
    <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!-- [endif] -->
    <link rel="stylesheet" href="./bootstrap.min.css">
    <style>
        .row div {
            height: 50px;
            background-color: salmon;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
</body>

3.6 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

“.visible-xs/sm/md/lg”是显示

Bootstrap 其他（按钮、表单、表格） 请参考Bootstrap 文档。 

    <title>响应式工具</title>
    <!--[if lt IE 9]-->
    <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!-- [endif] -->
    <link rel="stylesheet" href="./bootstrap.min.css">
    <style>
        .row div {
            height: 100px;
            background-color: salmon;
        }

        .row div:nth-child(3) {
            background-color: sandybrown;
        }

        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-md">显示</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">隐藏</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>

axiu呀
关注
  • 45
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
pink老师的JavaScript零基础课小白学习笔记（学习中)
今天也有好好生活吗
04-25 231
小白学习笔记，简单记录一些碎碎念和业余学习，欢迎大佬们指导，我竖起耳朵听！
JavaScript 学习笔记 超详细（b站pink老师）_pink老师最新版js笔记
2401_84140442的博客
04-17 1704
文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。即DOM是浏览器提供的一套专门用来操作网页内容的功能。**DOM作用：**开发网页内容特效和实现用户交互标签天生自带的属性，比如class、id、title等, 可以直接使用点语法操作。比如： disabled、checked、 selected在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取。
【笔记整理】pink老师JavaScript前端课程---JS进阶
Pluto_nb的博客
08-16 363
【笔记整理】pink老师JavaScript前端课程---JS进阶
跟着pink老师前端入门教程（JavaScript）-day05
zyx210603的博客
02-21 1263
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到。某些情况，也可以把表达式理解为表述语句，因为他是在计算结果，但不是必须的成分（例如continue语句）语句：语句不一定有值，所以比如alert()、for 和 break 等语句就不能被用于赋值。循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。若不满足则向下判断条件2，满足条件2执行代码2，其他不执行。
跟着pink老师前端入门教程（JavaScript）-day03
zyx210603的博客
02-17 1635
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。通常会实现3种方式的转换：转换为字符串类型转换为数字型转换为布尔型计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同。
该仓库是基于黑马程序员-Pink老师的前端入门教程, 对前端基础知识进行系统性学习。包括HTML + CSS.zip
03-08
适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 项目具有较高的学习借鉴价值，也可直接拿来修改复现。可以在这些基础上学习借鉴进行修改和扩展，实现其它功能。...
pink老师htmlcss学习 - 学成在线案例
03-26
"pink老师htmlcss学习 - 学成在线案例"这个资源包显然是一份用于教学或自我提升的学习材料，其中包含了一系列实例，帮助用户深入理解并掌握HTML和CSS的应用。 首先，`style.css`是CSS（层叠样式表）文件，它是用来...
pink老师的js全视频配套资料.zip
05-10
pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频...
品优购实战案例-pink老师版
01-02
【品优购实战案例-pink老师版】 在“品优购实战案例-pink老师版”中，我们聚焦于一个电商网站的开发与运营，这个实战案例由pink老师提供，旨在帮助学习者掌握IT行业中电子商务平台的建设和管理技能。在这个项目中，...
Web前端开发技术-Jquery动画.pptx
07-07
background-color: pink;"> 显示 隐藏 切换 $("button").eq(0).click(function() { $("div").show(1000, function() { alert("已显示")}); }); $("button").eq(1).click(function() { $("div").hide(1000, ...
03 day1--javascript笔记pink老师-基础知识 看这一篇就够了！
小女不才
08-30 3256
内容 链接 day1 基础知识大总结 链接 day2 基础知识之函数与作用域 链接 day3 基础知识之对象与内置对象 链接 day4 进阶之DOM技术 链接 day5 进阶之BOM技术 链接 day6 提高之面向对象 链接 day7 提高之ES6 链接 1 初识JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来...
跟着pink老师前端入门教程-day20
zyx210603的博客
02-06 1358
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
跟着pink老师学前端之JavaScript-基础部分
weixin_46548238的博客
06-24 648
1. 初始JavaScript 1.1 JavaScript是什么 JavaScript是一种运行在客户端的脚本语言。 脚本语言：不需要编译，运行过程中由js解释器逐行来进行解释并执行。 现在也可以基于Node.js技术进行服务端编程。 1.2 JavaScript的作用 表单动态校验（密码强度检测）（js最初产生的目的） 网页特效 服务端开发（Node.js） 桌面程序（Electron） App（Cordova） 控制硬件-物联网（Ruff） 游戏开发（cocos2d-js） 1.3 浏览器执行
前端技术学习记录-基础知识（二）JavaScript基本语法
adanjeep的博客
07-11 193
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
微信小程序开发笔记之”表单读不出数据“解决指南
最新发布
qq_46396470的博客
07-12 298
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 257
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 195
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 886
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1392
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值