960Grid官方网站
不知道为啥作者不写个文档,虽然框架非常轻量,且用起来很方便简单,也浪费了我2天的时间来熟悉.(老人家是这样的啦,哈哈)
我来写吧,现在完全弄明白了,感觉未来的很长一段时间都会用它为基础.
整个框架就那么几个类:
.container_(number)
.grid_(number)
.prefix_(number)
.suffix_(number)
.pull_(number)
.push_(number)
.alpha
.omega
.clear
.clearfix
基础用法
.container_(number)类
.container类提供了3种容器: 12等分, 16等分, 24等分.总宽度总是960px,这也是整个框架的基础容器,也是它的名称的来源.
.container是居中的,解决了各种浏览器的兼容性问题,container本身没有内外间隔(margin和pardding),没有border.
.grid_(number)类
写法:
<div class="grid_xx"></div>
每个grid就是一个单元格,后面的数字的范围取决于你选择的container类的数字.不能为0.
写了个页面的完整代码,基本上代表了960css框架的用法.
分享到:
相关推荐
Teutonic CSS是一个现代的网页设计系统,用于开发响应迅速,可访问的网站和Web应用程序。 它基于CSS变量,易于定制和扩展。 它具有像CSS Grid这样的酷炫技术。
Box-CSS-Framework:Box-CSS框架
Jaidee CSS Framework是简单的开源功能强大的工具,用于开发灵活的网站,移动Web应用程序和在线Web应用程序。 Jaidee Framework具有许多用于Web在线解决方案的工具,例如HTML Framework,Grid System等主要功能1....
framework-flexbox通过用Flexbox-Grid( )替换其传统的网格系统,使流行的Skeleton样板实现了现代化,并将Normalize更新到版本8 只需将dist /目录中CSS或SCSS文件之一添加到您的项目中(建议将dist / skeleton-...
它是用功能强大CSS预处理程序Less编写的。 Flexbox Grid是根据方法编写的 有关更多信息,请访问 目录 安装 要安装Flexbox Grid Less,请使用以下方法之一。 凉亭 $ bower install flexbox-grid-less NPM $ npm ...
Besoin d'un Framework CSS浇铸d'une格栅? `#CSS V-1.4.0.0 说明 移动优先或快速响应的目标。 在12个冒号CSS站点上,Web站点倾注了许多帮助。 Chaque Colonne est contenue dans des lignes,qui sont est dans ...
CSS GuideBook 目录 基础概念 属性 布局 基础布局 内联块级布局 文档流布局 定位布局 浮动布局 清除浮动 弹性布局 表格布局 居中布局 ...css modules ...css-nano postcss css in js ...CSS HAck ...关于 CSS 详细
等离子一个基于Flexbox的健壮但极简CSS网格框架。... X轴元素对齐是的Α :check_mark: Y轴元素对齐是的Α :check_mark:浏览器支持Flexbox Grid依赖于CSS属性flexbox。 请参阅 更多细节。发展安装依赖项npm i
Spectre.css是一个轻量级的,响应式的现代CSS框架。 项目的轻量级(压缩后约为10KB)起点 基于Flexbox的响应式且移动友好的布局 设计和开发精美的元素和组件 Spectre是一个基于大型Web服务项目CSS开发工作多年的...
简单ËASY一个ngular小号tyles与A11ÿ该项目正在进行中。并非所有组件都已创建或记录。。。概述EASY是基于以下4个核心原则开发CSS框架:灵活的无障碍React灵敏轻的...安装NPM: npm i --save easy-framework用法将核心
它具有CSS Grid之类的出色技术。 源是SCSS模块的集合,但是您可以使用缩略版本,因为可以使用CSS Vars对其进行修改。 此仓库仅包含用于构建CSS的纯SCSS文件,还请查看。 哲学 小东西很好地玩在一起 苗条但不瘦 ...
我自己的html,css和javascript代码合集到一个webframework 功能列表 GridSystem 12 Elemente [实现] 代码预览 幻灯片放映 导航[已实现] Vordefinierter容器[实现] 页脚 样式清单 滑杆 样式按钮 样式表单元素/组...
是一个当代CSS框架,可为您立即开始构建下一个项目奠定基础。 ke子。 为网站提供了一个简单,最少但可靠的起点。 快速开始使用HTML5模板,或者仅在您自己的项目中包含skelet.css。 :warning: v3.3.0中的重要更改...
基于十二网格系统,五个默认响应层,Sass变量和mixins,以及数十个预定义的类来组织内容,基于CSS网格布局的微框架可构建各种类型的网格。 目录 快速开始 提供几个快速入门选项: 克隆仓库: ...
Bootstrap is a free, open source CSS and JS framework that helps you create websites in minutes, and Ruby on Rails, or Rails as it's known, is an open source web application framework written in the ...
utilcss:实用CSS框架
must-watch-css:有关CSS的必看话题的有用列表
克隆仓库: git clone https://github.com/kenangundogan/flexible-grid.git 与安装 : npm install flexiblegrid 与安装: bower install flexiblegrid 使用安装: composer require kenangundogan/...
jQWidgets represents a framework based on jQuery for building web-based applications that run on PC, Touch and Mobile devices. jQWidgets includes more than 40 UI widgets. jQWidgets is not a modified ...