移动WEB开发-响应式布局

目录

1. 响应式开发

1)原理

2)响应式布局容器

2. Bootstrap前端开发框架

1) 布局容器

1. container类

2. container-fluid类

2) Bootstrap栅格系统

1⃣️栅格选项参数

2⃣️列嵌套

3⃣️ 列偏移

4⃣️列排序

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值