简单的响应栅格样式sample grid

所属分类:UI-布局

 28980  310  查看评论 (1)
分享到微信朋友圈
X
简单的响应栅格样式sample grid ie兼容9

Simple Grid

只需引入css文件,大小4kb。

<link rel="stylesheet" type="text/css" href="simplegrid.css" />

结构

基本结构为三层div,最外层容器类,下面是栅格设置类,然后课接内容:

<div class="grid grid-pad">
    <div class="col-1-1">
            <div class="content">
                <!-- 内容-->
            </div>
    </div>
</div>

设置

pc端

<div class="col-1-1">

移动端,可追加移动设置类。

<div class="col-1-2 mobile-col-1-2">

例子

如在pc端声明容器占3/12布局:

<div class="col-3-12">

其余设置课自行研究,非常easy~

特点

“轻!”


相关插件-布局

matrix admin响应式模板(精细改进)

该模板是依据国外的matrix admin响应式模板改进而来,左右布局固定,符合国人使用习惯!
  布局
 60282  628

简洁清爽Bootstrap后台模板

Bootstrap框架开发的HTML后台模板管理
  布局
 202165  930

响应式后台管理模板Cameo Admin

简洁大方的响应式后台管理模板Cameo Admin
  布局
 74056  590

可爱的儿童网站_响应式幼儿园网站_电子商务_购物网站HTML5模板

本模板使用HTML5和CSS3的最新技术。它有无限的配色方案和9种可爱的背景模式。
  布局
 33515  458

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    WHO 0
    2017/5/10 16:52:27

    手机根本不行 ,这只是浏览器窗口变大变小 适应

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复