移动web开发 17-1 响应式布局 bootstrap首页框架阿里百秀项目

技术2026-03-14 6

1 响应式开发原理

1.1 响应式开发原理

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

1.20媒体查询(重点)

媒体查询区间的写法当屏幕宽度<=768,body的背景颜色是黄色 max-width:屏幕宽度小于等于某个尺寸 min-width: 屏幕宽度大于等于某个尺寸

移动端先写公共样式,建议从小到大写:移动端优先 min-width pc端先写公共样式,建议从大到小写:移动端优先 max-width

1.21 响应式布局容器

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：宽度为 100%小屏幕（平板，大于等于 768px,小于992）：宽度为 750px中等屏幕（桌面显示器，大于等于 992px ,小于1200）：宽度为 970px大屏幕（大桌面显示器，大于等于 1200px）：宽度为 1170px

这里有个注意点!!!

pc端优先! max-width:1200px width:970px 一定是最大值为不超过上一个的数据,但是实际宽度为970px max-width:992px width:750px 一定是最大值为不超过上一个的数据,但是实际宽度为750px 下面以此类推

先写版心公共布局 pc端优先,其他特殊样式覆盖掉pc端样式 .container { width: 1170px; margin: 0 auto; } 这里边距1% .container div { float: left; width: 23%; margin: 1%; height: 200px; } @media (max-width: 1200px) { .container { width: 970px; } .container div { width: 31%; } } @media (max-width: 992px) { .container { width: 768px; } .container div { width: 40%; } } @media (max-width: 768px) { .container { width: 100%; } .container div { width: 80%; } }

1.22 双版心布局

/* pc端优先先写pc端公共样式其他端殊样式覆盖掉pc样式 */ .left { float: left; width: 30%; height: 1000px; background-color: pink; } .right { float: left; width: 70%; height: 1000px; background-color: skyblue; } /* 当屏幕宽度小于992px时,left隐藏,right占100% */ @media (max-width: 992px) { .left { display: none; } .right { width: 100%; } }

2. bootstrap

2.1bootstrap基本使用

难点:1.类名很多 2.你要知道它写的啥 3.主要讲了按钮,表格,表单 4.修改属性一般要给Li或者其他的父元素

Bootstrap 使用四步曲：

创建文件夹结构创建 html 骨架结构引入相关样式文件 !!! 前面两个是js文件,jquery一定要在上面,不然会出问题 < scriptsrc=" jquery.min.js"> </scriptsrc> < scriptsrc=" bootstrap.min.js"> </scriptsrc>  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

书写内容直接拿Bootstrap 预先定义好的样式来使用

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

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

2.2 bootstrap布局容器

这里是移动端优先!!!

移动端 0-768px 没有写默认100% pad 768-992px 750px 小pc 992-1200px 970px 大Pc >1200 1170px 左右各有15px的内边距

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

.container-fluid

流式布局容器 100%宽度占据全部视口（viewport）的容器。

2.3 bootstrap栅格系统

2.31如果想让盒子之前有距离就给Border:10px solid #fff;

给边框,颜色和背景颜色一样,这样距离效果就出来了

2.32核心技术:浮动加百分比

如果lg.md,sm,xs都写了 ,那就需要从小到大去覆盖

按照不同屏幕划分为1~12 等份行（row）有左右-15px的外边距, 可以去除父容器左右padding:15px边距xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列每一列默认有左右15像素的 padding可以同时为一列指定多个设备的类名，以便划分不同份数例如 class=" col-lg-3 col-md-4 col-sm-6 col-xs-12"

2.4 bootstrap嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内。最好再给一行row,取消container的padding值,并且让里面的子元素自动和父级一样高

<div class="col-sm-4"> <div class="row"> <div class="col-sm-6">小列</div> <div class="col-sm-6">小列</div> </div> </div>

2.5 hidden-xs隐藏 visible-xs显示

不占位置! hidden-xs,sm,md,lg只再某个屏幕尺寸隐藏,其他屏幕显示 visible-xs,sm,md,lg只在某个屏幕上显示,其他屏幕隐藏

2.5 列偏移

使用 .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>

2.6 列排序

通过使用 .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>

2.7 响应式工具

