Bootstrap Less mixin 和变量 key:gutter column - Bootstrap 响应式布局

Bootstrap Less mixin 和变量

W3CSchool > bootstrap3中文手册 > Bootstrap 响应式布局 > Bootstrap Less mixin 和变量

Less mixin 和变量

除了用于快速布局的预定义栅格类,Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

变量

通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。我们使用这些变量生成预定义的栅格类,如上所示,还有如下所示的定制 mixin。

  1. @grid-columns:              12
  2. @grid-gutter-width:         30px
  3. @grid-float-breakpoint:     768px

mixin

mixin 用来和栅格变量一同使用,为每个列(column)生成语义化的 CSS 代码。

  1. // Creates a wrapper for a series of columns 
  2. .make-row(@gutter: @grid-gutter-width) { 
  3.   // Then clear the floated columns 
  4.   .clearfix(); 
  5.  
  6.   @media (min-width: @screen-sm-min) { 
  7.     margin-left:  (@gutter / -2); 
  8.     margin-right: (@gutter / -2); 
  9.   } 
  10.  
  11.   // Negative margin nested rows out to align the content of columns 
  12.   .row { 
  13.     margin-left:  (@gutter / -2); 
  14.     margin-right: (@gutter / -2); 
  15.   } 
  16.  
  17. // Generate the extra small columns 
  18. .make-xs-column(@columns; @gutter: @grid-gutter-width) { 
  19.   positionrelative
  20.   // Prevent columns from collapsing when empty 
  21.   min-height1px
  22.   // Inner gutter via padding 
  23.   padding-left:  (@gutter / 2); 
  24.   padding-right: (@gutter / 2); 
  25.  
  26.   // Calculate width based on number of columns available 
  27.   @media (min-width: @grid-float-breakpoint) { 
  28.     floatleft
  29.     width: percentage((@columns / @grid-columns)); 
  30.   } 
  31.  
  32. // Generate the small columns 
  33. .make-sm-column(@columns; @gutter: @grid-gutter-width) { 
  34.   positionrelative
  35.   // Prevent columns from collapsing when empty 
  36.   min-height1px
  37.   // Inner gutter via padding 
  38.   padding-left:  (@gutter / 2); 
  39.   padding-right: (@gutter / 2); 
  40.  
  41.   // Calculate width based on number of columns available 
  42.   @media (min-width: @screen-sm-min) { 
  43.     floatleft
  44.     width: percentage((@columns / @grid-columns)); 
  45.   } 
  46.  
  47. // Generate the small column offsets 
  48. .make-sm-column-offset(@columns) { 
  49.   @media (min-width: @screen-sm-min) { 
  50.     margin-left: percentage((@columns / @grid-columns)); 
  51.   } 
  52. .make-sm-column-push(@columns) { 
  53.   @media (min-width: @screen-sm-min) { 
  54.     left: percentage((@columns / @grid-columns)); 
  55.   } 
  56. .make-sm-column-pull(@columns) { 
  57.   @media (min-width: @screen-sm-min) { 
  58.     right: percentage((@columns / @grid-columns)); 
  59.   } 
  60.  
  61. // Generate the medium columns 
  62. .make-md-column(@columns; @gutter: @grid-gutter-width) { 
  63.   positionrelative
  64.   // Prevent columns from collapsing when empty 
  65.   min-height1px
  66.   // Inner gutter via padding 
  67.   padding-left:  (@gutter / 2); 
  68.   padding-right: (@gutter / 2); 
  69.  
  70.   // Calculate width based on number of columns available 
  71.   @media (min-width: @screen-md-min) { 
  72.     floatleft
  73.     width: percentage((@columns / @grid-columns)); 
  74.   } 
  75.  
  76. // Generate the medium column offsets 
  77. .make-md-column-offset(@columns) { 
  78.   @media (min-width: @screen-md-min) { 
  79.     margin-left: percentage((@columns / @grid-columns)); 
  80.   } 
  81. .make-md-column-push(@columns) { 
  82.   @media (min-width: @screen-md-min) { 
  83.     left: percentage((@columns / @grid-columns)); 
  84.   } 
  85. .make-md-column-pull(@columns) { 
  86.   @media (min-width: @screen-md-min) { 
  87.     right: percentage((@columns / @grid-columns)); 
  88.   } 
  89.  
  90. // Generate the large columns 
  91. .make-lg-column(@columns; @gutter: @grid-gutter-width) { 
  92.   positionrelative
  93.   // Prevent columns from collapsing when empty 
  94.   min-height1px
  95.   // Inner gutter via padding 
  96.   padding-left:  (@gutter / 2); 
  97.   padding-right: (@gutter / 2); 
  98.  
  99.   // Calculate width based on number of columns available 
  100.   @media (min-width: @screen-lg-min) { 
  101.     floatleft
  102.     width: percentage((@columns / @grid-columns)); 
  103.   } 
  104.  
  105. // Generate the large column offsets 
  106. .make-lg-column-offset(@columns) { 
  107.   @media (min-width: @screen-lg-min) { 
  108.     margin-left: percentage((@columns / @grid-columns)); 
  109.   } 
  110. .make-lg-column-push(@columns) { 
  111.   @media (min-width: @screen-lg-min) { 
  112.     left: percentage((@columns / @grid-columns)); 
  113.   } 
  114. .make-lg-column-pull(@columns) { 
  115.   @media (min-width: @screen-lg-min) { 
  116.     right: percentage((@columns / @grid-columns)); 
  117.   } 

实例展示

你可以重新修改这些变量的值,或者用默认值调用这些 mixin。下面就是一个利用默认设置生成两列布局(列之间有间隔)的案例。

one:

  1. .wrapper {  
  2.   .make-row();  
  3. }  
  4. .content-main {  
  5.   .make-lg-column(8);  
  6. }  
  7. .content-secondary {  
  8.   .make-lg-column(3);  
  9.   .make-lg-column-offset(1);  
  10. }  

two:

  1. <div class="wrapper">  
  2.   <div class="content-main">...</div>  
  3.   <div class="content-secondary">...</div>  
  4. </div> 

 

CTRL + D 收藏本页

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)