移动Web开发——响应式布局（二）

最新推荐文章于 2023-03-14 12:42:42 发布
最新推荐文章于 2023-03-14 12:42:42 发布
阅读量473 收藏 2
点赞数
分类专栏： 响应式布局 文章标签： css bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhr_beyond/article/details/114288260
版权

响应式布局（二）

学习目标

（1）能够说出响应式原理

（2）能够使用媒体查询完成响应式导航

（3）能够使用 bootstrap 的栅格系统

（4）能够使用 bootstrap 的响应式工具

（5）能够独立完成阿里百秀首页案例

1.bootstrap使用（只用样式库）

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

bootstrap 使用四个步骤：1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容

（1）bootstrap下载

下载地址https://v3.bootcss.com/.
在这里插入图片描述
在这里插入图片描述

（2）创建文件夹结构

在这里插入图片描述

（3）创建骨架结构并引入样式（先只引入样式）

找到基本模板复制源码
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
  </head>
  <body>
	  <h1>hello world</h1>
  </body>
</html>

（4）书写内容

在这里插入图片描述

2.bootstrap按钮

进入文档，找到按钮样式
在这里插入图片描述
复制下来，代码如下

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
	<style>
		<!-- 也可以修改样式 注意权重-->
		.login{
			width: 80px;
		}
	</style>
  </head>
  <body>
	  <button type="button" class="btn btn-success">Success</button>
	  <!--通过类名来控制样式-->
	  <div class="btn btn-success login">登录</div>
	  <div class="btn btn-danger">失败</div>
  </body>
</html>

在这里插入图片描述

3.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container容器，Bootstrap 预先定义好了这个类，叫.container

（1）container类

● 响应式布局的容器 固定宽度
● 大屏（ >= 1200px）宽度定为 1170px
● 中屏（ >= 992px）宽度定为970px
● 小屏（ >=768px）宽度定为750px
● 超小屏（100%）

（2）container-fluid类

● 流式布局容器 百分百宽度
● 占据全部视口（viewport）的容器
● 适合于单独做移动端开发

4.bootstrap栅格系统

（1）栅格系统

将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

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

Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container 的宽度不同，我们再把container 划分为12等份

（2）栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

屏幕大小超小屏幕（<768px）小屏设备（>=768px）中等屏幕（>=992px）宽屏设备（>=1200px）
.container 最大宽度自动100%750px970px1170px
类前缀.col-xs-.clo-sm-.col-md-.col-lg-
列（column）数12121212

● 行（row）必须放到container布局容器里面

● 实现列的平均划分 需要给列添加类前缀

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

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

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

● 可以同时为一列指定多个设备的类名，以便划分不同份数

例子

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
	<title></title>
	<style>
		[class^="col"]{
			border: 1px solid #000;
		}
		.container .row:nth-child(1){
			background-color: pink;
		}
	</style>
  </head>
  <body>
	  <div class="container">
		  <div class="row">
			  <div class="col-lg-3 col-md-4 col-min-6 col-xs-12">1</div>
			  <div class="col-lg-3 col-md-4 col-min-6 col-xs-12">2</div>
			  <div class="col-lg-3 col-md-4 col-min-6 col-xs-12">3</div>
			  <div class="col-lg-3 col-md-4 col-min-6 col-xs-12">4</div>
		  </div>
		  <div class="row">
			  <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>
		  <div class="row">
			  <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>
	  </div>
  </body>
</html>

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

（3）栅格系统列嵌套

一个列内再分成若干份小列，可以通过添加一个新的 .row元素和一个系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内

例子

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
	<title></title>
	<style>
		.row>div{
			height: 50px;
			background-color: pink;
		}
	</style>
  </head>
  <body>
	  <div class="container">
		  <div class="row">
			  <div class="col-lg-4">
				<div class="row">
					<div class="col-lg-6">a</div>
					<div class="col-lg-6">b</div>
				</div>
			  </div>
			  <div class="col-lg-4">2</div>
			  <div class="col-lg-4">3</div>
		  </div>
	  </div>
  </body>
