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

响应式布局的原理

bootstrap4简单使用和入门03-响应式布局_第1张图片

 

页面源码

 

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>responsivetitle>
    <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>
    
    <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.网页内容在展示的时候,如果屏幕在某些极端情况下放大或者缩小而展示效果始终一样就会让内容无法显示完整,体验非常差

bootstrap4简单使用和入门03-响应式布局_第2张图片

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

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

bootstrap4简单使用和入门03-响应式布局_第3张图片

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

bootstrap4简单使用和入门03-响应式布局_第4张图片

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

bootstrap4简单使用和入门03-响应式布局_第5张图片

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

bootstrap4简单使用和入门03-响应式布局_第6张图片

你可能感兴趣的:(bootstrap4简单使用和入门03-响应式布局)