1. 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:
①小于768的为超小屏幕(手机)
② 768~992之间的为小屏设备(平板)
③ 992~1200的中等屏幕(桌面显示器)
④大于1200的宽屏设备(大桌面显示器)
2 .响应式布局容器
响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。父容器版心的尺寸划分:
①超小屏幕(手机,小于 768px):设置宽度为 100%
②小屏幕(平板,大于等于 768px):设置宽度为 750px
③中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
④ 大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
3.Bootstrap的介绍
Bootstrap中文网 , Bootstrap官网
创建 html 骨架结构
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好呀开始学习吧!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
引入相关样式文件
<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
bootstrap布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
或者.container-fluid
容器,它提供了两个作此用处的类。
.container
- 响应式布局的容器 固定宽度
- 大屏 ( >=1200px) 宽度定为 1170px
- 中屏 ( >=992px) 宽度定为 970px
- 小屏 ( >=768px) 宽度定为 750px
- 超小屏 (100%)
.container-fluid
- 流式布局容器 百分百宽度
- 占据全部视口(viewport)的容器。
bootstrap栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
①按照不同屏幕划分为1~12 等份
②行(row) 可以去除父容器作用15px的边距
③可以通过类名 col-xs-
栅格的数量(设置超小屏幕)、 col-sm-
栅格的数量(设置小屏幕)、 col-md-
栅格的数量(设置中等屏幕)、 col-lg-
栅格的数量(设置大屏幕)
④如果列的栅格得数量加一起没有超过12可能出现空白并在一行显示,如果列的栅格数量加一起超过12,则在开始超过12的那个换行显示,多余的列(column)所在的元素将被作为一个整体另起一行排列
⑤每一列默认有左右15像素的 padding
⑥ 可以同时为一列指定多个设备的类名,以便划分不同份数 eg: class="col-md-4 col-sm-6"
如果想设置子元素的宽度,可根据占据的份数来决定子元素的宽度,eg:子元素占据3等份,那么就相当于设置子元素width:25%,子元素占据4等份,那么就相当于设置子元素width:33.333%
栅格嵌套
一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
<!-- 列嵌套 -->
<style>
.row>div {
height: 50px;
background-color: pink;
/* margin: 0 10px; */
}
</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>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)
<!-- 列偏移 -->
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">左侧</div>
<!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
<div class="col-md-3 col-md-offset-6">右侧</div>
</div>
<div class="row">
<!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
<div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>
</div>
</body>
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序
<style>
.row>div {
height: 50px;
background-color: pink;
/* margin: 0 10px; */
}
</style>
<!-- 列排序 -->
<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>
利用hidden-xs等类名进行不同屏幕的显示或者隐藏
图片会在超小屏幕隐藏,所以给图片添加类名hidden-xs
即可
<style>
.row div {
height: 300px;
background-color: purple;
}
.row div:nth-child(3) {
background-color: pink;
}
span {
font-size: 50px;
color: #fff;
}
</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">2</div>
<div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>