Boostrap 第二章栅格系统

最新推荐文章于 2022-09-21 19:22:56 发布

LW0512

最新推荐文章于 2022-09-21 19:22:56 发布

阅读量571

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/LW0512/article/details/108936993

版权

本文介绍了Bootstrap的栅格系统，包括其基本概念、列嵌套、列偏移、列排序和响应式工具的应用。栅格系统由容器、行和列构成，最多可容纳12列，并能实现灵活的布局调整和响应式设计。

摘要由CSDN通过智能技术生成

栅格系统

1.什么是栅格系统？

栅格系统又名网格系统，是有容器+行+列组成
容器最多容纳12列，多一列会在下一行显示，少一列，会把该列的位置空着

名字	类名	作用
容器	.container	响应式的布局容器
-	-	大屏（>=1200px）宽度是1170px
-	-	中屏（>=992px）宽度是970px
-	-	小屏（>=768px）宽度是750px
-	-	超小屏（100%）
容器	.container-fluid	流失布局布局容器
-	-	流失布局百分百的宽
-	-	适合做移动端开发

名字	类名	作用
栅格系统		bs中的栅格系统将容器平均分为了12列
参数		bs中行和列的组合来创建页面
行	.row	行是放在容器中的
列	.column	列是当中行中的
大屏	.col-lg-	大屏（>=1200px）下用到的列的类名是.col-lg
中屏	.col-md-	.col-md-4 表示中屏下，该元素占比是4列
小屏	.col-sm-	每一列默认左右都有15px的padding
超小屏	.col-xs-	列里面可以同时添加其他屏下的类

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 做移动端就写 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
		<style type="text/css">
			div{
    
				text-align: center;
				font-size: 50px;
			}
			.box{
    
				/* 容器的宽是定义好的
					浏览器窗口>=1200  容器的宽是1170px
				    1200>浏览器窗口>992px  容器的宽是970px
					992>浏览器窗口>768px    容器的宽是750px
					768>浏览器窗口    容器的宽是100%
				 */
				/* width: 1200px; */
				height: 300px;
				border: 1px solid red;
			}
			[class^=col]:nth-child(1){
    
				height: 100px;
				background: yellow;
			}
			[class^=col]:nth-child(2){
    
				height: