Web前端系列技术之移动Web开发（从基础开始）③

已于 2022-09-13 14:41:44 修改
阅读量457 收藏 3
点赞数 9
分类专栏： 移动端Web基础学习 文章标签： 前端 css bootstrap 前端框架 开发语言
于 2022-08-28 14:28:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/IAMLSD550/article/details/126518946
版权
本文介绍了响应式布局的概念及其核心技术媒体查询，同时深入探讨了Bootstrap框架的使用方法，包括栅格系统、全局CSS样式和JavaScript插件等内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

响应式布局

所谓的响应式布局，简而言之，就是一个网站能够兼容多个终端——并不是为每个终端做一个特定的版本，而这个概念也是为解决移动互联网浏览而诞生的，所以它的诞生顺应了时代发展的潮流，具体可以了解 百度百科；

简单理解方式：一套代码可以兼容不同设备的网页；

那么今天所要介绍的内容就是，后面三章是主流的 UI框架：
八、媒体查询
九、BootStrap框架

文章目录

八、媒体查询

媒体查询的目的就是为了能够根据设备的宽度变化，设置差异化的样式；在此之前，介绍的媒体查询是为了检测视口的已有的宽度，然后编写差异化的样式；但是，这里介绍的媒体查询是 进行响应式布局 的核心技术点；

媒体特性常用写法：

  1. max-width（最大宽度）；
  2. min-width（最小宽度）；

基础语法：

@media (媒体特性) {
    选择器 {
         样式
    }  
}

代码样例：

/* 视口宽度小于等于768px， 网页背景色是粉色 */
@media (max-width: 768px) {
    body {
        background-color: pink;
    }
}
/* 视口宽度大于等于1200px， 网页背景色是skyblue */
@media (min-width: 1200px) {
     body {
        background-color: skyblue;
     }
}

注意：
这里与之前所介绍的媒体查询不同点在于：响应式布局中的媒体查询要求视口的宽度在某一个范围内；

1. 书写要求

由于CSS样式表具有层叠性，所以在使用媒体查询进行响应式布局的时候，对于视口的宽度检测一定要按照一定的顺序进行书写：
① min-width（从小到大）；
② max-width（从大到小）；

分析图例：

在这里插入图片描述

2. 完整写法

@media 关键词 媒体类型 and (媒体特性) { CSS代码 }

2.1 关键词（了解）

① and：判断 “与” ；

② only：判断 “或” ；

③ not：判断 “否” ；

2.2 媒体类型（了解）

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备；

在这里插入图片描述

2.3 媒体特性

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等；

在这里插入图片描述

3. 外联引入

<!-- 视口宽度 >= 992px -->
<!-- 视口宽度 >= 1200px -->
<link rel="stylesheet" href="CSS文件路径" media="(min-width: 992px)">
<link rel="stylesheet" href="CSS文件路径" media="(min-width: 1200px)">

九、BootStrap框架

说到框架，前端所使用的框架往往被称为 UI框架 ，而UI框架往往就是将常见效果所实现的HTML、CSS和JS进行统一封装，而后形成一套代码，例如：BootStrap框架 、Foundation框架（第十章） 和 UIkit框架（第十一章） ；

作用：在基于框架开发的过程里，开发效率会更高且更稳定；

那么就先了解一下：BootStrap框架，具体教程可关注官网；

简介：由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果，目前主要包括的版本为：BootStrap3、BootStrap4、BootStrap5 ；

不同版本的BootStrap框架最大的区别就是兼容性会更高，其次就是内容会更加丰富，但是说基于的原理都是相同的，具体变化如下表：

Bootstrap3Bootstrap4
Less预处理Sass预处理
4种栅格类，【特小（.col-xs-*）<=768px】、【小（.col-sm-*）>=768px】、【中（.col-md-*）>=992px】、【大（.col-lg-*）>=1200px】5种栅格类，【特小（.col-*) <576px】、【小（.col-sm-*）>=576px】、【中（.col-md-*）>=768px】、【大（.col-lg-*）>=992px】、【特大（.col-xl-*）>=1200px】
使用浮动（float）的布局方式使用弹性盒模型（flexbox）的布局方式
使用px为单位使用rem和em为单位（除部分margin和padding使用px）

