Bootstrap学习笔记

原笔迹位于：语雀上

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">