</html>

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

（4）列偏移

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

例子

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
	<title></title>
	<style>
		.row>div{
			height: 50px;
			background-color: pink;
		}
	</style>
  </head>
  <body>
	  <div class="container">
		  <div class="row">
			  <div class="col-md-4 ">左侧</div>
			  <!-- 偏移份数 = 12 - 两个盒子的份数 -->
			  <div class="col-md-4 col-md-offset-4">右侧</div>
		  </div>
		  <div class="row">
			  <!-- 如果只有一个盒子，偏移份数 = (12 - 盒子大小)/2-->
			  <div class="col-md-8 col-md-offset-2">中间盒子</div>
		  </div>
	  </div>
  </body>
</html>

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

（5）列排序

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

例子

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
	<title></title>
	<style>
		.row div{
			height: 50px;
			background-color: pink;
		}
	</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>
</html>

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

5. 响应式工具

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

类名超小屏幕（<768px）小屏设备（>=768px）中等屏幕（>=992px）宽屏设备（>=1200px）
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏

与之相反的，visible-xs visible-sm visible-md visible-lg 会显示内容

例子

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
	<title></title>
	<style>
		.row div{
			background-color: purple;
			height: 60px;
			font-size: 50px;
		}
		.row div:nth-child(2){
			background-color: pink;
		}
		span{
			color: green;
		}
	</style>
  </head>
  <body>
	  <div class="container">
		  <div class="row">
			  <div class="col-xs-3">
				  <span class="visible-lg">我会显示昂</span>
			  </div>
			  <div class="col-xs-3 hidden-md hidden-xs">我会变魔术</div>
			  <div class="col-xs-3">3</div>
			  <div class="col-xs-3">4</div>
		  </div>
	  </div>
  </body>
</html>

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

在这里插入图片描述

