CSS_bootstrap响应式布局基础使用

太过爱你忘了你带给我的痛 2022-11-14 11:51 253阅读 0赞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap-grid.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta2/js/bootstrap.bundle.js"></script>
    </head>
    <body>
        <div class="row">
            <div class="col-12 col-md-3 col-lg-6 col-xl-3">
                1
            </div>
            <div class="col-12 col-md-3 col-lg-6 col-xl-3">
                2
            </div>
            <div class="col-12 col-md-3 col-lg-6 col-xl-3">
                3
            </div>
            <div class="col-12 col-md-3 col-lg-6 col-xl-3">
                4
            </div>
        </div>
    </body>
</html>
<style> .row div { background: red; border: 1px solid #000; box-sizing: border-box; } </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关响应式布局

一、响应式开发 1.1、概述就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2、响应式布局容器 1

落日映苍穹つ/ 2023年10月14日 11:07/ 0 赞/ 164 阅读

相关响应式布局

（给前端大全加星标，提升前端技能） > 作者：浪里行舟 > > https://github.com/ljianshu/Blog/issues/38 前言

柔光的暖阳◎/ 2023年08月17日 16:34/ 0 赞/ 249 阅读

相关 CSS_bootstrap响应式布局基础使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na

太过爱你忘了你带给我的痛/ 2022年11月14日 11:51/ 0 赞/ 254 阅读

相关响应式布局

目录： 1. 响应式布局介绍 2. 响应式布局特点 3. 响应式布局的实现方式 4. 响应式布局媒体查询使用 5. 响应式布局示例 1. 示例1

快来打我*/ 2022年10月18日 01:38/ 0 赞/ 470 阅读

相关响应式布局

<table style="height:40px; border-color:a9a9a9; border-width:0px; background-color:a9a9a

àì夳堔傛蜴生んèń/ 2022年07月11日 08:14/ 0 赞/ 397 阅读

相关响应式布局

一、视口（viewport）移动前端的viewport就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小。手机端和PC端视口存在差异，电脑端视口等于其分辨率，手机端的

迈不过友情╰/ 2022年03月31日 10:54/ 0 赞/ 451 阅读

相关响应式布局

4.1 meta 标签最简单的处理方式是加上一个 meta 标签 <meta name="viewport" content="width=device-width,

左手的ㄟ右手/ 2022年03月09日 10:06/ 0 赞/ 468 阅读

相关响应式布局

响应式布局响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享

本是古典何须时尚/ 2022年01月29日 00:47/ 0 赞/ 451 阅读

相关响应式布局

简介什么是响应式布局? 同一个页面在不同屏幕尺寸下有不同的布局传统的开发方式是PC端开发一套,手机一套使用响应式布局只需要开发一套

以你之姓@/ 2022年01月20日 10:47/ 0 赞/ 504 阅读

相关响应式布局

一、什么是响应式布局？响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不

浅浅的花香味﹌/ 2021年12月22日 20:17/ 0 赞/ 502 阅读