bootstrap入门

 <!-- 固定宽度 -->
<div class="container" style="background-color: wheat; height: 300px;"></div>

<!-- 完整宽度-->
		<div class="container-fluid" style="background-color: skyblue; height: 300px;"></div> 

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<div class="container">
			 <!-- 列组合 -->
			 <div class="row"><!-- 行 .row -->
				 <div class="col-md-4" style="background-color: lemonchiffon;">4</div>
				 <div class="col-md-8" style="background-color: orange;">8</div>
			 </div>

<div class="row"><!-- 行 .row -->
				 <div class="col-md-2" style="background-color: burlywood;">2</div>
				 <div class="col-md-3" style="background-color: mediumseagreen;">3</div>
				 <div class="col-md-3" style="background-color: blueviolet;">3</div>
				 <div class="col-md-5" style="background-color: mediumslateblue;">5</div>
			 </div>

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

<div class="row">
			 <div class="col-md-2" style="background-color: burlywood;">2</div>
			 <div class="col-md-3 col-md-offset-1" style="background-color: mediumseagreen;">3</div>
			 <div class="col-md-3" style="background-color: blueviolet;">3</div>
		 </div>

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>