Bootstrap在实际生产开发中的使用心得

前言

今天有个后台同学问我Bootstrap怎么用，一下给我问的有点懵，我和他说你一个后台的怎么还要写样式了吗？（这不是抢我们前端同学的饭碗吗？）然后我给了他一个www.guanwang.com,他说你直接给我jar包过来吧，然后我想起来他是一个后台同学又给他简单的解释了几句之后，他一句你给我几个demo我也就放弃了对他的说服教育，想想中华的传统美德不就是助人为乐吗，自己正好也总结一下自己在使用Bootstrap的一些心得。

前端开发页面布局常用到的几种技能

1 Bootstrap

我们公司在选择这个css框架的原因主要是因为我们的PC后台系统用到了好多Bootstrap Table表格比如一些表格的排序，模糊搜索，分页这些Bootstrap Table都已经写好了，就不用我们开发人员再手动的开发这些功能了.在微信公众号的开发中一开始也是使用着BootStrap的弹性盒子布局，在后来的开发中慢慢的用felx布局替换了.

2 rem

这个技术说明白一些就是用一段js代码动态监控浏览器窗口的大小，当检测到窗口变化的时候动态改变根元素html的font-size,以此来做到传说中的响应各终端，在一开始flex的浏览器兼容性不是很好的时候rem曾是流行但是需要一些单位的转换，虽然后有好多工具例如Less,Sass这些css自动化工具但布局还是需要我们手动布局，目前强力推荐flex布局。

3 flex

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，还是比较推荐大家去码一下这个，常用的一些样式布局多写几个标签全部搞定。

4 grid

最新又出了一个网格布局号称已经可以横竖通吃，我也只简单地写了几个demo,目前浏览器兼容做的还不是很好，在以后可能是趋势，毕竟是浏览器开发支持的新语法，新技术层出不穷感觉身体被掏空，不是在学新技术，就是在学新技术的路上。

Bootstrap

你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳，这句话是我在官网上摘下来的，我觉着其实BootStrap这个css框架最有用的部分也就是Media和栅格布局。

Media介绍

css3的一个属性，使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media针对不同的屏幕尺寸设置不同的样式，特别是设计响应式的页面，@media会根据你设置的样式动态监听。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 列子：如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) { body { background:red; } }
下面这个链接就是Media的详细简绍介绍

v3.bootcss.com/css/#grid-m…

bootstrap的css源码就是根据不同屏幕的大小做了不同的@media,有兴趣的同学可以去看看源码。

实际工作中需要注意的几点

具体的学习建议去看看文档(而且还是中文的)，你还要怎样，再提俩点实际工作中注意的问题

1在使用栅格布局的时候外边一定要包一个大盒子class=row这个一定要加上，不然的话你所有的子级标签都需要给他的padding重新定义

2对于字体的问题，虽然我们在开发中号称是适配所有终端，但是字体这个问题还是不好做适配的，方法也是有的比如用rem或者是@medal监听，你把所有的终端型号都考虑到把你用到的字体大小情况也都全部考虑到然后就去开开心心的适配吧，半年时间怎么也做完了，我们的解决方案是直接写死，毕竟我们老大兼着产品哈哈，如果你遇到了让你适配字体的人的话你就可以磨一磨你饥渴难耐的大刀了，如果你有神马别的好的建议也可以给我留言。

转载于:https://juejin.im/post/5a3c923e6fb9a0451e3ffd66