<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" \
crossorigin="anonymous">
<!-- 为了更好地兼容移动设备,使用CSS的媒体查询功能 --> <!-- 响应式布局第二点 -->
<meta name="viewport" content="width=device-width,initial-scale=1"/> <!-- width=device-width:宽度为当前设备的宽度, initial-scale=1:代表100%视区窗口用来显示,不放大也不缩小 -->
<style>
.row div{
border:solid 2px red; <!--给每个div设置边框 row指定div里面的边框而不设置外面的 不加就会很粗 -->
}
</style>
</head>
<body>
<!--Bootstrap栅格系统,会将网页分为12等份(宽度),例:设置最外层Div的宽度为1200px,每一份就是100px -->
<!--三层:为了模拟table标签<table><tr><td>,第一层:必须指定container属性,第二层:必须指定row属性 即:多行多列的布局方式-->
<!-- 所有的DIV,如果不指定高度,默认为0,但是会根据DIV中的内容进行自动调整 -->
<div class="container" style="margin: 0px auto;border: solid 5px blue"> <!-- margin 属性设置或返回元素的外边距 -->
<!-- 独立的一行,必须指定class为row,当然也可以单独设置自己的样式 -->
<div class="row">
<!-- col-x-3: 表示在超大屏幕(大于1200像素)的浏览器窗口上显示为3列宽度(即3/12列,也就是container总宽度的25%)-->
<!-- col-lg-3: 表示在大型屏幕(大于992像素)上显示为3列宽度 -->
<!-- col-md-6: 表示在中等屏幕(大于768像素)上显示为6列宽度 -->
<!-- col-sm-6: 表示在小型屏幕(大于576像素)上显示为6列宽度 -->
<!-- col-12: 表示在超小屏幕(小于576像素)上显示为12列宽度,与手机端适配此设计 --> <!-- 响应式布局第一点 -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第一行第一列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第一行第二列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第一行第三列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第一行第四列内容
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第二行第一列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
这是第二行第二列内容
</div>
<!-- 类d-none:隐藏 d-md-block表示在中等屏幕以下浏览器上隐藏改元素 -->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none d-sm-block"> <!-- d-sm-block:在sm大小的所有设备上不隐藏 -->
这是第二行第三列内容
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 d-none">
这是第二行第四列内容
</div>
</div>
</div>
</body>
</html>
Boostrap响应式布局
最新推荐文章于 2023-01-02 21:29:44 发布