而对于 Bootstrap5 是Bootstrap的最新版本，大体同 Bootstrap4 相似，但是有六种栅格类，它Bootstrap4 增加了一个【超大（.col-xxl-*）>=1400px】的类，并且使用了新组件、更快的样式表以及拥有更快的响应能力；

其与 Bootstrap 3 & 4 的主要区别在于 Bootstrap5 不再依赖 jQuery，使用了原生的JavaScript ；

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

1. 引入方式

这里将以Bootstrap3为例进行介绍，毕竟老版本的稳定性和兼容性相对于新版本会更禁得起考验啦；

1.1 下载文档

下载步骤：首页 → BootStrap3/4/5中文文档 → 下载BootStrap；
在这里插入图片描述
用于生产环境的 Bootstrap 特点：所有代码都是打包好的，都是格式化压缩处理过的，可以直接利用，并且体积小，运行速度快，通常以下载本文件为主；

Bootstrap 源码特点：包含了整个项目的源代码，体积大，运行速度相对较慢，其主要用于查看源码的设计方案，研究其编写方式；

Sass 特点：是基于Sass开发的源码项目，对于使用Sass开发的项目可以采用该方式的下载框架源码

注意：任何框架都有生产环境和源码两个版本；

1.2 CDN引入

可直接使用这些 BootstrapCDN 提供的链接，具体方式如下：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

2. 使用步骤：

下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

① 引入： BootStrap提供的CSS代码文件名称为 bootstrap.min.css 的文件：

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

② 调用类：使用BootStrap提供的样式，以下为部分样式类名

  1. .container：响应式布局版心类；
  2. .container-fluid：类用于 100% 宽度，占据全部视口（viewport）的容器；

3. 栅格系统

栅格系统是Bootstrap框架的核心，是专门用于响应式网页布局所开发出来一套系统，其原理就是通过一系列的行（row）与列（column）的组合来创建页面布局，网页内容可以放入这些创建好的布局中进行定位；

简单理解：将网页整体栅格化，从整体宽度进行若干等份的分隔（BootStrap3/4/5默认将网页分成12等份）；

原理例图：
在这里插入图片描述

3.1 栅格参数

栅格系统整个框架采用的都是浮动这一原理，来解决元素排列在一行的问题，这种做法的目的也是为了解决框架更广泛的兼容性问题；通过下表可以详细查看 Bootstrap 的栅格系统在多种屏幕设备上的工作原理；

在这里插入图片描述

使用单一的一组栅格类，就可以创建一个基本的栅格系统，在这些自带的栅格类中是不具备宽度值的，通常都以百分比适应方式来布局，从而可以实现在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列的效果；

分别使用.row 类名和 .col 类名定义栅格布局的行和列（.row类自带间距-15px，通常使用 .row 类来抵消 .container 类的15px的内边距）；

在表中的栅格类前缀的样式名中， * 号代表该栅格类元素所占用的栅格份数，占用份数就代表 * 的值，解释样例如下：

在这里插入图片描述

3.2 案例使用

希望通过栅格系统将元素的布局位置自适应于各种设备，那么就需要清楚 栅格参数 中所介绍的 类前缀 ；

对于不同设备的屏幕尺寸，是需求用到不同的 类前缀 定义元素位置；为了实现同一套代码可将网页元素适配于各种设备，就需求 类前缀 可以实现 方向性叠加使用 ；

所谓的 方向性叠加使用 分为【方向】、【叠加】、【使用】三个方面：
①【方向】：代表不同屏幕大小所对应的类前缀 .col-xs-* 、.col-sm-* 、.col-md-* 、.col-lg-* ；在类前缀混合使用的过程中，需求不同屏幕尺寸的类前缀按照 从大到小 或者 从小到大 的顺序书写；


②【叠加】：代表不同屏幕尺寸的类前缀可以按方向的叠加使用；类似：<div class="col-lg-12 col-md-6 col-sm-4 col-xs-1">.col-lg-12 .col-md-6 .col-sm-4 .col-xs-1</div>

在不同尺寸的屏幕之下，叠加使用效果如图：在这里插入图片描述
③ 【使用】：代表不同类前缀的使用方式，要以正确且有逻辑性的使用；

当然，这只是栅格系统的原理理解，具体其他使用方式可 参考官网 ；

4. 全局CSS样式

