Bootstrap 栅格源码解析(一)

less 同时被 2 个专栏收录
1 篇文章 0 订阅
1 篇文章 0 订阅

Bootstrap 栅格源码解析(一)

容器

源码部分

// 固定容器
.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-lg;
  }
}

// Fluid container 流体容器
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

.container-fluid {
  .container-fixed();
}

对应变量(位于variable.less中):

  • @screen-sm-min : 768px
  • @screen-md-min : 992px
  • @screen-lg-min : 1200px

tips:

  • 大于1200px 为大屏pc
  • 大于992px 小于1200px 为小屏pc
  • 大于768px 小于992px 为平板
  • 小于768px 为移动设备

调用了混入

.container-fixed();

.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);
}

对应变量(位于variable.less中):

  • @grid-gutter-width : 30px 表现为容器中两边各有15px内边距

继承了.clearfix(位于utilities.less中),用于清除浮动

.clearfix {
  .clearfix();
}

调用了混入(位于clearfix.less中)

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

// Row
//
// Rows contain and clear the floats of your columns.

.row {
  .make-row();
}

调用混入

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  ceil((@gutter / -2));
  margin-right: floor((@gutter / -2));
  &:extend(.clearfix all);
}

对应变量(位于variable.less中):

  • @grid-gutter-width : 30px

继承了.clearfix(位于utilities.less中),用于清除浮动

.clearfix {
  .clearfix();
}

调用了混入(位于clearfix.less中)

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

主要是添加了左右两边-15px的外边距和清除浮动

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

AXING阿幸

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值