分类目录归档：Bootstrap
移动web开发布局
项目2–移动Web开发常见布局
–学习目标/Target
- 了解什么是流式布局
- 掌握flex弹性盒布局以及使用方式
- 掌握媒体查询的使用方法
- 掌握如何实现移动端设备的Rem适配布局
- 掌握Sass和Less的使用方法(下一个项目再讲)
–项目说明/Summary
在移动Web开发中，可以通过流式布局、弹性盒布局和Rem适配布局来制作移动端页面。此外，我们还可以将上述三大布局与媒体查询结合起来创建响应式页面，实现一个页面同时兼容PC端和移动端。为了提高CSS样式代码的编写效率，我们可以使用Sass或Less编写复用性更优的CSS代码。在掌握了这些技术后，就已经可以编写响应式页面了。
【Flex-实战演练】确认订单
–学习目标/Target
-
使用flex弹性盒布局模型快速开发网页
体会flex弹性盒布局的应用
- 扎实flex弹性盒布局的知识点
关于浏览器市场份额的那点事儿
以前关于浏览器市场份额总是去找百度——百度统计，最近发现找不着了~ 也许，百度不做这方面的统计了~反正没找着。不过，还好有Statcounter。记录一下……
关于 Statcounter GlobalStats
https://gs.statcounter.com/Statcounter Global Stats 由Statcounter - 免费的在线访客统计工具提供给您。
数据样本
统计数据基于 Statcounter 收集的汇总数据，该样本每月从超过 150 万个网站的 Statcounter 网络中收集超过 50 亿次网页浏览量。统计数据每天都会更新并提供，但在发布后的 45 天内必须接受质量保证测试和修订。
响应式web设计与开发——Bootstrap学习笔记
CSS弹性盒子Flex：flex-grow、flex-shrink、flex-basis属性
flex-grow、flex-shrink、flex-basis三个属性的作用：
在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。
(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))
小编这里先教一下大家如何快速记住这三个属性：
首先是 flex-basis ，basis英文意思是<主要成分>，所以他和width放在一起时,肯定把width干掉，basis遇到width时就会说我才是最主要的成分，你是次要成分，所以见到我的时候你要靠边站。
其次是 flex-grow，grow英文意思是<扩大，扩展，增加>,这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，这时，flex-grow就会说我要成长，我要长大，怎么样才能成长呢，当然是分享父元素的空间了。见下面第二个属性的内容
最后是 flex-shrink， shrink英文意思是<收缩，>，这就代表当父元素的宽度小于子元素宽度之和时，并且超出了父元素的宽度，这时，flex-shrink就会说外面的世界太苦了，我还是回到父亲的怀抱中去吧！因此，flex-shrink就会按照一定的比例进行收缩。