时髦、直观并且强大的前端框架,让Web开发变得更加容易。
2. Foundation (MIT;响应式)
最先进的响应式前端框架。
3. 960gs(GPL&MIT;响应式)
960gs提供了一个简单的网格系统,适合快速开发。
4. Skeleton(MIT;响应式)
非常漂亮的Web模板,适合响应式、移动友好的开发。
5. 99lime HTML KickStart(Free)
适合网站快速开发的极简HTML构建模块。
6. Kube(Free;响应式)
面向专业人员的CSS框架。
7. Less Framework(MIT;响应式)
自适应的CSS网格系统。
8. Flameinwork(Free)
适合懒人开发者的前端微框架。
9. G5 Framework(Free)
(x)HTML5、CSS、PHP前端开发框架。
10. Easy Framework(Free)
Easy Framework是一个一体化前端解决方案,分structural、 presentational、interactive三层。
11. Blueprint(Free)
一个旨在减少开发时间的前端框架。
12. YAML(Creative Commons)
(x)HTML+CSS框架,适合开发现代化浮动布局。
13. BlueTrip(Free)
一个功能全面、并且美丽的CSS框架,适合于Blueprint搭配使用。
14. YUI3:Grids CSS(BSD)
YUI Grids CSS是最著名的CSS框架之一,是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度,六种不同的模板。
15. 52framework(Creative Commons)
对HTML5支持非常好,简单易用。
16. elastiCSS(MIT)
一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic(Free)
一个与众不同的CSS框架。
18. Fluid 960 Gride System(GPL/MIT)
Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System:传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS(MIT)
一个面向对象的CSS框架,能让你的工作流更加简洁。xCSS基于CSS,可以在开发复杂样式时,提供面向对象的工作流。
20. EM CSS Framework(MIT/GPL)
EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。
自己写个class样式覆盖到框架的样式位置就好了。1.自定义图标替换ionic图标样式
<ion-item class="item item-complex my-complex item-icon-left item-icon-right">
<a class="item-content my-content" ng-click="goPage('archive', '个人信息')">
<i class="icon datum-img"></i>
<span style="font-size: 90%line-height:inherit">个人信息</span>
<i class="icon ion-ios-arrow-right msgText" style="font-size: 20px"></i>
</a>
</ion-item>1234567
.datum-img{/* 个人信息*/
background: url(../img/mine/datum.png) no-repeat center width: 20px height: 20px margin-top: 3px display: inline-block background-size: 100%}12345678
.my-complex .my-content{padding: 10px 0px 10px 0px}123
从代码中可以看到,.datum-img是使用自定义图标,宽高大小需要明确指出。而下面 .my-complex .my-content的样式内容是覆盖掉框架的.item-complex .item-content中padding的规格,而其他规格没写则还是以框架原有的规格显示。图标大小可以用font-size来调整。
总结:覆盖样式,1、先看下框架css的层次,2、依据框架层次自己写个不同名的class样式,样式内含有你需要覆盖的规格key要对,然后自己改想要的value。3、把自己写好的class样式名写到你需要覆盖的框架样式后面就能实现覆盖了。而且不会对原有的框架样式发生改变。