实现一个简单的栅格系统
来源:互联网 发布:数据库如何检索字符串 编辑:程序博客网 时间:2024/06/07 05:46
实现一个简单的栅格系统
关于栅格系统
相信大家都用过 Bootstrap
(神马!你没用过?这么流行你还不快去试试),栅格系统就是 Bootstrap
的核心,现在许多 UI 库中也增加了对栅格系统的支持。
栅格系统是通过对元素增加各种不同的类名从而在不同的屏幕宽度下实现不同的效果,从而实现响应式的功能。
前言
今天,我自己模仿实现了一个简单的栅格系统,戳这里看效果,看起来栅格系统很高大上,其实栅格系统的实现很简单,主要用到的还是浮动。这篇文章就是打算记录一下我是如果实现一个简单的栅格系统的。
开始
实现栅格系统,首要要确定两个内容。
我们打算将屏幕分为几类,每一类的类前缀是什么。
我们打算支持的列数是多少。
这里我选择与 bootstrap
相同, 即将屏幕分为四类:超小屏幕 手机 (<768px) 、小屏幕 平板 (≥768px) 、 中等屏幕 桌面显示器 (≥992px) 、 大屏幕 大屏幕显示器 (≥1200px) ,类前缀分别为:.col-xs-
、 .col-sm-
、 .col-md-
、 .col-lg-
。列数 12。
实现
确定了我们的屏幕分类和列数之后,我们就可以开始实现了。首先我们给所有栅格系统的 class
增加浮动
.col-sm-1, .col-sm-2, ... , .col-lg-12 { float: left;}
声明了浮动,接下来我们来声明宽度。我们从最小屏幕开始,最小屏幕不需要使用 @media
来声明, 即如果我们只声明了最小宽度时他的类名,其元素将在所有情况下生效。
.col-sm-1 { width: 8.333333% // 十二分之一}.col-sm-2 { width: 16.66667% // 十二分之二 }// ....col-sm-12 { width: 100% // 十二分之十二}
这样最小宽度的情况我们就写好了。接下来我们来写其他情况
其他情况也需要声明浮动和宽度,但是需要声明最小屏幕宽度,我们以中等屏幕宽度举例,中等屏幕宽度即为屏幕大于992px的情况:
@media (min-width:992) { .col-md-1 { width: 8.333333% // 十二分之一 } .col-md-2 { width: 16.66667% // 十二分之二 } // ... .col-md-12 { width: 100% // 十二分之十二 }}
其他情况同理,这样我们就能实现一个简单的栅格系统很啦。
疑问
很多小伙伴肯定会想,我们只声明了最小宽度,却没有声明最大宽度,这里是不是有问题呀。
其实不是的。这里的想法是这样的,比如我们这里写了中等屏幕宽度和超小屏幕宽度两种情况的 class
,那在超小屏幕上和小屏幕上都会按超小屏幕声明的宽度来执行。而在中等屏幕宽度和大屏幕上,中等屏幕宽度的声明会覆盖超小屏幕的声明,则会按中等屏幕声明来执行。
好高明啊哈哈哈~
最后
虽然现在的 UI 库大都会封装这些功能,但是自己实现一个了解一下原理对我们也是大有碑益的,至少~不会让我们变成一个“胶水程序员”。
- 实现一个简单的栅格系统
- 栅格系统的基础实现
- Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
- Bootstrap的栅格系统
- bootstrap的栅格系统
- web-前端开发之栅格系统的简单应用
- ArcGIS9为栅格数据管理提供了一个完整的系统
- 一个简单的粒子系统的实现
- 利用Python实现ARCGIS中栅格计算器的简单功能
- 实现一个简单的脚本系统
- 一个简单备份管理系统的实现
- JS实现一个简单的抽奖系统
- 一个群博系统的简单实现
- 不喜欢bootstrap的栅格系统,太复杂了,我发明了一个最简洁的20列栅格系统
- 网页的栅格系统设计
- 网页的栅格系统设计
- 网页的栅格系统设计
- 网页的栅格系统设计
- WebService 的创建,部署和使用
- JAVA监视某文件夹并对文件夹里的文件做操作
- 数十种TensorFlow实现案例汇集:代码+笔记
- struts2之日期类型转换
- Yaf学习之控制器
- 实现一个简单的栅格系统
- [LeetCode]53. Maximum Subarray
- Linux下编译C语言程序
- Hyperledger Fabric 1.0 快速部署
- 数据库-SQL语句练手
- HDU1542
- Iterator的源码解析
- 首先执行js再进行href跳转
- C++枚举体知识点小结