bootstrap栅格系统源码分析

本文详细分析了Bootstrap栅格系统的源码,包括容器的流体和固定样式,行(row)的实现,以及列(column)的复杂配置,特别是执行.make-grid-columns和不同屏幕尺寸的.make-grid过程。在总结中强调了在创建列排序时遵循尺寸顺序的重要性,以避免选择器错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

bootstrap栅格系统源码分析

1. 容器

  1. 流体容器&固定容器 公共样式
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px
    公共代码
.container-fixed(@gutter: @grid-gutter-width) {   //30px,槽宽
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));   //15px
  padding-right: ceil((@gutter / 2));  //15px
  &:extend(.clearfix all);
}
  1. 固定容器 container
						     阀值                                 width
					xs(小于768px)	                             auto    //未设置    自动
					sm(大于等于768px)                        720px+槽宽
					md(大于等于992px)                        940px+槽宽
					lg(大于等于1200px)                        1140+槽宽
//@grid-gutter-width  30px  槽宽
 @media (min-width: @screen-sm-min) {
   
          768px
    width: @container-sm;              // (720px + @grid-gutter-width);
  }
  @media (min-width: @screen-md-min) {
   
        992px 
    width: @container-md;     //(940px + @grid-gutter-width);
  }
  @media (min-width: @screen-lg-min) {
   
         1200px
    width: @container-lg;   //(1140px + @grid-gutter-width);
  }

2. 行 row

		  margin-left:  -15px;
		margin-right: -15px;

源码:

	.row {
   
   
	  .make-row();
	}
	.make-row(@gutter: @grid-gutter-width) {
   
       //槽宽30px
	  margin-left:  ceil((@gutter / -2));      // margin-left:-15px
	  margin-right: floor((@gutter / -2));    // margin-right:-15px
	  &:extend
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值