bootstrap栅格

最新推荐文章于 2024-08-13 14:09:09 发布
最新推荐文章于 2024-08-13 14:09:09 发布
阅读量136 收藏
点赞数 2
分类专栏： 日常练习 文章标签： html5 css less bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53979554/article/details/117409623
版权

定义我的栅格

前言

本文主要介绍模仿bootstrap的栅格系统，运用栅格系统的原理，自定义栅格系统。主要步骤有：全局设置、变量声明、容器的实现、行的设置、列的设置、测试、代码拆分。

提示：以下是本篇文章正文内容，下面案例可供参考
注意：本文所有样式设置的代码都使用less预处理语言

一、全局设置

  1. 样式重置：引入重置样式文件可以到bootCDN官网上下载保存，添加链接描述，搜normalize就可以找到，然后复制链接，浏览器打开并保存文件，最后修改文件名为normalize.less。
  2. 清除浮动：
.clearfix(){
  &:before,
  &：after{
    display: table;
    clear: both;
    content: '';
  }
}
  1. 定义盒子大小
*{
  box-sizing: border-box;
}

二、变量声明

  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;

注意：以上各个变量参数可以根据自己的需要自定义更改。

三、行的实现

  1. 创建混合函数，用于设置容器的公共样式：居中、左右内边距为槽宽的一半。
.container-common-style(){
  margin-right: auto;
  margin-left: auto;
  padding-left: @grid-gutter-width/2;//槽宽的一半
  padding-right: @grid-gutter-width/2;
}
  1. 设置容器的样式
/*容器的设置*/
.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();

四、列的实现

  1. 设置公共样式
/*设置公共样式*/
.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();
  1. 设置列的宽度和列偏移
  • 创建设置列宽的函数
//创建设置列宽的函数，参数为屏幕类型
.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的思路，将样式设置代码拆分成几个文件，然后再在一个文件里面统一引入。

  1. 样式重置：normalize.less
  2. 全局设置：global.less
//清除浮动
.clearfix(){
  &:before,
  &：after{
    display: table;
    clear: both;
    content: '';
  }
}
//盒子大小
*{
  box-sizing: border-box;
}
  1. 变量声明：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;
  1. 混合函数：mixins.less，混合函数这里因为后面还会有其他的函数文件，所以将设置栅格的函数都封装到了grid.less文件里，然后打包到mixins文件夹中，再在总目录下的mixins.less文件中引入
@import "mixins/grid";
  1. 实现栅格：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);
}
  1. 统一：bootstrap.less
//样式重置
@import "normalize";
//全局
@import "global";
//变量
@import "variable";
//函数
@import "minxins";
//执行
@import "grid";
  1. 测试：与前面的测试代码一样，不同的是这里引入的bootstrap.less编译后的css文件。

（全文完）

