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学习笔记


下一篇:特殊border的样式 -- CSS3实现三种切角效果