目录
5⃣️响应式工具
1. 响应式开发
1)原理
原理:通过媒体查询针对不同宽度的设备进行布局和样式的设置,从而使配不同设备的目的。
2)响应式布局容器
响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果。
原理:在不同屏幕下通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现在不同屏幕下看到不同的页面布局和样式变化。
<style>
.container {
height: 100px;
background-color: pink;
}
/* 1.超小屏幕 */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2.小屏幕 */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3.中等屏幕 */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4.大屏幕 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
2. Bootstrap前端开发框架
1) 布局容器
Bootstrap预先定义好了.container类。
1. container类
- 响应式布局的容器,固定宽度
- 大屏(>=1200px),宽度定为1170px
- 中屏(>=992px),宽度定为970px
- 小屏(>=768px),宽度定为750px
- 超小屏(100%)
2. container-fluid类
- 流式布局容器,百分百宽度
- 占据全部视口(viewport)
- 适合于单独做移动端开发
2) Bootstrap栅格系统
将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。
随着屏幕或视口(viewport)尺寸的增加,系统会自动氛围最多12列。
1⃣️栅格选项参数
<style>
/* 给每个子元素加上边框 */
div[class^="col-lg-"] {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="row">
<!-- 份数相加刚好等于12,则子元素会占满整个container的宽度 -->
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<div class="row">
<!-- 份数相加小于12,则子元素占不满整个container,会有空白部分 -->
<div class="col-lg-8">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-2">3</div>
</div>
<div class="row">
<!-- 份数相加大于12,则子元素会另外起一行显示 -->
<div class="col-lg-6">1</div>
<div class="col-lg-6">2</div>
<div class="col-lg-6">3</div>
</div>
</body>
</html>
效果图:
2⃣️列嵌套
一个列内可以再分成若干份小列,添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
div[class^="col"] {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<!-- 添加一个新的row,可以取消父元素的padding值并且高度会自动和父元素的一样高 -->
<div class="row">
<!-- 一个小列里面也是12等分 -->
<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>
效果图:
3⃣️ 列偏移
使用.col-md- offset-*类可以将列向右侧偏移,相当于是为当前元素添加了左侧的边距(margin)。
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
[class^="col"] {
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 ">左侧</div>
<!-- 添加左边的边距 -->
<div class="col-lg-4 col-lg-offset-4">右侧</div>
</div>
<div class="row">
<!-- 居中显示,则12-8=4,左右各平分4/2=2,偏移2 -->
<div class="col-lg-8 col-lg-offset-2">中间</div>
</div>
</div>
</body>
</html>
效果图:
4⃣️列排序
通过.col-lg-push-*和.col-lg-pull-*类就可以改变列的顺序。
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
[class^="col"] {
height: 50px;
background-color: skyblue;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div8 class="row">
<div class="col-lg-4">左侧</div>
<div class="col-lg-8">右侧</div>
</div8
<div class="row">
<!-- 向右推8份 -->
<div class="col-lg-4 col-lg-push-8">左侧</div>
<!-- 向左拉4份 -->
<div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>
</div>
</body>
</html>
效果图:
5⃣️响应式工具
显示某个页面的内容:visible-xs,visible-sm,visible-md,visible-lg