春雨惊春.
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap
qq_53124400的博客
01-06 199
概念 ： 一个前端开发的框架，基于HTML,css,JavaScript 框架 ： 一个半成品软件,开发人员可以在框架基础上进行开发，简化代码 好处： 定义了很多的css样式和js插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果 响应式布局：同一套页面可以兼容不同分辨率的设备 快速入门 1. 官方下载Bootstrp 2. 在项目中将bootstrap-3.3.7-dist中的三个文件夹复制到项目中 3.创建html页面，引入必要的资源文件 <!DOCTYP.
03-bootstrap-响应式布局-栅格系统
记录java学习日常~
05-25 2839
行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
bootstrap-栅格
起名好难呀！
12-12 651
官网：https://v3.bootcss.com/css/#grid 看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> &lt
bootstrap-自定义导航栏隐藏参数@screen-sm
weixin_30415801的博客
11-13 517
导航菜单默认在屏幕小于768px的时候自动折叠，怎么自定义这个大小？ 需要重新编译bootstrap 编译 CSS 和 JavaScript 文件 问题解决！ 转载于:https://www.cnblogs.com/evidd/p/7825294.html...
bootstrap栅格源码解析
呵呵哒!的博客
04-07 383
grid.less // 固定容器 .container { .container-fixed(); @media (min-width: @screen-sm-min) { width: @container-sm; } @media (min-width: @screen-md-min) { width: @container-md; } @media (min-width: @screen-lg-min) { width: @container..
Bootstrap栅格系统
lihui61357457的博客
11-06 1371
1.Bootstrap栅格系统 1.Bootstrap栅格系统 Bootstrap的栅格系统使用一系列的"行"和"列"来实现复杂的响应式布局 默认情况下栅格系统会将一行的内容等分为12份, 然后我们可以通过绑定类名的方式指定这一行中的每一列占用多少分 2.Bootstrap栅格系统格式 <容器> <行> <列>我们的内容</列> <列>我们的
Bootstrap栅格系统的使用和理解2
08-31
Bootstrap栅格系统是一种流行的网页布局工具，用于创建响应式的网页设计。这个系统基于12列的网格模型，允许开发者在不同设备和屏幕尺寸上灵活地安排内容。在Bootstrap框架中，栅格系统的设计目的是使页面内容能够...
响应式框架Bootstrap栅格系统的实例
08-28
Bootstrap栅格系统实例详解 Bootstrap栅格系统是Bootstrap框架中的一种响应式布局系统，它可以根据不同的屏幕尺寸和设备类型来调整页面的布局和样式。下面我们来详解Bootstrap栅格系统的实例。 一、Bootstrap栅格...
浅析BootStrap栅格系统
09-02
Bootstrap栅格系统是前端开发中的一个核心组件，尤其在响应式设计中起着至关重要的作用。这个系统允许开发者创建灵活、自适应的布局，确保网页在不同屏幕尺寸下都能保持良好的视觉效果。下面我们将深入探讨这个系统...
Bootstrap栅格系统学习笔记
09-01
Bootstrap栅格系统是一种流行的网页布局工具，用于创建响应式、移动优先的设计。它允许开发者根据不同的设备屏幕尺寸灵活地组织内容。以下是对Bootstrap栅格系统的详细介绍： 1. **简介** Bootstrap栅格系统的核心...
Bootstrap栅格系统简单实现代码
08-31
Bootstrap栅格系统简单实现代码 Bootstrap栅格系统是Bootstrap框架中的一种布局系统，它可以帮助开发者快速创建响应式的网页布局。栅格系统的主要功能是将页面拆分为多个部分，各个部分可以根据不同的屏幕尺寸和...
Container make 解析机制
cangqiong_xiamen的博客
07-24 448
resolve 解析是容器中最复杂的部分，有很多小细节只有通读整个流程反复试验后才能领略作者的设计的目的。 Make 和 Resolve 都是从容器中解析实例 (这个实例是指 concrete) 出来。简单说就是从容器中把前面 bind 进去的东西拿出来用。 这里需要明确的是，make 解析的时候会调用 build 函数实例化对象，就是说理论上如果绑定的是一个字符串，laravel 默认这是一个可以实例化对象的类路径。 那我们如果想要绑定一个纯粹的字符串或者数字，我们可以使用闭包函数。让闭包返回我们需要的
Laravel Container (容器) 深入理解 (下)
总有些事，值得你去努力
06-19 4151
本文大部分翻译自 DAVE JAMES MILLER 的 《Laravel’s Dependency Injection Container in Depth》 。原文自：https://segmentfault.com/a/1190000011560253上文介绍了 Dependency Injection Containers (容器) 的基本概念，现在接着深入讲解 Laravel 的 Con...
利用@media与@media screen进行响应式布局
天空一角的梦
07-07 2968
了解Media QueriesMedia Queries，其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS，我们不去讨论。css3的@media属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句...
HTML5+CSS3-HTML5入门
2302_77230857的博客
08-06 752
,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和
软件设计之HTML5
thm19990903的博客
08-04 1930
HTML：Hyper Text Markup Language 超文本标记语言。
HTML样式- CSS——WEB开发系列08
最新发布
一条晒干的咸鱼的博客
08-13 762
HTML 和 CSS 是构建现代网页的基础。HTML（超文本标记语言）负责定义网页的结构，而 CSS（层叠样式表）则用于控制网页的外观和布局。
css实现水滴效果图
yinge0508的博客
08-12 495
【代码】css实现水滴效果图。
木舟0基础学习Java的第二十四天(CSS,JS，Jquery)
tzh525的博客
08-13 290
JS全称JavaScript 是一种基于对象，事件驱动的脚本语言。id选择器：同一个id选择器在同一页面中只能调用一次。标签选择器：直接应用于HTML标签。类选择器：可以在页面当中多次使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值