bootstrap之col-xs-*、col-sm-* 、col-md-*和.col-lg-*
webstrom新建bootstrap项目,
导入css和js 项目结构如下:
写入代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--bootstrap js-->
<script src="../js/bootstrap.bundle.js"></script>
<script src="../js/bootstrap.js"></script>
<!--bootstrap css-->
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-grid.css">
<link rel="stylesheet" href="../css/bootstrap-reboot.css">
<style>
.c3 {
background: #c69500;
}
.c4 {
background: #20c997;
}
.c6 {
background: #6f42c1;
}
.c8 {
background: #ed969e;
}
</style>
</head>
<!--
1、col是column简写:列;
2、xs是maxsmall简写:超小, sm是small简写:小, md是medium简写:中等, lg是large简写:大;
3、-* 表示占列数,即占每行row分12列栅格系统比;
4、.col-xs-* 超小屏幕如手机 (<768px)时使用;
.col-sm-* 小屏幕如平板 (768px ≤ 宽度 <992px)时使用;
.col-md-* 中等屏幕如普通显示器 (992px ≤ 宽度 < 1200px)时使用;
.col-lg-* 大屏幕如大显示器 (≥1200px)时使用。
当屏幕尺寸
小于 768px 的时候,用 col-xs-12 类对应的样式;
在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;
在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;
大于 1200px 的时候,用 col-lg-3 类对应的样式;
解释
1、栅格系统都会自动的把每行row分为12列,
col-xs-*、col-sm-* 、col-md-*和.col-lg-* 后面跟的参数表示在当前的屏幕中的占列数。
例如 <div class="col-xs-6 col-md-3"></div> 这个div在屏幕中占的位置是:
.col-xs-6 在超小屏幕中占6列,也就是屏幕的一半(12/6列=2个div),
.col-md-3 在中等屏幕中占3列也就是1/4(12/3列=4个div)。
2、反推,
如果我们要在移动端并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;
在PC端上显示6个div(12/6个=每个占2列 ) ,则 col-md-2。
-->
<body>
<div class="container">
<div class="row">
<div class="col-md-4 c4">col-md-4</div>
<div class="col-md-4 c4">col-md-4</div>
<div class="col-md-4 c4">col-md-4</div>
<!-- 说明:每row行共12列,分个3div,每个div平占4列,即3个*4列=12列 -->
</div>
<div class="row">
<div class="col-md-4 c4">col-md-4</div>
<div class="col-md-8 c8">col-md-8</div>
<!-- 说明:每row行共12列,分个2div,第1个div占4列,第2个div则占8列,即4列+8列=12列 -->
</div>
<div class="row">
<div class="col-md-3 c3">col-md-3</div>
<div class="col-md-6 c6">col-md-6</div>
<div class="col-md-3 c3">col-md-3</div>
<!-- 说明:每row行共12列,分个3div,每1,3个div占3列,第2个div则占6列,即3列+6列+3列=12列 -->
</div>
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3" style="background: #1e7e34">
col-xs-12 col-sm-9 col-md-6 col-lg-3
</div>
<!--
当屏幕尺寸:
小于 768px 的时候,用 col-xs-12 类对应的样式;
在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;
在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;
大于 1200px 的时候,用 col-lg-3 类对应的样式;
-->
</div>
</body>
</html>