(Bootstrap)响应式布局

一、基本概念

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局,可以兼容不同分辨率的设备

传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。

实现:依赖于栅格系统,将一行平均分成12个格子,可以指定元素占几个格子

* 步骤:
	(1)定义容器:相当于之前的table
			* 容器分类:
				* container:两边留白
				* container-fluid:每一种设备都是100%宽度
	(2)定义行:相当于之前的tr,样式:row
	(3)定义元素:指定该元素在不同的设备上,所占的格子数目,
				 样式:col-设备代号-格子数目

栅格参数:
在这里插入图片描述

注意:

1)一行中如果格子数目超过12,则超出部分自动换行。
(2)栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
(3)如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

二、示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <style>
        .inner{
            border:1px solid red;
        }
    </style>
</head>
<body>
<!--1.定义容器-->
<div class="container">
    <!--2.定义行-->
    <div class="row">
        <!--3.定义元素
            在大显示器一行12个格子
            在pad上一行6个格子
        -->
        <!--这里同时定义了大屏幕和小屏幕两种情况都适用-->
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
        <div class="col-lg-1 col-sm-2 inner">栅格</div>
    </div>
</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南淮北安

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值