熟悉Bootstrap的同学应该了解其中的格栅系统,用来排版非常方便.他将页面分为12等分,并且适用不同的尺寸屏幕.超小xs(小于768px),小屏sm(大于等于768px),中屏md(大于等于992px),大屏lg(大于等于1200px).为此需要生成一堆的.clo-*-*类,总计4*12=48个,再加上pull,push,offset.这种只能用less来写了,参考Bootstrap的less源码,自己重新写了一个,仅供练手 Less版本 @sm-width: 768px; @md-widt…

栅格系统简介 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局. 栅格系统通过一系列行(row)与列(column)的组合来创建页面的布局,设置的内容可以放在创建好的布局中. 栅格系统的实现原理 栅格系统的实现原理非常简单,仅仅是通过定义容器的大小,平分为 12 份,再调整内外边距,最后结合媒体查询,就制作出了强大的响应式的栅格系统…

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1  设定背景图的大小 在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要…

1. 先搭建环境,下载node.js,rubyinstaller,安装, 安装rubyinstaller时,要选上include system path,这样就会自动将node.js执行添加到windows系统环境变量,免去手动创建烦恼.node.js就点下一步安装就行了 2. win+R cmd 再运行  gem install bootstrap-sass 3.创建一个项目 cd 进入到你所在的项目存放目录,命令行窗口运行 compass creat XXXXX(项目名称)这样就创建了一个项…

前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了.这个bootstrap侧滑菜单更专业的名字叫做手机导航栏.我也比较这个名字,更符合bootstrap的特性.所以我这篇文章介绍的更容易的一种…

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目. 本文为大家介绍的是yii使用bootstrap分页样式方法,感兴…

bootstrap课程2  bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row + col-md-4 26 <div class="row"> 27 <div class="col-md-4 pull-right"> 28 <img src="logo.png" width="100%&q…

有些人想学CSS,不知如何下手:有些人已经学会CSS的各种属性,却不知如何运用:有些人会平面设计,不知道如何与网页设计结合:有些人会HTML,就是学不会CSS.试问自己,图中的技术你都会了吗? 别总是怨天尤人了,<CSS高效开发实战—CSS 3.LESS.SASS.Bootstrap.Foundation>书写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具.框架.预处理来提升开发效率和节约人力成本,确保所讲解的内容读者都能活学活用. 曾就职于CSDN和淘宝的一…

文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 下一节:ASP.NET MVC5 + EF6 + Bootstrap3 (8) View中的HtmlHelper用法大全(上) 源码下载:点我下载 要做一个完整的系统,除了需要MVC这样的B/S框架及EF这样的数据库访问技术之外,一个简洁…

参考:http://blog.csdn.net/xiexl/article/details/6652230 最近在项目中需要将通过富文本编辑器处理过的文字转换为Word,查了很久,大家通常的解决办法是使用Jacob或POI等组件直接生成Word,但是都无法将富文本编辑器处理过的文字保留样式并保存为Word,最终以失败而告终,无奈只有自己研究Word的格式转换: 分析了转换过程,总体分两个步骤: 1.实现富文本中样式代码的分离: 2.保留CSS样式: 其实以上两个步骤是相互矛盾的处理过程,无法通过…