博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap 2.3.0自定Grid布局
阅读量:5234 次
发布时间:2019-06-14

本文共 1043 字,大约阅读时间需要 3 分钟。

Bootstrap()默认是12列的栅格布局(),有时候不满足我们布局的需求,这时侯,可以通过修改less/variables.less文件中关于栅格布局的变量就可以了。

比如我们想修改改为24列的栅格布局,可以参考以下我修改的配置参数:

// GRID// --------------------------------------------------// Default 940px grid// -------------------------@gridColumns:             24;@gridColumnWidth:         30px;@gridGutterWidth:         10px;@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));// 1200px min@gridColumnWidth1200:     35px;@gridGutterWidth1200:     15px;@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));// 768px-979px@gridColumnWidth768:      21px;@gridGutterWidth768:      10px;@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

修改完成后,在Bootstrap源码目录重新执行编译命令:make bootstrap,这样就可以得到修改过后的bootstrap所有文件。

同理,由于Bootstrap是基于less的,我们可以很方便的通过修改less/variables.less中的变量,定义和生成满足自己需求的bootstrap样式。

如何编译Bootstrap,请参考我的上一篇随笔:

转载于:https://www.cnblogs.com/TerryLiang/archive/2013/02/25/2931521.html

你可能感兴趣的文章
接口的应用
查看>>
WAVECOM CDMA Modem 发送短信
查看>>
Shortest Prefixes
查看>>
Fermat’s Chirstmas Theorem (素数打表的)
查看>>
KMP算法
查看>>
iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流
查看>>
GIT前世今生
查看>>
整数除以整数后转成百分比并且保留一位小数
查看>>
远程连接oracle数据库
查看>>
IntelliJ Idea 常用快捷键列表
查看>>
小问题,小细节要注意(string类型转换为bool类型)
查看>>
[shell]实现脚本执行结果匹配某个字符串
查看>>
基本_移动类型轮播效果_框架
查看>>
How to arrange the svn repository layout
查看>>
Java中ArrayList学习笔记
查看>>
FZU软工第五次作业-词组频率分析
查看>>
Javascript设计模式学习三(策略模式)
查看>>
ES6设计模式之模版方法模式
查看>>
主进程与子进程的执行顺序
查看>>
解决zabbix图中出现中文乱码问题
查看>>