ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

bootstrap-3-自定义栅格系统

2021-11-28 02:33:00  阅读:242  来源: 互联网

标签:自定义 less bootstrap mixins NSIS damu 栅格 grid css


自定义栅格系统

第一步

直接将bootstrap的源码拿过来。

  • grid.less
  • variables.less
  • mixins/clearfix.less
  • mixins/grid.less
  • mixins/grid-framework.less

第二步

自己编写一个damu.less,然后将上面所有的文件都引入:

这里要注意两个问题,第一个问题,clearfix.less

image-20211128014426782

第二个问题,在damu.less中的引入顺序,应该先引入mixins

image-20211128014511096

第三步

找到mixins/grid-framework.less,然后将里面的col-全部替换掉为damu-col-

第四步

使用koaladamu.less进行编译,变成damu.css

image-20211128012916109

image-20211128012928383

编译出来的,就是damu.css

image-20211128014649850

编译出来的css,是有清除浮动的代码的。

第五步

写一个html,然后引入damu.css

image-20211128013018713

image-20211128013216095

image-20211128014755417

最后做出来的效果,如下:

image-20211128014838202

这样,一个自定义的栅格系统,就出来了。

这种做法,真的,风骚。


关于koala(考拉)

这个GUI小工具用来将less文件编译成为css文件,这个工具已经停止更新维护了。

image-20211128015103586

上面是koala的官网。

可以看到最新的就是2017-11-19日的版本了。

image-20211128015445704

作者是在周日发了最后的版本。

image-20211128015418290

image-20211128015354327

在github上面,发现了两件事情。

第一,koala的作者是oklai,这个作品名字和作者的英文名字,很好玩。这个好玩的作者是阿里巴巴的。

作者是在2019年3月28日发布了项目停止的声明。

第二,NSIS,这是个什么东西?

image-20211128015726457

oklai

image-20211128020444134

image-20211128020458580

看这个作者,也是不再搞github了。

博客园的地址:https://www.cnblogs.com/lainzq/

nsis

image-20211128022238519

NSIS(Nullsoft Scriptable Install System),

Nullsoft脚本安装系统,

为一个开放源代码脚本驱动的封装安装文件用工具。

可以用其脚本语言自定安装的流程,同时支持多种语系的安装接口。

它提供了安装、卸载、系统设置、文件解压缩等功能。

NSIS是通过它的脚本语言来描述安装程序的行为和逻辑的。

NSIS的脚本语言和通常的编程语言有类似的结构和语法,但它是为安装程序这类应用所设计的。

image-20211128022300764

这个东西看这挺酷的,有时间可以研究一下。

标签:自定义,less,bootstrap,mixins,NSIS,damu,栅格,grid,css
来源: https://www.cnblogs.com/gnuzsx/p/15614201.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有