移动Web开发——响应式布局（二）_响应式web开发左右布局-程序员宅基地

技术标签： css 响应式布局 html bootstrap

响应式布局（二）

学习目标

（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%	750px	970px	1170px
类前缀	.col-xs-	.clo-sm-	.col-md-	.col-lg-
列（column）数	12	12	12	12

● 行（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>

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

在这里插入图片描述

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114288260

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

计网第三章（数据链路层）（二）（可靠传输）_回退n帧协议代码-程序员宅基地

文章浏览阅读783次，点赞4次，收藏2次。本篇主要对可靠传输的三个机制进行说明_回退n帧协议代码

Dubbo简介-程序员宅基地

文章浏览阅读750次。下面这个例子不错，写的很详细可以做个model.在服务提供方实现接口：(对服务消费方隐藏实现)u1.setSex("男");u2.setSex("女");u3.setSex("女");">-- 具体的实现bean -->-- 提供方应用信息，用于计算依赖关系 -->_dubbo

android播放器和视频拍摄中的硬解和软解以及硬编和软编的区别_android video 硬解码和软解码优先级-程序员宅基地

文章浏览阅读1.5k次。转载原文地址：https://blog.csdn.net/ltym2014/article/details/82354606https://blog.csdn.net/lipengshiwo/article/details/81814160视频解码硬解和软解的区别硬解就是硬件解码，指利用GPU来部分代替CPU进行解码，软解就是软件解码，指利用软件让CPU来进行解码。两者的具体区别..._android video 硬解码和软解码优先级

Camtasia2024破解版免费激活码注册码_camtasiastudio软件密钥2024-程序员宅基地

文章浏览阅读914次，点赞21次，收藏17次。此外，软件还支持添加标注、箭头、形状等符号，以突出视频中的重要点，提高观众的注意力。此外，Camtasia 2024标准版还支持多轨编辑，用户可以在不同的轨道上放置视频、音频、图像等元素，实现更复杂的编辑效果。除了基本的录制和编辑功能外，Camtasia 2024标准版还支持添加音频、背景音乐和音效，为视频增添更多的氛围和效果。总的来说，Camtasia 2024标准版的屏幕录制和视频编辑功能非常强大且易于使用，无论是教育工作者制作教学视频，还是内容创作者制作创意视频，都能提供全面的支持和满足用户的需求。_camtasiastudio软件密钥2024

【Tensorflow】如何使用PWC-Net网络输出运动中的光流图像_pwc 怎么获得原图的光流-程序员宅基地

文章浏览阅读5.1k次，点赞7次，收藏38次。对应的项目：PWC-Net对应的论文：PWC-Net: CNNs for Optical Flow Using Pyramid, Warping, and Cost Volume, CVPR 2018 (Oral)在这里由于原项目是使用pytorch和caffee的，所以我找的是一个tensorflow版本项目地址PWC-net是一个能够根据两张图像来输出对应的光流图，光流是一种矢量概念..._pwc 怎么获得原图的光流

selenium的定位web元素的时候，有时候会提示找不到定位元素_unable to locate element: .el-button el-button--pr-程序员宅基地

文章浏览阅读334次。在使用selenium的定位web元素的时候，有时候会提示找不到定位元素，报错：selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {“method”:“css selector”,“selector”:".el-button login_btn el-button–primary el-button–medium"}在这里插入图片描述然后我们检查发现_unable to locate element: .el-button el-button--primary el-button--medium

随便推点

软件设计师真题，设计模式专项练习（三）-程序员宅基地

文章浏览阅读1.7w次，点赞12次，收藏6次。软件设计师真题，设计模式专项练习（三）

Java普通工程打包&Maven工程打包&运行jar包_java pom maven build jar-程序员宅基地

文章浏览阅读468次。文章目录一、普通工程二、MAVEN工程【同时打胖包瘦包】三、执行jar包一、普通工程File --> Project Structure…Artifacts --> "+" --> JAR --> From modules with dependencies...出现如下界面点击OK这里根据流程选择主类，确认后点击"OK"Build–>Build Artifacts…第一次打包点击Build，后面再打包点击Rebuild_java pom maven build jar

K8s 滚动升级与回退_kubectl 回退-程序员宅基地

文章浏览阅读2.8k次，点赞2次，收藏6次。K8s 滚动升级与回退。_kubectl 回退

Linux挂载硬盘systemd: Unit data4.mount is bound to inactive unit dev-disk-by\x2d_unit s3plus-mount-035.mount is bound to inactive u-程序员宅基地

文章浏览阅读2.7k次，点赞4次，收藏5次。集群硬盘故障更换，更换硬盘后挂载不成功：过程如下：1.更换新数据盘，fdisk或lsblk查看磁盘已识别到/dev/sda2.查看uuid不存在格式化磁盘：mkfs.ext4 /dev/sdablkid查看uuid已有3.mount挂载硬盘mount /dev/sda /data1执行挂载命令无报错，df -h 查看无/data14.解决过程检查系统日志/var/log/messages 发现相关异常信息如下：systemd: Unit data4.moun..._unit s3plus-mount-035.mount is bound to inactive unit dev-disk-by\x2dlabel-0

uniapp 定时刷新数据_uniapp 每3s调用一次初始化数据-程序员宅基地

文章浏览阅读3.8k次，点赞3次，收藏15次。进入页面调用方法onShow() { let that = this this.onDevDetails() this.timer = setInterval(function() { that.onDevDetails() }, 3000)},离开页面销毁(跳转下一页)onHide() { if (this.timer) { clearInterval(this.timer); this.timer = null; }},返回上一页停止调用onUnload() {_uniapp 每3s调用一次初始化数据

安卓开发——为TextView文字设置下划线-程序员宅基地

文章浏览阅读1.1k次。方式一：资源文件在values/strings.xml中用包裹文字，即： HelloWorld然后在布局文件中，为TextView设置属性：android:text="@string/hello"方式二：代码1、为TextView设置：TextView textView = (TextView)findViewById(R.id.tv_test); te