浅谈bootstrap
快速了解bootstrap,以下简称BS。
今天花了一天时间看了下BS，给大家大概讲下BS的用处，BS主要是为了快速完成前端布局，以强大的自适应，兼容各种设备为主，主要是移动端为主。这里给大家讲下，我看的是BS4，不是3。3的话还是有点差别的，里面的主要依靠浮动布局，优点就是适用IE9以下，ios7以下。BS4不适应。
1，布局：
整体来说，BS4是运用了flex布局，也就是大家了解到的弹性盒子布局，这个CSS-flex标签谁用谁知道，贼棒，浮动的那些毛病全没了。一口气上五楼不费劲。其中在运用BS4之前，需要用一个总的div.container包围所有需要布局的元素，也就是.container为祖先。类似下面
<div class="container"> <div class="row"> <div class="col-sm-4">col</div> <div class="col-sm-8">col</div> </div> <div class="row"> <div class="col-md-4 offset-md-1 bg-success row" style="height: 50px;"> <div class="col">row</div> <div class="col">row</div> </div> <div class="col-md-4 offset-md-2 bg-success" style="height:35px;">col</div> </div> </div>
BS4将整个屏幕分成了12份，每一份为固定宽度，这个宽度不是指具体的PX值，而是百分比划分。其中将设备屏幕划分为5大类。使用方式为添加类名:
.col :为针对所有设备
.col-sm：为针对平板，屏幕宽度大于或等于576px
.col-md：为针对桌面显示器，屏幕宽度大于或等于768px
.col-lg：为针对大桌面显示器，屏幕宽度大于或等于992px
.col-xl：为针对超大桌面显示器，屏幕宽度大于或等于1200px
以上就是主要分类，我总结一下啊，建议如果是移动端，不需要兼容PC端的，类名加上.col和.col-sm。或者直接写.col就行了。因为这里是有个特点，小的能兼容大的。PC端的同理，可以写上.col-md+.col-lg+.col-xl或者直接.col-md。这个要自己理解一下或者去写验证一下。这个必须要好好吃透，整个BS4的核心就是网格系统，当你了解了网格系统，那你会BS就基本没有任何问题了。我们回到上面代码
<div class="container"> <div class="row"> <div class="col-sm-4">col</div> <div class="col-sm-8">col</div> </div> <div class="row"> <div class="col-md-4 offset-md-1 bg-success row" style="height: 50px;"> <div class="col">row</div> <div class="col">row</div> </div> <div class="col-md-4 offset-md-2 bg-success" style="height:35px;">col</div> </div> </div>
首先需要一个container标签包住你需要布局的整个代码，这是一个容器，是一个大前提。后续的row类名的意思就是div从左至右依次排列.我这里写的col-sm因为当时在测试移动端所以用的sm，其他的客官们可以自己去体验，其中col-sm-4和col-sm-8大家可以看到4和8这个数字，这是为什么是4和8呢，就是因为前面说了，BS的网格系统将屏幕分成了12份，左边4份，右边8份。可以最多分成12个DIV，最小一个一份。注意这个数字不能有小数点，不然会导致网格系统失效。这么一说是不是觉得无比清晰。其中还有一个offset这个是用来设置偏移量的，比如你左边div占了4份,右边div占了4份，如果这个时候在偏移4份，那就相当于12份满了，有了这个你就能更方便的布局，比如居中啊，左靠齐，右靠齐之类的。
以上就是整个BS的核心了，如果你能理解这些，就相当于你基本会BS4了，其他的都是一些自定义的插件功能，大家自己多去看看，然后多练习，多写。这样就可以快速掌握BS4了。
