带你初识Bootstraop CSS

Bootstrap CSS

概览:

01、H5文档类型 [必须在html5页面下才有效]
02、移动设备优先，在head中添加

<meta name="viewport" content="width=device-width,initial-scale=1.0">

width=device-width:呈现在不同设备上
initial-scale=1.0:以1.1比例呈现，不会有任何缩放
user-scallable=no:禁止网页缩放功能
maximum-scale=1.0:页面放大程序，1.0将禁止用户放大实际尺寸

03、布局容器：
固定容器[class=“container”]:

                ----大屏幕（大桌面显示器，大于等于1200px）@media(min-width:@screen-lg-min)
                ---中屏幕  （桌面显示器，大于等于992）@media(min-width:@screen-md-min)
                ---小屏幕（平板，大于等于768px）@media(min-width:@screen-sm-min)
                ---超小屏幕（手机，小于768

流体容器 【class=“container-fluid”】

☆栅格系统：
概念：Bootstrap提供了一套响应式、移动设备优先的流式网格系统
特点：会随着屏幕或视口尺寸的增加，系统会自动分为最多12列

列偏移： class=“col-lg-offset-1”

 <div class="row">
		  <div class="col-lg-2 a col-lg-offset-1">1</div>
		  <div class="col-lg-3 a">2</div>
	  </div>

栅格嵌套：

 <div class="row">
			  <div class="col-lg-6 a">
				  1
				<div  class="row">
					<div class="col-lg-4 a">我是1嵌套下面的儿子1</div>
					<div class="col-lg-4 a">我是1嵌套下面的儿子2</div>
					<div class="col-lg-4 a">我是1嵌套下面的儿子3</div>
				</div>  
			  </div>
			  <div class="col-lg-6 a">
				2
				<div class="row">
					<div class="col-lg-1 a">我是2嵌套下面的儿子1</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子2</div>
					<div class="col-lg-1 a" >我是2嵌套下面的儿子3</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子4</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子5</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子6</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子7</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子8</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子9</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子10</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子11</div>
					<div class="col-lg-1 a">我是2嵌套下面的儿子12</div>
				</div>
			 </div>
		  </div>
		

交换位置：
右移动【推】：push
左移动【拉】：pull

<div class="row">
		<div class=" col-lg-4 a col-lg-push-8">1</div>
		<div class="col-lg-4 a col-lg-pull-4">2</div>
		<div class="col-lg-4 a col-lg-pull-4 ">3</div>
	</div>