Bootstrap总结

响应式布局：一套代码可以适配多个终端。

适用于后台管理系统等简约类的网站。

原理仍是媒体查询。

xs 超小屏：0-768px  

sm 小    屏：768-992px  

md 中     屏：992px-1200px

lg大     屏：1200px-无穷

栅格系统： 是BS实现响应式的核心所在 其底层也是媒体查询 



首先考虑网格系统在不同屏幕的变化

如在小屏隐藏，则给父盒子设置hidden-sm,则其在小屏和超小屏均隐藏（覆盖式）

再者看子盒子在不同屏幕的变化，首先看一排有几个盒子，如在大屏中一排有三个盒子，则每个盒子占四列（）；但在中屏中一排有两个盒子则每个盒子占6列。这时给每个子盒子设置 col-lg-4  

col-md-6.

 <div class="wjf-header hidden-sm">

	<div class="col-lg-4 col-md-6">

	</div>

	<div class="col-lg-4 col-md-6">

	</div>

	<div class="col-lg-4 col-md-6">

	</div>

	<div class="col-lg-4 col-md-6">

	</div>

	<div class="col-lg-4 col-md-6">

	</div>

	<div class="col-lg-4 col-md-6">

会自动换行，即在大屏的时候是两排，在中屏的时候是三排

如果一排中的盒子宽度不一时，则每排的各个盒子的col自行调整，相加=12

 <div class="wjf-header hidden-sm">

	<div class="col-lg-3 ">

	</div>

	<div class="col-lg-4">

	</div>

	<div class="col-lg-5">

	</div>

</div> 即这一排卡UN度比例为3:4:5



其他：

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

看版面是不是要设置版心：

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

.container 类用于固定宽度并支持响应式布局的容器。

消除默认15px的内边距，添加.row,其默认{

	margin-right: -15px;    margin-left: -15px;

}

即布局样式可写成：

<div class="wjf-header hidden-sm"> 

    <div class="container"> 

        <div class="row"> 

		

     </div>

    </div>

</div>

标签：总结,盒子,Bootstrap,默认,一排,container,15px,col
来源： https://www.cnblogs.com/zdy4396/p/14025197.html