您的位置：首页 > Web前端 > BootStrap

bootstrap4简单使用和入门03-响应式布局

2018-03-13 15:31 344 查看
响应式布局的原理



页面源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>responsive</title>
<link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">
<style type="text/css">
.content > div{
height: 100px;
line-height: 100px;
text-align: center;
color: #333;
background: #cccccc;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 网页内容在展示的时候，如果屏幕在某些极端情况下放大或者缩小而展示效果始终一样就会让内容无法显示完整
bootstrap就出现了响应式布局，响应式布局就是解决这种问题产生的
利用栅格系统适应在不同的分辨率下预设占据的列
栅格系统一共12列，如下设置
1.在浏览器的分辨率>=1200px时，则每个div块占据3列，即每行显示4个div块
2.在浏览器的分辨率>=992px && <= =1200px时，则每个div块占据3列，即每行显示4个div块
3.在浏览器的分辨率>=720px时，则每个div块占据4列，即每行显示3个div块
4.在浏览器的分辨率>=576px时，则每个div块占据6列，即每行显示2个div块
5.在浏览器的分辨率<576px时，则每个div块占据12列，即每行显示1个div块
-->
<div class="container">
<div class="row">
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
</div>
</div>
</body>
</html>


1.网页内容在展示的时候，如果屏幕在某些极端情况下放大或者缩小而展示效果始终一样就会让内容无法显示完整，体验非常差



2.在浏览器的分辨率>=1200px时，则每个div块占据3列，即每行显示4个div块

在浏览器的分辨率>=992px && <= =1200px时，则每个div块占据3列，即每行显示4个div块



3.在浏览器的分辨率>=720px时，则每个div块占据4列，即每行显示3个div块



4.在浏览器的分辨率>=576px时，则每个div块占据6列，即每行显示2个div块



5.在浏览器的分辨率<576px时，则每个div块占据12列，即每行显示1个div块

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航