前言
本文主要介绍模仿bootstrap的栅格系统,运用栅格系统的原理,自定义栅格系统。主要步骤有:全局设置、变量声明、容器的实现、行的设置、列的设置、测试、代码拆分。
提示:以下是本篇文章正文内容,下面案例可供参考
注意:本文所有样式设置的代码都使用less预处理语言
一、全局设置
- 样式重置:引入重置样式文件可以到bootCDN官网上下载保存,添加链接描述,搜normalize就可以找到,然后复制链接,浏览器打开并保存文件,最后修改文件名为normalize.less。
- 清除浮动:
.clearfix(){
&:before,
&:after{
display: table;
clear: both;
content: '';
}
}
- 定义盒子大小
*{
box-sizing: border-box;
}
二、变量声明
- 屏幕阈值,大屏>=1200px 中屏>=992px 小屏>=768px 超小屏<768px
- container容器宽度,大屏=1170px 中屏=970px 小屏=750px 超小屏=auto
- 槽宽(列间距)=30px
- 总列数=12
//屏幕阈值
@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;
注意:以上各个变量参数可以根据自己的需要自定义更改。
三、行的实现
- 创建混合函数,用于设置容器的公共样式:居中、左右内边距为槽宽的一半。
.container-common-style(){
margin-right: auto;
margin-left: auto;
padding-left: @grid-gutter-width/2;//槽宽的一半
padding-right: @grid-gutter-width/2;
}
- 设置容器的样式
/*容器的设置*/
.make-container(){
/*1. container容器*/
.container {
//公共样式
.container-common-style();
//清除浮动
.clearfix();
/*实现不同屏幕的container容器的样式控制*/
//小屏
@media (min-width: @screen-sm){
width: @container-sm-width;
}
//中屏
@media (min-width: @screen-md){
width: @container-md-width;
}
//大屏
@media (min-width: @screen-lg){
width: @container-lg-width;
}
}
/*2. container-fluid容器*/
.container-fluid{
//公共样式
.container-common-style();
//清除浮动
.clearfix();
}
}
.make-container();
四、列的实现
- 设置公共样式
/*设置公共样式*/
.make-grid-columns(){
//公共样式,1,2,3,4,5.6,7,8,9,10,11,12
//创建混合函数,初始化生成第一列选择器,并在函数中调用选择器列表拼接的函数
.col(@index){
//此时index=1,调用拼接函数
//初始化selector的值,生成第一列选择器.col-xs-index, .col-sm-index, .col-md-index, .col-lg-index
@selector:~'.col-xs-@{index},.col-sm-@{index},.col-md-@{index},.col-lg-@{index}';
//调用拼接选择器列表的混合函数,生成完整的选择器列表
.col(@index+1,@selector);
}
.col(1);//作用相当于设置变量@index=1,生成第一列选择器
//创建拼接选择器列表的混合函数,参数:index,之前拼接好的列表list
.col(@index,@list) when(@index<=@grid-columns){
//当index小于总列数时,执行拼接,将新的index拼接到list后面,更新list
@selector: ~'@{list},.clo-xs-@{index},.col-sm-@{index},.col-md-@{index},.col-lg-@{index}';
//循环调用,将下一个index拼接到list
.col(@index+1,@selector);
}
//判断选择器列表是否拼接完成,拼接完成后,开始设置公共样式
.col(@index,@list) when(@index>@grid-columns){
//当index大于总列数时,list已经拼接完毕,设置列元素的公共样式,
@{list}{
padding-left: @grid-gutter-width/2;
padding-right: @grid-gutter-width/2;
position: relative;
float: left;
min-height: 1px;
}
}
}
.make-grid-columns();
- 设置列的宽度和列偏移
- 创建设置列宽的函数
//创建设置列宽的函数,参数为屏幕类型
.make-column-width(@type){
//创建函数,生成选择器并设置宽度
.col(@index) when (@index<=@grid-columns){
//生成选择器
@selector:~'.col-@{type}-@{index}';
//设置样式
@{selector}{
//定义变量,计算列的宽度
@w:@index/@grid-columns*100;
//设置宽度
width: ~'@{w}%';
//或者
//width: percentage(@index/@grid-columns);
}
//递归调用,分别设置不同的列宽
.col(@index+1);
}
.col(1);//传参,进行选择器的初始化
}
- 创建设置列偏移的函数
//创建设置列偏移的函数,参数为屏幕类型
.make-column-offset(@type){
//创建函数,生成选择器并设置列偏移
.col(@index) when (@index<=@grid-columns){
//生成选择器
@selector:~'.col-@{type}-offset-@{index}';
//设置列偏移
@{selector}{
margin-left: percentage(@index/@grid-columns);
}
//递归调用
.col(@index+1);
}
.col(1);
}
- 设置列宽和列偏移
/*超小屏*/
.make-column-width(xs);
.make-column-offset(xs);
/*小屏*/
@media (min-width: @screen-sm) {
/*列宽*/
.make-column-width(sm);
/*列偏移*/
.make-column-offset(sm);
}
/*中屏*/
@media (min-width: @screen-md) {
.make-column-width(md);
.make-column-offset(md);
}
/*大屏*/
@media (min-width: @screen-lg) {
.make-column-width(lg);
.make-column-offset(lg);
}
五、测试
提示:将上面的样式测试的less文件使用koala工具编译成css文件之后,引入测试文件进行测试。
- 测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的栅格</title>
<link rel="stylesheet" href="./css/grid.css">
<style>
.container{
/*height: 100px;*/
background-color: pink;
}
.container-fluid{
height: 100px;
background-color: skyblue;
}
.gap{
height: 20px;
}
[class*=col]{
margin-bottom: 15px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/holder/2.9.7/holder.min.js"></script>
</head>
<body>
<div class="container"></div>
<div class="container-fluid"></div>
<div class="gap"></div>
<div class="container"><img src="holder.js/100px100?bg=#90a" alt=""> </div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
</div>
</div>
</body>
</html>
上面的代码中引入了bootCDN官网中的图片占位插件,网址:链接,搜holder,出来的第一个插件就是图片占位插件,然后再在测试中需要用到图片的地方设置图片的src路径地址为:'holder.js/100px100’即可。
六、代码拆分、测试
为了模仿的更像一点,我们可以参照bootstrap的思路,将样式设置代码拆分成几个文件,然后再在一个文件里面统一引入。
- 样式重置:normalize.less
- 全局设置:global.less
//清除浮动
.clearfix(){
&:before,
&:after{
display: table;
clear: both;
content: '';
}
}
//盒子大小
*{
box-sizing: border-box;
}
- 变量声明:variable.less
/*
变量声明:
1. 屏幕阈值,大屏>=1200px 中屏>=992px 小屏>=768px 超小屏<768px
2. container容器宽度,大屏=1170px 中屏=970px 小屏=750px 超小屏=auto
3. 槽宽(列间距)=30px
4. 总列数=12
*/
//屏幕阈值
@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;
- 混合函数:mixins.less,混合函数这里因为后面还会有其他的函数文件,所以将设置栅格的函数都封装到了grid.less文件里,然后打包到mixins文件夹中,再在总目录下的mixins.less文件中引入
@import "mixins/grid";
- 实现栅格:grid.less,在总目录下,将上面有关栅格实现的调用代码封装到grid.less文件中
/*栅格的实现*/
.make-container();
.make-row();
.make-grid-columns();
/*媒体查询阶段*/
/*超小屏*/
.make-column-width(xs);
.make-column-offset(xs);
/*小屏*/
@media (min-width: @screen-sm) {
/*列宽*/
.make-column-width(sm);
/*列偏移*/
.make-column-offset(sm);
}
/*中屏*/
@media (min-width: @screen-md) {
.make-column-width(md);
.make-column-offset(md);
}
/*大屏*/
@media (min-width: @screen-lg) {
.make-column-width(lg);
.make-column-offset(lg);
}
- 统一:bootstrap.less
//样式重置
@import "normalize";
//全局
@import "global";
//变量
@import "variable";
//函数
@import "minxins";
//执行
@import "grid";
- 测试:与前面的测试代码一样,不同的是这里引入的bootstrap.less编译后的css文件。
(全文完)