红人日天
关注
专栏目录
移动web开发—— 响应式布局Bootstrap
weixin_52819925的博客
08-03 748
Bootstrap Bootstrap简介 Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 中文网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐网站：http://bootstrap.css88.com/ Bootstrap：是用于开发响应式布局，移动设备优先的web项目。 框架：顾名思义就是一套架构，
移动Web开发——响应式布局（完结）、阿里百秀首页实战
zhr_beyond的博客
03-03 1105
响应式布局（完结） 因为网页实在是访问不了，所以直接用现有的素材做了。 1.技术选型 方案：采取响应式页面开发方案 技术：bootstrap框架 设计图：采取1280px设计尺寸
div移动块（用于web上的小移动栏）
08-25
一个简单的javascript小程序，用于网页设计中的div移动块、窗口、广告栏等。
响应式布局
小白小白从不日别的博客
07-15 807
响应式布局可以更好的帮助我们去适配PC端和移动端以及不同屏幕大小的移动端 所谓的响应式设计就是让我们的页面在不同的设备上可以正常使用 主要的方法： 隐藏：确定好哪一部分的内容是可以在移动端进行隐藏的，比如说导航、个人信息这些我们可以采用以点击菜单弹出来的方式进行展示 折行：比如说我们有一个类似特性列表这样一个要去介绍一个事物的优点呀这些的，那么在PC端它可能是一行显示的，但是在移动端我们可以让它一行显示一个或者两个 自适应空间：这个就比如两栏布局或者三栏布局一样，有一部分内容宽度是固定的，..
bootstrap系列之响应式布局及相关的visible-sm、hidden-xs等的使用
acn70501的博客
06-14 418
https://www.jianshu.com/p/7d3fef79fbbf 转载于:https://www.cnblogs.com/sulanlan/p/11020716.html
移动web网页开发（下篇）——rem适配布局和响应式布局开发
m0_53619602的博客
06-27 341
栅格系统英文为"grid systems" ,也有人翻译为"网格系统” 。它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口( viewport )尺寸的增加,系统会自动分为最多12列。 Bootstrap里面container宽度是固定的,但是不同屏幕下, container的宽度不同,我们再把container划分为12等份...
移动web开发—— 流式布局
weixin_52819925的博客
08-02 304
视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。 布局视口 layout viewport 视觉视口 visual viewport 理想视口 ideal viewport 将布局视口的宽度修改为视觉视口，就是理想视口。 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。 iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都
【5-12】《响应式布局》——响应式布局介绍和版心、BootStrap、使用BootStrap步骤、BootStrap入门基础、BootStrap案例
程序媛乐园
10-30 996
文章目录响应式布局一、介绍和版心二、BootStrap使用bootstrap做轮播图案例完整代码效果图总结 响应式布局 一、介绍和版心 前面已经简单接触过。响应式布局就是代码随着屏幕大小的改变显示不同。 档位划分: 媒体查询：档位划分；市场上默认的划分；三个节点、四个档位 w<768 超小屏幕（xs）（手机，学习rem布局里面的档位划分都是在这个范围） 768<= w <992 小屏设备（sm）（平板） 992<= w <1200 中等屏幕（md）（小显示屏的PC显示器）
一键创建多个文件夹.zip
08-27
批处理，一键创建多个文件夹，可编辑文件夹名
移动布局基础之 响应式布局
weixin_46051426的博客
01-05 360
响应式开发 1.1 响应式开发原理 使用媒体查询针对不同宽度设备进行布局和样式的设置，从而适配不同设备 1.2 响应式布局容器 响应式需要一个父级作为布局容器，来配合自己元素来实现变化效果 通过媒体查询改变布局容器的大小，再改变里面子元素的排列方式和大小 2. bootstrap前端开发框架 2.1 bootstrap是基于html,css,javascript的最受欢迎的前端框架 下载网址：http://bootstrap.css88.com/ 标准化的html+css编码规范 提供了一套简洁，直观，强.
响应式布局-栅格系统
最新发布
weixin_62361880的博客
03-14 866
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。指定该元素在不同的设备上，所占的格子数目。1. xs：超小屏幕 手机 (<768px) :col-xs-12。工具：HBuilder、谷歌浏览器、bootstrap插件、jquery-2.1.0.js插件。实现步骤：二、定义容器，这里使用div盒子。* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。实现步骤：一、打开HBuilder软件将下载好的bootstrap的插件和jquery引入。
利用row进行页面布局，很不错的布局方式
xiaosongwahaha的博客
12-21 6635
用户画像                                                                     <span style="float:left;margin-top:10px">会员号： <input class="form-control" style="float:left;width:250px;margin-to
分屏显示
weixin_39323526的博客
09-24 317
xrandr --output DP-3 --left-of HDMI-0 --auto ———————————————————————————— DP-3是新的屏幕，HDMI-0是原本的屏幕，新屏幕添加在原来的左边，所以是left
【转及总结】Bootstrap 框架 栅格布局系统底层设计原理
weixin_30235225的博客
08-26 463
如果你是初次接触Bootstrap，你一定会为它的栅格布局感到敬佩。事实上，这个布局系统提供了一套响应式的布局解决方案。 既然这么好用，那他是如何用CSS来实现的呢？ 我特意去Bootstrap官方下载了源代码进行分析了一番，看完之后果然有了收获，不过我只看了栅格布局的那块代码，其实也很简单，不必担心不懂，你只需要要基础的CSS知识即可。 前提条件（Bootstrap 自带） 首...
栅格系统源码分析
你好牛蛙！
11-04 1369
栅格的行： 源码中，.row的函数体是.make-row 这里行的margin（外边距）都设置为负槽宽的一半 在效果中是这样
bootstrap中container类和container-fluid类的区别
热门推荐
Hey firefly
03-26 6万+
container类和container-fluid类
响应式布局深入理解：视口与约束
响应式布局是Web开发领域中的一个重要概念，它旨在创建能够根据用户设备和环境动态调整布局和功能的网站。这种设计方法使得网页在桌面、平板电脑、智能手机等不同设备上都能呈现良好的视觉效果。响应式布局通常依赖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值