Bootstrap 2.3.0自定Grid布局
Bootstrap(http://twitter.github.com/bootstrap)默认是12列的栅格布局(http://twitter.github.com/bootstrap/scaffolding.html#gridSystem),有时候不满足我们布局的需求,这时侯,可以通过修改less/variables.less文件中关于栅格布局的变量就可以了。
比如我们想修改改为24列的栅格布局,可以参考以下我修改的配置参数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // GRID // -------------------------------------------------- // Default 940px grid // ------------------------- @gridColumns: 24 ; @gridColumnWidth: 30px ; @gridGutterWidth: 10px ; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1 )); // 1200px min @gridColumnWidth 1200: 35px ; @gridGutterWidth 1200: 15px ; @gridRowWidth 1200: (@gridColumns * @gridColumnWidth 1200 ) + (@gridGutterWidth 1200 * (@gridColumns - 1 )); // 768px -979px @gridColumnWidth 768: 21px ; @gridGutterWidth 768: 10px ; @gridRowWidth 768: (@gridColumns * @gridColumnWidth 768 ) + (@gridGutterWidth 768 * (@gridColumns - 1 )); |
修改完成后,在Bootstrap源码目录重新执行编译命令:make bootstrap,这样就可以得到修改过后的bootstrap所有文件。
同理,由于Bootstrap是基于less的,我们可以很方便的通过修改less/variables.less中的变量,定义和生成满足自己需求的bootstrap样式。
如何编译Bootstrap,请参考我的上一篇随笔:
http://www.cnblogs.com/TerryLiang/archive/2013/02/19/2916460.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现