<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="大圣">
<title>栅格系统</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
.container div:nth-of-type(2n+1){
border: 1px solid black;
background-color: red;
}
.container div:nth-of-type(2n){
background-color: orange;
border: 1px solid black;
}
</style>
</head>
<body>
<h2 class="text-center"> bootstrap的栅格元素是浮动的</h2>
<div class="container">
<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>
<!--<div class="col-xs-6">3</div>-->
</div>
<h2 class="text-center">栅格系统中心的col-*-*</h2>
<div class="container">
<!--col-*-*用来设置元素在一行12列内所占的份数。
第一个*号:代表针对哪一种屏幕尺寸。
第二个*号:代表在该尺寸的屏幕内元素所占的份数。-->
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">1</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">2</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">3</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">4</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">5</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">6</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">7</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">8</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">9</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">10</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">11</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">12</div>
</div>
<h2 class="text-center">栅格的列偏移offset</h2>
<div class="container">
<!--col-*-offset-* 用来设置列偏移。
第一个*号代表针对的屏幕尺寸
第二个*号代表偏移的单位。-->
<div class="col-md-3 col-md-offset-3">
<h3>HTML</h3>
<p>HTMLHTML5,超文本标记语言(HyperText Markup Language).它是目前前端开发技术的总称。</p>
</div>
<div class="col-md-3">
<h3>CSS3</h3>
<p>CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。</p>
</div>
<div class="col-md-3">
<h3>JavaScript</h3>
<p>JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。</p>
</div>
<div class="col-md-3">
<h3>Python</h3>
<p>Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。</p>
</div>
</div>
<h2 class="text-center">栅格的列排序push 和pull</h2>
<!--col-*-*-*用来设置栅格元素的位移。通常用来进行位置交换。
第一个*号:略。
第二个*号:push/pull.push右移。pull左移。
第三个型号:位移的单位数。-->
<div class="container">
<div class="col-md-3 col-sm-6 col-md-push-3">
<h3>HTML5</h3>
</div>
<div class="col-md-3 col-sm-6 col-md-pull-3">
<h3>CSS3</h3>
<p>CSS即层叠样式表(Cascading StyleSheet)。</p>
</div>
<!--清除浮动产生的错乱-->
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6">
<h3>JavaScript</h3>
<p>JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。</p>
</div>
<div class="col-md-3 col-sm-6">
<h3>Python</h3>
<p>Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。</p>
</div>
</div>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="大圣">
<title>栅格系统</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
.container div:nth-of-type(2n+1){
border: 1px solid black;
background-color: red;
}
.container div:nth-of-type(2n){
background-color: orange;
border: 1px solid black;
}
</style>
</head>
<body>
<h2 class="text-center"> bootstrap的栅格元素是浮动的</h2>
<div class="container">
<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>
<!--<div class="col-xs-6">3</div>-->
</div>
<h2 class="text-center">栅格系统中心的col-*-*</h2>
<div class="container">
<!--col-*-*用来设置元素在一行12列内所占的份数。
第一个*号:代表针对哪一种屏幕尺寸。
第二个*号:代表在该尺寸的屏幕内元素所占的份数。-->
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">1</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">2</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">3</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">4</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">5</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">6</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">7</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">8</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">9</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">10</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">11</div>
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-1">12</div>
</div>
<h2 class="text-center">栅格的列偏移offset</h2>
<div class="container">
<!--col-*-offset-* 用来设置列偏移。
第一个*号代表针对的屏幕尺寸
第二个*号代表偏移的单位。-->
<div class="col-md-3 col-md-offset-3">
<h3>HTML</h3>
<p>HTMLHTML5,超文本标记语言(HyperText Markup Language).它是目前前端开发技术的总称。</p>
</div>
<div class="col-md-3">
<h3>CSS3</h3>
<p>CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。</p>
</div>
<div class="col-md-3">
<h3>JavaScript</h3>
<p>JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。</p>
</div>
<div class="col-md-3">
<h3>Python</h3>
<p>Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。</p>
</div>
</div>
<h2 class="text-center">栅格的列排序push 和pull</h2>
<!--col-*-*-*用来设置栅格元素的位移。通常用来进行位置交换。
第一个*号:略。
第二个*号:push/pull.push右移。pull左移。
第三个型号:位移的单位数。-->
<div class="container">
<div class="col-md-3 col-sm-6 col-md-push-3">
<h3>HTML5</h3>
</div>
<div class="col-md-3 col-sm-6 col-md-pull-3">
<h3>CSS3</h3>
<p>CSS即层叠样式表(Cascading StyleSheet)。</p>
</div>
<!--清除浮动产生的错乱-->
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6">
<h3>JavaScript</h3>
<p>JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。</p>
</div>
<div class="col-md-3 col-sm-6">
<h3>Python</h3>
<p>Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。</p>
</div>
</div>
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>