我的Java开发生涯记（17）——栅格系统总结

2019.8.6著

今天又是比较悠闲的下午，正好趁这个时间学点东西算了。

刚刚跟别人聊起来以前写的一些简单的代码，想想还是挺有意思的，斗地主，神兔，动态表格，还有霓虹灯等等。

突然发现前端的东西是完全不会，栅格系统用起来确实挺方便的，下面我就把我面向百度搜到的一些东西分享一下

 

bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 、col-lg-*的意义：

col-xs-* 超小屏幕 手机 (<768px)

col-sm-* 小屏幕 平板 (≥768px)

col-md-* 中等屏幕 桌面显示器 (≥992px)

col-lg-* 大屏幕 大桌面显示器 (≥1200px)

注释：小屏幕的大屏幕可以试用，反过来样式可能会出问题。

 

不管在哪种屏幕上，栅格系统都会自动的每行row分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列 也就是屏幕的一半（12/6列=2个div） ，.col-md-3 在中单屏幕中占3列也就是1/4（12/3列=4个div）。

 

反推，如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在大屏幕上显示6个div(12/6个=每个占2列 ) ，则 col-md-2；这样我们就可以控制我们自己想要的什么排版了。

 

总结：想要成为全栈大佬吗？想要月薪过万吗？没事还是接触一下前端的知识吧。

当然即使你会了也不一定月薪过万，哈哈哈，肯定是后端越强越好，前端只是为了让你看懂代码，不过学的越好，越是加分项。