浅谈Bootstrap自适应功能在Web开发中的应用

随着移动端市场的强势崛起，web的开发也变得愈发复杂，对于个体开发者来说，自己开发的网站，在电脑、手机、Pad等上面都要有正常的显示以及良好的用户体验。如果每次都要自己去调整网页去匹配各个不同的客户端设备，这个工作量可想而知。如果网站可以自适应浏览器大小，对于开发者来说，无疑是天大的福音。今天，我通过自己的实践，简单的探探boostrap的自适应功能，这也是众多平台中，我认为比较好的一个。

Boostrap是什么

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。通俗一点讲，他就是一个集合样式与js的开源包，我们加载Boostrap包，通过class调用里面提供的类名，产生自己想要的样式或者效果。如果大家想要系统的学一学Boostrap的话，可以百度一下，说实话，用熟了之后，开发速度真的事半功倍，咻咻咻的。

 

Boostrap的“栅栏”模式

Boostrap自适应功能的基础就是“栅栏"模式，它是将浏览器以行列形式去划分：一共12列，行数自定义，根据你所要显示的元素，确定每个元素显示的大小即需要的列数，如果超过范围，就会自动转行。每列的大小是Boostrap根据当前浏览器的大小自动平均分配。举个例子，看下图：

第一张图是浏览器显示效果，第二张图是设计图，这个意思就是在一行中显示三个标签元素，上面提到，不管浏览器大小如何，都将其分成12列，所以一共3个column，那每个column占4列，当浏览器大小发生变化时，每列的宽度发生变化，但元素所占的列数是不变的，说的比较啰嗦笼统，想研究的朋友可以去官网学习下，我自己前段时间开发的一个网站：神巴巴星座网，前端的架构全部采用了Boostrap栅栏模式，大家也可以通过开发工具看看前端源码。

Boostrap的自适应功能

其实理解栅栏模式之后，自适应功能就简单很多了，根据浏览器的大小，Boostrap有四种栅栏类名提供使用，用法与Css样式表类名选择器样式调用是一样的：

xs：col-xs-1 ~ col-xs-12，多列始终在一行内。

sm：col-sm-1 ~ col-sm-12，多列在浏览器像素宽度大于等于768px时才在一行内。

md：col-md-1 ~ col-md-12，多列在浏览器像素宽度大于等于992px时才在一行内。

lg：col-lg-1 ~ col-lg-12，多列在浏览器像素宽度大于等于1200px时才在一行内。

我贴一段伪代码：

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>

    <div class="col-sm-4  col-md-10"></div>
</div>

这段的意思是当浏览器的宽度在768——992之间时，采取4：4:4的模式呈现，当浏览器宽度大于992时，就按1：1:10的模式呈现。当然你也可以四种都是用，细分的在仔细点，不管怎么样，Boostrap会根据浏览器的宽度自动分配列宽度，从而匹配你所想要的呈现模式。至于它怎么做到的，你不用关心，你只需要考虑你在手机上的网页呈现样式，或者PC上的呈现样式的设计就行了，接下来，就交给Boostrap吧。

总结：Boostrap的使用能够极大的增加网站开发的效率，自适应的功能，又极大的减轻了后期代码的维护，想象一下，PC端的网站维护，移动端还有另一个版本的维护，实际项目就参考我前段时间开发的网站吧（百度：神巴巴星座网），就不打链接了，省的被K，我是侧重移动端的网页，所以PC端显示不咋地，就到这了，希望大家互相学习。