用 less 自制 bs 栅格布局
程序员文章站
2022-03-22 09:54:34
用 less 自制 bs 栅格布局/* 全局设置 reset.css normalize.css */@import "normalize";* { box-sizing: border-box;}/* 清除浮动 */.clearfix { &:after { content: ""; display: block; clear: both; }}/* 变量声明 1200 992 768 */// 屏幕的阈值@...
用 less 自制 bs 栅格布局
/* 全局设置 reset.css normalize.css */
@import "normalize";
* {
box-sizing: border-box;
}
/* 清除浮动 */
.clearfix {
&:after {
content: "";
display: block;
clear: both;
}
}
/* 变量声明
1200
992
768
*/
// 屏幕的阈值
@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); // -15px
margin-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);
}
本文地址:https://blog.csdn.net/Cool_breeze_/article/details/111829904
上一篇: 批处理应用-Mcafee手动杀毒脚本