用 less 自制 bs 栅格布局

/* 全局设置 reset.css  normalize.css */
@import "normalize";* {box-sizing: border-box;
}/* 清除浮动 */
.clearfix {&:after {content: "";display: block;clear: both;}
}/* 变量声明1200992768*/
// 屏幕的阈值
@screen-lg: 1200px;
@screen-md: 992px;
@screen-sm: 768px;// container 容器的宽度
@container-lg-width: 1170px;
@container-md-width: 970px;
@container-sm-width: 750px;// 列宽
@grid-gutter-width: 30px;// 总的列数
@grid-columns: 12;/* 实现 */
.mark-container() {// container 容器的实现.container {.container-common-style();// 清除浮动//.clearfix();&:extend(.clearfix all);// 小屏幕 container 的宽度@media (min-width: @screen-sm) {width: @container-sm-width;}// 中屏幕 container 的宽度@media (min-width: @screen-md) {width: @container-md-width;}// 大屏幕 container 的宽度@media (min-width: @screen-lg) {width: @container-lg-width;}}// container-fluid 容器的实现.container-fluid {.container-common-style();&:extend(.clearfix all);}// 混合.container-common-style() {margin-right: auto;margin-left: auto;padding-left: @grid-gutter-width * (1/2);padding-right: @grid-gutter-width * (1/2);}
}
.mark-container();// 2. 行的设置
.make-row() {.row {margin-left: -@grid-gutter-width * (1/2); // -15pxmargin-right: -@grid-gutter-width * (1/2);}
}
.make-row();// 3.列的实现
// 公共样式  1,2,3,4,5,6,7,8,9,10,11,12  .col-xs-1 ... col-xs-12
.make-grid-columns() {.col(@index) {// @index  2     1@selector: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";.col(@index+1, @selector);}//     2       1.col(@index, @list) when (@index <= @grid-columns) {// 变量拼接@selector: ~"@{list},.col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; // 1,2 ==> 1,2,3// 调用自己.col(@index+1, @selector);}.col(@index, @list) when (@index > @grid-columns) {@{list} {padding-left: @grid-gutter-width * (1/2);padding-right: @grid-gutter-width * (1/2);position: relative;min-height: 1px;float: left;}}.col(1);
}
.make-grid-columns();// 超小屏幕的宽度设置  .col-xs-1{width: }  .col-xs-2{}
.make-column-width(@type) {.col(@index) when (@index <= @grid-columns) {// 拼接@selector: ~".col-@{type}-@{index}"; // col-xs-1@{selector} {@w: @index * (1/@grid-columns) * 100;width: ~"@{w}%";}// 递归调用.col(@index+1);}.col(1); // 1 ==> .col-xs-1
}
.make-column-width(xs);// 超小屏幕下的偏移设置
.make-column-offset(@type) {.col(@index) when (@index <= @grid-columns) {// 拼接@selector: ~".col-@{type}-offset-@{index}"; // col-xs-1@{selector} {@w: @index * (1/@grid-columns) * 100;width: ~"@{w}%";}// 递归调用.col(@index+1);}.col(1); // 1 ==> .col-xs-1
}
.make-column-offset(xs);// 媒体查询阶段 小屏幕的情况
@media (min-width: @screen-sm) {// .col-sm-1 ...... .col-sm-12// .col-sm-offset-1 ...... .col-sm-offset-12.make-column-width(sm);.make-column-offset(sm);
}// 媒体查询阶段 中屏幕的情况
@media (min-width: @screen-md) {// .col-md-1 ...... .col-md-12// .col-md-offset-1 ...... .col-md-offset-12.make-column-width(md);.make-column-offset(md);
}// 媒体查询阶段 大屏幕的情况
@media (min-width: @screen-lg) {// .col-lg-1 ...... .col-lg-12// .col-lg-offset-1 ...... .col-lg-offset-12.make-column-width(lg);.make-column-offset(lg);
}

用 less 自制 bs 栅格布局相关推荐

[译] 你不需要基于 CSS Grid 的栅格布局系统
本文讲的是[译] 你不需要基于 CSS Grid 的栅格布局系统, 原文地址:You do not need a CSS Grid based Grid System 原文作者:Rachel Andr ...
bootstrap 标题居中加颜色_BootStrap从基础到项目实战_第1季_03章_01_CSS样式之栅格布局...
目标目标一.理解什么是栅格布局目标二.掌握栅格布局具体应用目标三.掌握BootStrap通用CSS样式(排版.代码.代码.表单.按钮.图片.辅助类.响应式工具) 内容一.BootStrap全局 ...
Bootstrap栅格布局系统的特点
栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
mui栅格布局的两种方式（grid和list，宫格和列表）
文章目录 mui栅格布局的两种方式(grid和list,宫格和列表) 效果截图示下: 代码示下: mui栅格布局的两种方式(grid和list,宫格和列表) 效果截图示下: 代码示下: <!DO ...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345 时间 2014-02-20 17:58:00 博客园-原创精华区原 ...
iOS 瀑布流之栅格布局
代码地址如下: http://www.demodashi.com/demo/14760.html 一 .效果预览二.确定需求由下面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后 ...
【Qt教程】2.2 - Qt5 布局管理器（水平、垂直、栅格布局）、弹簧、设计一个登陆界面
使用布局管理器,来设计一个登陆界面都是操作,没代码没理论.参照:Qt设计一登陆窗口布局 1. 新建空工程双击.ui文件,进入界面设计区. 我们新建工程时候,使用的是QMainWindow类,会自动 ...
Bootstrap栅格布局分析grid源码
前言此为本人自学经验和某站博主经验,与其他简书作者经验共同写出. 如有侵权请联系. 布局首选布局前,大家要明白bootstrap几种布局方式栅格&flex 这篇文章先讲解栅格,flex以 ...

用 less 自制 bs 栅格布局

用 less 自制 bs 栅格布局

用 less 自制 bs 栅格布局相关推荐

最新文章

热门文章