原笔迹位于:语雀上
1.响应式开发原理:就是使用媒体查询指针对不同宽度的设备进行布局和样式设置,从而适配不同设备的目的。其可划分为四个尺寸区间。
超小屏幕(手机)<768px
小屏设备(平板)768px~992px
中等屏幕(显示器)992px~1200px
宽屏设备(大屏显示器)>=1200px
2.@media screen and 。//媒体查询,屏幕适应。
<style>
.container{
height:150px;
background-color:blue;
margin: 0 auto;
}
@media screen and (max-width: 767px){//小于等于
.container{
width: 100%;
}
}
@media screen and (min-width: 768px){//大于等于
.container{
width: 750px;
}
}
@media screen and (min-width: 992px){
.container{
width:970px;
}
}
@media screen and (min-width: 1200px){
.container{
width: 1170px;
}
}
</style>
3.bootstrap里格式,定义都是事先定义好了的,必须使用正确才能正确调用。
4…container容器。
.container-fluid是百分百宽度。
5.栅格系统。
5.1栅格系统英文为“grid systems”, 也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口( viewport )尺寸的增加系统会自动分为最多1 2列。Bootstrap里面container宽度是固定的,但是不同屏幕下, container的宽度不同,我们再把container划分为12等份。
5.2row//列,在栅格系统中常用。
5.3col-lg-3 col-md-4 col-sm-6 col-xs-12//定义在不同屏幕下的栅格使用量。
5.4列偏移 col-lg/md/sm/xs-offset-份数//实现分块的不同位置摆放。
例如:<div class="col-md-4 col-md-offset-4">右侧</div>
5.4列排序 col-lg/md/sm/xs-push/pull-份数//实现栅格系统中盒子的排序问题。
例如:<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
6.响应式工具
6.1 hidden-lg/md/sm/xs //意为在某种屏幕下就进行隐藏。
例如:<div class="col-xs-3 hidden-md hidden-xs">我会魔术</div>将会在超小屏和中等屏下隐藏。
6.2 visible-lg/md/sm/xs //意为在某种屏幕下就进行显示。
例如:<span class="visible-lg">我会显示</span>//在大屏下才进行显示。
7.Bootstrap使用4步曲。
8.Bootstrap清除浮动。
Bootstrap已经写好了类clearfix//直接在需要清除浮动的块中添加即可清除。
例如:<div class="news clearfix">