分类目录归档: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就会按照一定的比例进行收缩。