BootStrap使用

用到js先导入JQ在导入js和cs

布局容器：container   ****  两边会留有空隙
流式布局：container-fluid
row：行
col：列
    col-xx-xx：列在何种分辨率下占几列
    col-xx-push-xx：当前列偏移，右    推
    col-xx-pull-xx：当前列偏移，左    拉
    col-xx-offset-xx：整体偏移
分辨率：
    lg：大屏幕
    md：中等屏幕
    sm：小屏幕
    xs：超小屏幕
每行最多

<!-- 布局容器：container -->
		<!-- 流式布局：container-fluid -->
		<div class="container-fluid">
			<!-- 行 -->
			<div class="row">
				<!-- 列在何种分辨率下占几列 -->
				<!-- 
					lg：大屏幕
					md：中等屏幕
					sm：小屏幕
					xs：超小屏幕
				-->
				<div class="col-sm-1">div1</div>
				<div class="col-sm-1">div2</div>
				<div class="col-sm-1">div3</div>
				<div class="col-sm-1">div4</div>
				<div class="col-sm-1">div5</div>
				<div class="col-sm-1">div6</div>
				<div class="col-sm-1">div7</div>
				<div class="col-sm-1">div8</div>
				<div class="col-sm-1">div9</div>
				<div class="col-sm-1">div10</div>
				<div class="col-sm-1">div11</div>
				<div class="col-sm-1">div12</div>
				<!-- 超出12列，变形 -->
				<!-- <div class="col-sm-1">div13</div> -->
			</div>
			
			<div class="row">
				<!-- 列在小屏幕下，占6列 -->
				<div class="col-sm-6">
					<div class="row">
						<!-- 平分 -->
						<div class="col-sm-6">div611</div>
						<div class="col-sm-6">div612</div>
					</div>
				</div>
				<div class="col-sm-6">div22</div>
			</div>
			
			<div class="row">
				<!-- col-xx-push-xx：当前列偏移，右移动 -->
				<div class="col-sm-4 col-sm-push-1">div31</div>
				<!-- col-xx-pull-xx：当前列偏移，左移动 -->
				<div class="col-sm-4 col-sm-pull-1">div32</div>
			</div>
			
			<div class="row">
				<!-- col-xx-offset-xx：整体偏移 -->
				<div class="col-sm-5 col-sm-offset-2">div41</div>
				<div class="col-sm-5">div42</div>
			</div>
		</div>

占12列，超出会变形