在BootStrap框架中，BootStrap手册预定义了大量类用来美化页面；

4.1 使用方式

网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标模块 → 复制模块代码 → 寻找目标类并添加

主要包含的全局样式有：

在这里插入图片描述

4.2 具体案例

表单案例：点击分类导航栏中【表单】→ 下载样例代码 → 添加样式类名更改具体样式

① 基础表单代码：

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

效果如图：
在这里插入图片描述

② 添加样式类名：

第一步：为 form 添加 .container 类，实现把内容居于版心效果；
第二步：为上传文件的 label 设置 .sr-only 类将其屏幕文字隐藏；
第三步：为文本框的 div 添加相应的 .has-feedback 类并添加正确的图标样式 glyphicon glyphicon-ok form-control-feedback 实现内容校验状态；
第四步：为文本框的 div 添加相应的 .has-success 或 has-error 类来实现文本框的状态效果；
第五步：为复选框的 input 添加 disabled 属性，将其禁用；
第六步：为按钮更改类名为 .btn-primary ，实现底色样式更改；

更改后表单代码：

<form class="container ">
    <div class="form-group has-success has-feedback">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control has-feedback" id="exampleInputEmail1" placeholder="Email">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    </div>
    <div class="form-group has-error has-feedback">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
    </div>
    <div class="form-group">
        <label class="sr-only" for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
             <input type="checkbox" disabled > The above contents have been clarified
        </label>
    </div>
    <button type="submit" class="btn btn-primary active">Submit</button>
</form>

效果如图：
在这里插入图片描述

4.3 其他样式类名

4.3.1 表格

① table : 基本类名, 初始化表格默认样式；
② table-bordered : 边框线；
③ table-striped : 隔行变色；
④ table-hover : 鼠标悬停效果；
⑤ table-responsive : 表格宽溢出滚动；

4.3.2 按钮

① btn : 基准样式；
② btn-info; btn-success : 设置按钮背景色；
③ btn-block : 设置按钮为块元素；
④ btn-lg; btn-sm; btn-xs : 设置按钮大小；

4.3.3 表单

① form-control : 设置表单元素input, select, textarea的样式；
② checkbox 和 radio : 设置复选框和单选框的样式；
③ form-inline : 设置表单元素水平排列；
④ disabled : 设置表单禁用状态样式；
⑤ input-lg; input-sm, input-sm : 设置表单元素的大小；

4.3.4 图片

① img-responsive: 图片自适应；
② img-rounded : 图片设置圆角；
③ img-circle : 图片设置正圆；
④ img-thumbnail : 图片添加边框线；

4.3.5 辅助类

① pull-right : 强制元素右浮动；
② pull-left : 强制元素左浮动；
③ clearfix : 清除浮动元素的影响；
④ text-left文 : 本左对齐；
⑤ text-right : 文本右对齐；
⑥ text-center : 文本居中对齐；
⑦ center-block : 块元素居中；

4.3.6 响应式工具

目的：不同屏幕尺寸隐藏或显示页面内容 ；

在这里插入图片描述

5. 组件

概念：BootStrap提供的常见功能，包含了HTML结构和CSS样式，主要功能内容如图所示：
在这里插入图片描述

使用方法：

引入BootStrap样式 → 复制结构，修改内容

6. JavaScript插件

概念：是封装了HTML、CSS和JS为一体的组件效果，主要的插件功能如下图所示：
在这里插入图片描述

使用方法：

引入BootStrap样式 → 引入js文件：jQuery.js + BootStrap.min.js → 复制HTML结构, 并适当调整结构或内容

具体代码区段：

<!-- 存在顺序要求 -->
<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

总结

对于移动适配的前端开发，可以使用的框架远远不止 BootStrap ，但是占据主流的，还是本框架更受欢迎，当然也还有 Foundation框架 、UIkit框架 等UI框架；

不同的框架具有不同的优缺点，但是框架的使用方式大致雷同，只是设计原理小同大异了，但是想要开发兼容性和稳定性更好的项目，还是首先考虑 BootStrap框架；

以上就是所要介绍的移动端Web基础学习的第三节内容，后续即将更新移动Web的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下CSS进阶学习的文章内容，再结合之前所介绍的CSS基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！

评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力学前端的小柴

感谢有你，汪~汪~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值