Bootstrap 4中有太多重大的更新,本文不能面面俱到,下面是一些颇受关注的亮点:
从Less迁移到Sass: 现在,Bootstrap已加入Sass的大家庭中。得益于Libsass,Bootstrap的编译速度比以前更快;
改进网格系统:新增一个网格层适配移动设备,并整顿语义混合。
支持选择弹性盒模型(flexbox):这是项划时代的功能——...
分类:
其他好文 时间:
2015-08-25 14:20:46
阅读次数:
166
这个主要是学习http://www.w3cplus.com/css3/a-guide-to-flexbox.html这里的文章,做个记录,以备日后查询。flex让容器有能力使得其中的子项目自由布局,充分利用空间。比较适合应用程序的组件和小规模布局flex包括容器 和 子项目两部分。对容器来说,有以下...
分类:
Web程序 时间:
2015-08-19 16:16:40
阅读次数:
159
伸缩盒模型用法:结构:1 2 flex item 13 flex item 24 样式: 1 .flex-container { 2 display: -webkit-flex; 3 display: flex; 4 width: 300px; 5 height: 2...
分类:
其他好文 时间:
2015-08-17 11:49:31
阅读次数:
111
早上在w3ctech上看到 中国第二届CSS Conf总结 的时候,,真是开心极了; 自从去年在慕课网上看了第一届CSS conf 视频之后,整个人都震惊了,原来还有大会是专门用来讨论CSS的,而且分享的CSS知识真是让我眼界大开;我在博客园写的第一篇博文《布局神器Flexbox》便是受到第一届CS...
分类:
Web程序 时间:
2015-08-15 18:06:29
阅读次数:
783
Flex布局官方称为CSS Flexble Box 布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。
很多的设计师和开发者发现Flex布局很容易使用,它定位元素简单因此很多复杂的布局能够用很少的代码实现,引领更简单的开发过程。Flex布局的算法是基于方向的,不同于基于水平或者垂直的block和inline布局,这种Flex布局可以被用在小的应用组件中,而CSS3...
分类:
Web程序 时间:
2015-08-15 01:35:39
阅读次数:
236
小伙伴们经常用margin:0 auto进行水平居中,但是margin: auto;却不能垂直水平居中,下面我们来看看大家是怎么玩的:PS:实例中多写了一些代码,容易观察。一、容器内居中:下面的代码一试就懂; flexbox Content 二、视图内居中,一般用作提示框,...
分类:
其他好文 时间:
2015-08-11 17:51:14
阅读次数:
121
最近后端在问同样的布局,有多种实现方式,怎么挑选一个适合的:) (本文不考虑flexbox,不一定是最佳的方案) 常用的布局就是两栏、三栏布局等等,然而两栏和三栏的布局实质使用的css技巧是比较接近,为啥是技巧,其实暂时我还是分不清楚技巧与技术的区别。常见是使用浮动,定位为主.探讨一些比较合理...
分类:
其他好文 时间:
2015-08-11 13:55:06
阅读次数:
129
flexbox经过了坎坷的发展道路终于有了初步的使用雏形,通过flexbox可以控制未知容器元素的对齐方式,排列方向,排列顺序,甚至是未知大小的容器。Flex容器的主要特点是能够修改其子元素(Flex item)的宽度或高度,使其在不同的屏幕尺寸中填补可用的空间。两张图看一下flexbox的一些.....
分类:
其他好文 时间:
2015-08-11 11:54:06
阅读次数:
102
一、手机界面底部操作栏的创建。 1 21 22 23 新建文件夹24 复制25 删除26 css flexbox(可伸缩盒模型):面向的场景,容器的大小是可变的,在容器内部的子节点,也要随着容器的变动,进行大小的调整和次序的变更,并且能够自动填满容器,伸缩容器,伸缩项目,主轴...
分类:
移动开发 时间:
2015-08-10 19:44:34
阅读次数:
212
http://bradfrost.com/blog/mobile/fixed-position/移动端实现position:fixed有哪些问题
http://zh.learnlayout.com/flexbox.html...
分类:
移动开发 时间:
2015-08-08 18:26:03
阅读次数:
138