1.visible-xx显示<span class="visible-lg">我来啦</span> 2.hidden-xx隐藏<div class="col-lg-3 hidden-sm">我会突然消失</div>

2.2 bootstrap首页正常写法利用浮动百分比

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="./css/base.css" /> <link rel="stylesheet" href="./css/index.css" /> </head> <body>  <div class="nav">  <div class="container"> <ul> <li><a href="#">Bootstrap中文网</a></li> <li><a href="#">Bootstrap2中文文档</a></li> <li><a href="#">Bootstrap3中文文档</a></li> <li><a href="#">Bootstrap4中文文档</a></li> <li><a href="#">Less教程</a></li> <li><a href="#">jQueryAPI</a></li> <li><a href="#">网站实例</a></li> <li class="about"><a href="#">关于</a></li> <li class="menu"> <a href="#"><img src="./images/menu.jpg" alt="" /></a> </li> </ul> </div> </div>  <div class="focus"> <h2>Bootstrap</h2> <h3>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</h3> <a href="#"> Bootstrap中文文档v3.37</a> </div>  <div class="list container"> <ul> <li> <a href="#" ><img src="./images/jqueryapi.png" alt="" /> <p> Webpack 是前端资源模块化管理和打包工具 Webpack是前端资源模块化管理和打包工具 Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。 </p> </a> </li> </ul> </div> </body> </html> 从这里开始是css!!!!!!!! * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 1170px; margin: 0 auto; } /* 先写公共样式 pc端样式,后面其他样式把pc端层叠掉 */ .nav { width: 100%; background-color: #333; height: 42px; } /* 大pc >= 1200px 1170px 小pc >992px 970px ipad >=768 750px 手机 <768 100% */ .nav ul .about, .nav ul .menu { float: right; } .nav ul .menu { display: none; } .nav li { float: left; height: 42px; line-height: 42px; list-style-type: none; } .nav li:first-child { font-size: 20px; } .nav li a { color: #eee; margin: 0 10px; text-decoration: none; } /* 焦点图 */ .focus { width: 100%; height: 467px; background-image: url(../images/bs.png), -webkit-linear-gradient(left, skyblue, pink); text-align: center; color: #fff; } .focus h2 { padding-top: 107px; margin-bottom: 44px; font-size: 76px; } .focus h3 { font-size: 35px; font-weight: normal; } .focus a { display: inline-block; width: 290px; height: 50px; margin-top: 50px; background-color: #337ab7; line-height: 50px; font-size: 16px; color: #fff; border-radius: 10px; box-shadow: 1px 2px 0 0 #2a6496; text-shadow: 1px 1px 1px #333; } .list li { float: left; width: 23%; height: 330px; border: 1px solid #ccc; margin: 10px 1%; padding: 5px; } .list li img { width: 100%; } .list li p { margin-top: 20px; }

3.阿里百秀项目首页

3.1 技术选型

Bootstrap 使用四步曲：

创建文件夹结构

创建 html 骨架结构

引入相关样式文件

书写内容

container宽度修改

因为本效果图采取 1280的宽度，而Bootstrap 里面 container宽度最大为 1170px，因此我们需要手动改下container宽度

/* 利用媒体查询修改 container宽度适合效果图宽度 */ @media (min-width: 1280px) { .container { width: 1280px; } }

这个项目的重点: 1.利用bootstrap,分配列 2.利用媒体查询,调整不同宽度下的内容分布 3.在不同宽度下使用hidden-xs 和visible-xs来隐藏和显示不同的内容

4.移动端布局总结

4.1移动端主流方案

1.单独制作移动端页面(主流)

比如Jd手机版,淘宝触屏版,苏宁手机版

2.响应式页面兼容移动端(其次)

比如三星手机官网

5.移动端技术选型

流式布局(百分比布局)flex弹性布局推荐重点学习rem适配布局推荐重点学习响应式布局:一套页面可以适配多个不同的终端,适用于简单的企业站,技术类站,不适合复杂的电商类,门户类

建议:选取一种为主要技术选型,其他技术为辅助,这种混合技术开发

Processed: 0.009, SQL: 10

移动web开发 17-1 响应式布局 bootstrap首页 框架阿里百秀项目