<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
<script src="../JS/jquery-3.2.1.min.js"></script>
<script src="../JS/bootstrap.js"></script>
<style type="text/css">
div[class*='col-']{background: #666;border: 1px #00f solid;color: white;min-height: 50px;}
</style>
</head>
<body>
<!-- <div class="container-fluid">
aaaaa
</div> -->
<div class="container">
<div class="row">
<div class="col-lg-1">col-lg-1</div>
<div class="col-lg-11">col-lg-11</div>
<!-- 一共12列 -->
</div>
<div class="row">
<div class="col-md-6">col-md-1</div>
<div class="col-md-6">col-md-1</div>
</div>
<div class="row">
<div class="col-sm-4">col-sm-1</div>
<div class="col-sm-4">col-sm-1</div>
<div class="col-sm-4">col-sm-1</div>
</div>
<div class="row">
<div class="col-xs-4">col-xs-1</div>
<div class="col-xs-4">col-xs-1</div>
<div class="col-xs-4">col-xs-1</div>
</div>
<div class="row"><!-- 偏移 -->
<div class="col-lg-4">col-lg-1</div>
<div class="col-lg-4 col-lg-offset-4">col-lg-1</div>
</div>
<div class="row"><!-- 排序 -->
<div class="col-lg-1 col-lg-push-11">col-lg-1</div>
<div class="col-lg-11 col-lg-pull-1">col-lg-11</div>
</div>
<div class="row">
<div class="col-lg-4">col-lg-1</div>
<div class="col-lg-4 col-lg-offset-5">col-lg-1</div><!-- 偏移量超出十二列会自动移向下一行 -->
</div>
<div class="row">
<div class="col-lg-4">col-lg-1</div>
<div class="col-lg-4 col-lg-push-5">col-lg-1</div><!-- 排序超出十二列不会自动移向下一行 -->
</div>
<div class="row"><!-- 嵌套 -->
<div class="col-lg-6">col-lg-6
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-4">col-lg-4</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6col-lg-6</div>
<!-- <div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>会出现浮动 -->
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-3">col-lg-3</div>
<div class="clearfix"></div><!-- 清除浮动 -->
<div class="col-lg-3">col-lg-3</div>
</div>
</div>
</body>
</html>
<!--
容器：
container-fluid:流体
container:固定，1170，970，750，auto(针对不同的分辨率，也可以自己指定宽度)
栅格系统：
分为12列:row col'
阈值：分辨率
1200>= 超大分辨率 lg- 只要大于1200，就是水平列，小于1200是竖直列
(1200>=和992>=之间是中等屏幕) md- 只要大于992就是水平列,小于992是竖直列
992>=
(992>=和768>=之间是paid屏幕) sm- 只要大于768就是水平列,小于768是竖直列
768>=
768< 是移动端屏幕 xm- 小于768是竖直列
它们之间可以相互配合 class="col-lg-6 col-xs-4" 分辨率变化时一排两个或三个
列偏移：只能往右偏移
col-[lg/md/sm/xm]-offset-数值
排序：
col-[lg/md/sm/xm]-push-数值：向后移动
col-[lg/md/sm/xm]-pull-数值：向前移动
偏移和排序的区别：
有时它们能达到相同的效果，例如一个格子的时候靠左或靠右。
但是偏移只能往右，且多个存在若超出范围，则会自动向下一行重新偏移
排序push向右，pull向左，排序超出十二列不会自动移向下一行
嵌套：
嵌套的子元素会以父级为单位重新按照12网格分配空间
清除浮动：<div class="clearfix"></div> 以下的div都会清除浮动
-->bootstrap栅格系统
最新推荐文章于 2022-01-15 00:14:33 发布
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
