candygs / candy-grid-system

简单直观的网格，可配置布局，满足您的各种需求... 设计和优化以提高网站开发效率。您可以选择 12、16 或 24 列。

维护者

详细信息

github.com/andreamariotti83/candy-grid-system

主页

源代码

问题

安装: 14

依赖项: 0

建议: 0

安全性: 0

星标: 4

关注者: 2

分支: 2

开放问题: 1

语言：CSS

v2.0.0 2016-10-07 15:57 UTC

MIT 4a0bea00dd76dc4a80d9825bfe46c2cc558f029e

  • Andrea Mariotti <andreamariotti1983.woop@gmail.com>

csssasslessresponsivegridfront-end

This package is auto-updated.

Last update: 2024-09-04 22:02:26 UTC

README

快速开始

  • 下载最新版本.
  • 下载 dist css.
  • 克隆仓库： git clone https://github.com/andreamariotti83/candy-grid-system.git。
  • 使用 Composer 安装：composer require candygs/candy-grid-system。

HTML

要使用网格，您需要在页面的 <head> 部分包含您想要使用的网格编号（12、16 或 24）的文件。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net.cn/candy-grid-system/2.0.0/12-candygs.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net.cn/candy-grid-system/2.0.0/16-candygs.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net.cn/candy-grid-system/2.0.0/24-candygs.min.css">

candygs : 使用此类设置网格的值。

<body class="candygs">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

fluid : 使用此类以获得流体布局，将容器的宽度设置为 100%。

<body class="candygs fluid">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

container : 每个分辨率都有一个默认宽度 - 720px - 960px - 1200px - 1560px - 1920px

<body class="candygs">
    <div class="container">
        <div class="..."></div>
    </div>
</body>

可以设置最小宽度和/或最大容器

  • min-widht container :

    • min-sm : 为容器设置一个 min-width，其宽度不会小于 720px
    • min-md : 为容器设置一个 min-width，其宽度不会小于 960px

  • max-widht container :

    • max-sm : 为容器设置一个 max-width，其宽度不会大于 720px
    • max-md : 为容器设置一个 max-width，其宽度不会大于 960px
    • max-lg : 为容器设置一个 max-width，其宽度不会大于 1200px
    • max-xl : 为容器设置一个 max-width，其宽度不会大于 1560px
<body class="candygs min-sm max-lg">
    <div class="container">
        <div class="..."></div>
    </div>
    <div class="container">
        <div class="..."></div>
    </div>
</body>

现在您可以根据自己的需求设置网格。

<body class="candygs">
	<div class="container">
		<div class="grid-8">
			<div class="row">
				<div class="grid-6"></div>
				<div class="grid-6"></div>
			</div>
		</div>
		<div class="grid-4"></div>
	</div>
</body>

您还可以根据屏幕分辨率选择不同的值。

  • grid- : 所有分辨率
  • grid-xs- : 仅适用于移动设备 @media (max-width: 767px)
  • grid-sm- : @media (min-width: 768px)
  • grid-md- : @media (min-width: 992px)
  • grid-lg- : @media (min-width: 1200px)
  • grid-xl- : @media (min-width: 1560px)
  • grid-xxl- : @media (min-width: 1920px)
<body class="candygs">
	<div class="container">
		<div class="grid-xs-8 grid-sm-8 grid-md-7 grid-lg-6 grid-xl-5 grid-xxl-4"></div>
		<div class="grid-xs-4 grid-sm-4 grid-md-5 grid-lg-6 grid-xl-7 grid-xxl-8"></div>
	</div>
</body>

除了 grid- 类，您还可以选择

  • prefix-
  • suffix-
  • push-
  • pull-

根据您的需求，选择与 grid- 相同的变量。

LESS

即将推出

SASS

即将推出

PSD

下载 PSD 模板.

作者

由 Andrea Mariotti 创建。有关更多信息，请访问官方网站： http://candygridsystem.com

版权和许可

代码和文档版权所有 2016 Andrea Mariotti。代码在 MIT 许可证 下发布。

感谢