第二章：栅格系统

最新推荐文章于 2024-05-29 11:35:13 发布

一对李笠

最新推荐文章于 2024-05-29 11:35:13 发布

阅读量261

点赞数 2

分类专栏：新人入门 bootstrap 文章标签： html 前端 css bootstrap

本文链接：https://blog.csdn.net/changpili123456/article/details/126999183

版权

新人入门同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

bootstrap

5 篇文章 0 订阅

订阅专栏

class container 上下左右都有间距 padding:x container-fluid width:100%
栅格系统（默认平均分成12份）根据屏幕的大小自适应、可以偏移、可以嵌套
1. 栅格效果展示
屏幕自适应尺寸
.col .col-sm-x .col-md-x .col-lg-x .col-xl-x
媒体查询
@medie screen and (min-width:600px){ 选择器{ css属性：css值 } }
偏移可以与屏幕自适用一起使用，X为序号1~11
offset-x offset-md-4 偏移 1-11
排序X为序号1~11
order-X
Rem 相对单位以根节点（HTML）font-size大小来决定

代码实现

<div class="container">
			<h2>第二章</h2>
			<ol>
				<li>class container 上下左右都有间距 <code>padding:x container-fluid width:100%</code> </li>
				<li>栅格系统（默认平均分成12份）根据屏幕的大小自适应、可以偏移、可以嵌套
					<br />
					展示效果<div class="row ">
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>
						<div class="col-1 border bg-info">1</div>

						<div class="col-4 border bg-info">4</div>
						<div class="col-4 border bg-info">4</div>
						<div class="col-4 border bg-info">4</div>
						<div class="col-6 border bg-info">6</div>
						<div class="col-6 border bg-info">6</div>
						<div class="col-4 border bg-info">4</div>
						<div class="col-8 border bg-info">8</div>
						<div class="col-12 border bg-info">12 </div>
					</div>
				</li>
				<li>
					屏幕自适应尺寸<br>
					<code>.col .col-sm-x .col-md-x .col-lg-x .col-xl-x</code>
				</li>
				<li>
					媒体查询<br />
					<code>@medie screen and (min-width:600px){
						选择器{
						css属性：css值
						}
						}</code>
				</li>
				<li>
					偏移 <small>可以与屏幕自适用一起使用，X为序号1~11</small><br />
					<code>offset-x offset-md-4 偏移 1-11</code>
				</li>
				<li>排序<small>X为序号1~11</small> <br>
					<code>order-X</code>
				</li>
				<li>Rem 相对单位 以根节点（HTML）font-size大小来决定</li>
			</ol>
		</div>