Skip to content

B
bootstrap
Commit a4369646 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge pull request #11050 from twbs/restore_grid_mixins 

Restore grid mixins
parents 6351c307 bf73f1f9
Hide whitespace changes
Inline Side-by-side
Showing with 582 additions and 604 deletions
_includes/header.html
View file @ a4369646
......@@ -13,7 +13,7 @@
</title>
<!-- Bootstrap core CSS -->
<link href="{{ page.base_url }}dist/css/bootstrap.css" rel="stylesheet">
<link href="{{ page.base_url }}dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="{{ page.base_url }}docs-assets/css/docs.css" rel="stylesheet">
......
customize.html
View file @ a4369646
......@@ -509,14 +509,11 @@ base_url: "../"
</div>
<div class="row">
<!--
Temporarily removed until mixins are restored in v3.1
<div class="col-xs-6 col-sm-4">
<label>@grid-columns</label>
<input type="text" class="form-control" placeholder="12" data-var="@grid-columns">
<p class="help-block">Number of columns in the grid.</p>
</div>
-->
<div class="col-xs-6 col-sm-4">
<label>@grid-gutter-width</label>
<input type="text" class="form-control" placeholder="30px" data-var="@grid-gutter-width">
......
dist/css/bootstrap.css
View file @ a4369646
......@@ -826,52 +826,52 @@ pre code {
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
position: relative;
min-height: 1px;
......@@ -893,52 +893,196 @@ pre code {
float: left;
}
.col-xs-1 {
width: 8.333333333333332%;
.col-xs-12 {
width: 100%;
}
.col-xs-2 {
width: 16.666666666666664%;
.col-xs-11 {
width: 91.66666666666666%;
}
.col-xs-3 {
width: 25%;
.col-xs-10 {
width: 83.33333333333334%;
}
.col-xs-4 {
width: 33.33333333333333%;
.col-xs-9 {
width: 75%;
}
.col-xs-5 {
width: 41.66666666666667%;
.col-xs-8 {
width: 66.66666666666666%;
}
.col-xs-7 {
width: 58.333333333333336%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-7 {
width: 58.333333333333336%;
.col-xs-5 {
width: 41.66666666666667%;
}
.col-xs-8 {
width: 66.66666666666666%;
.col-xs-4 {
width: 33.33333333333333%;
}
.col-xs-9 {
width: 75%;
.col-xs-3 {
width: 25%;
}
.col-xs-10 {
width: 83.33333333333334%;
.col-xs-2 {
width: 16.666666666666664%;
}
.col-xs-11 {
width: 91.66666666666666%;
.col-xs-1 {
width: 8.333333333333332%;
}
.col-xs-12 {
width: 100%;
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666666666666%;
}
.col-xs-pull-10 {
right: 83.33333333333334%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666666666666%;
}
.col-xs-pull-7 {
right: 58.333333333333336%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666666666667%;
}
.col-xs-pull-4 {
right: 33.33333333333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.666666666666664%;
}
.col-xs-pull-1 {
right: 8.333333333333332%;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666666666666%;
}
.col-xs-push-10 {
left: 83.33333333333334%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666666666666%;
}
.col-xs-push-7 {
left: 58.333333333333336%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666666666667%;
}
.col-xs-push-4 {
left: 33.33333333333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.666666666666664%;
}
.col-xs-push-1 {
left: 8.333333333333332%;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
margin-left: 8.333333333333332%;
}
@media (min-width: 768px) {
......@@ -958,140 +1102,149 @@ pre code {
.col-sm-11 {
float: left;
}
.col-sm-1 {
width: 8.333333333333332%;
}
.col-sm-2 {
width: 16.666666666666664%;
.col-sm-12 {
width: 100%;
}
.col-sm-3 {
width: 25%;
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-4 {
width: 33.33333333333333%;
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-5 {
width: 41.66666666666667%;
.col-sm-9 {
width: 75%;
}
.col-sm-6 {
width: 50%;
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-8 {
width: 66.66666666666666%;
.col-sm-6 {
width: 50%;
}
.col-sm-9 {
width: 75%;
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-10 {
width: 83.33333333333334%;
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-11 {
width: 91.66666666666666%;
.col-sm-3 {
width: 25%;
}
.col-sm-12 {
width: 100%;
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-push-1 {
left: 8.333333333333332%;
.col-sm-1 {
width: 8.333333333333332%;
}
.col-sm-push-2 {
left: 16.666666666666664%;
.col-sm-pull-12 {
right: 100%;
}
.col-sm-push-3 {
left: 25%;
.col-sm-pull-11 {
right: 91.66666666666666%;
}
.col-sm-push-4 {
left: 33.33333333333333%;
.col-sm-pull-10 {
right: 83.33333333333334%;
}
.col-sm-push-5 {
left: 41.66666666666667%;
.col-sm-pull-9 {
right: 75%;
}
.col-sm-push-6 {
left: 50%;
.col-sm-pull-8 {
right: 66.66666666666666%;
}
.col-sm-push-7 {
left: 58.333333333333336%;
.col-sm-pull-7 {
right: 58.333333333333336%;
}
.col-sm-push-8 {
left: 66.66666666666666%;
.col-sm-pull-6 {
right: 50%;
}
.col-sm-push-9 {
left: 75%;
.col-sm-pull-5 {
right: 41.66666666666667%;
}
.col-sm-push-10 {
left: 83.33333333333334%;
.col-sm-pull-4 {
right: 33.33333333333333%;
}
.col-sm-push-11 {
left: 91.66666666666666%;
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.666666666666664%;
}
.col-sm-pull-1 {
right: 8.333333333333332%;
}
.col-sm-pull-2 {
right: 16.666666666666664%;
.col-sm-push-12 {
left: 100%;
}
.col-sm-pull-3 {
right: 25%;
.col-sm-push-11 {
left: 91.66666666666666%;
}
.col-sm-pull-4 {
right: 33.33333333333333%;
.col-sm-push-10 {
left: 83.33333333333334%;
}
.col-sm-pull-5 {
right: 41.66666666666667%;
.col-sm-push-9 {
left: 75%;
}
.col-sm-pull-6 {
right: 50%;
.col-sm-push-8 {
left: 66.66666666666666%;
}
.col-sm-pull-7 {
right: 58.333333333333336%;
.col-sm-push-7 {
left: 58.333333333333336%;
}
.col-sm-pull-8 {
right: 66.66666666666666%;
.col-sm-push-6 {
left: 50%;
}
.col-sm-pull-9 {
right: 75%;
.col-sm-push-5 {
left: 41.66666666666667%;
}
.col-sm-pull-10 {
right: 83.33333333333334%;
.col-sm-push-4 {
left: 33.33333333333333%;
}
.col-sm-pull-11 {
right: 91.66666666666666%;
.col-sm-push-3 {
left: 25%;
}
.col-sm-offset-1 {
margin-left: 8.333333333333332%;
.col-sm-push-2 {
left: 16.666666666666664%;
}
.col-sm-offset-2 {
margin-left: 16.666666666666664%;
.col-sm-push-1 {
left: 8.333333333333332%;
}
.col-sm-offset-3 {
margin-left: 25%;
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-4 {
margin-left: 33.33333333333333%;
.col-sm-offset-11 {
margin-left: 91.66666666666666%;
}
.col-sm-offset-5 {
margin-left: 41.66666666666667%;
.col-sm-offset-10 {
margin-left: 83.33333333333334%;
}
.col-sm-offset-6 {
margin-left: 50%;
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666666666666%;
}
.col-sm-offset-7 {
margin-left: 58.333333333333336%;
}
.col-sm-offset-8 {
margin-left: 66.66666666666666%;
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-9 {
margin-left: 75%;
.col-sm-offset-5 {
margin-left: 41.66666666666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333333334%;
.col-sm-offset-4 {
margin-left: 33.33333333333333%;
}
.col-sm-offset-11 {
margin-left: 91.66666666666666%;
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.666666666666664%;
}
.col-sm-offset-1 {
margin-left: 8.333333333333332%;
}
}
......@@ -1112,149 +1265,149 @@ pre code {
.col-md-11 {
float: left;
}
.col-md-1 {
width: 8.333333333333332%;
}
.col-md-2 {
width: 16.666666666666664%;
.col-md-12 {
width: 100%;
}
.col-md-3 {
width: 25%;
.col-md-11 {
width: 91.66666666666666%;
}
.col-md-4 {
width: 33.33333333333333%;
.col-md-10 {
width: 83.33333333333334%;
}
.col-md-5 {
width: 41.66666666666667%;
.col-md-9 {
width: 75%;
}
.col-md-6 {
width: 50%;
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-7 {
width: 58.333333333333336%;
}
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-9 {
width: 75%;
.col-md-6 {
width: 50%;
}
.col-md-10 {
width: 83.33333333333334%;
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-11 {
width: 91.66666666666666%;
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-12 {
width: 100%;
.col-md-3 {
width: 25%;
}
.col-md-push-0 {
left: auto;
.col-md-2 {
width: 16.666666666666664%;
}
.col-md-push-1 {
left: 8.333333333333332%;
.col-md-1 {
width: 8.333333333333332%;
}
.col-md-push-2 {
left: 16.666666666666664%;
.col-md-pull-12 {
right: 100%;
}
.col-md-push-3 {
left: 25%;
.col-md-pull-11 {
right: 91.66666666666666%;
}
.col-md-push-4 {
left: 33.33333333333333%;
.col-md-pull-10 {
right: 83.33333333333334%;
}
.col-md-push-5 {
left: 41.66666666666667%;
.col-md-pull-9 {
right: 75%;
}
.col-md-push-6 {
left: 50%;
.col-md-pull-8 {
right: 66.66666666666666%;
}
.col-md-push-7 {
left: 58.333333333333336%;
.col-md-pull-7 {
right: 58.333333333333336%;
}
.col-md-push-8 {
left: 66.66666666666666%;
.col-md-pull-6 {
right: 50%;
}
.col-md-push-9 {
left: 75%;
.col-md-pull-5 {
right: 41.66666666666667%;
}
.col-md-push-10 {
left: 83.33333333333334%;
.col-md-pull-4 {
right: 33.33333333333333%;
}
.col-md-push-11 {
left: 91.66666666666666%;
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-0 {
right: auto;
.col-md-pull-2 {
right: 16.666666666666664%;
}
.col-md-pull-1 {
right: 8.333333333333332%;
}
.col-md-pull-2 {
right: 16.666666666666664%;
.col-md-push-12 {
left: 100%;
}
.col-md-pull-3 {
right: 25%;
.col-md-push-11 {
left: 91.66666666666666%;
}
.col-md-pull-4 {
right: 33.33333333333333%;
.col-md-push-10 {
left: 83.33333333333334%;
}
.col-md-pull-5 {
right: 41.66666666666667%;
.col-md-push-9 {
left: 75%;
}
.col-md-pull-6 {
right: 50%;
.col-md-push-8 {
left: 66.66666666666666%;
}
.col-md-pull-7 {
right: 58.333333333333336%;
.col-md-push-7 {
left: 58.333333333333336%;
}
.col-md-pull-8 {
right: 66.66666666666666%;
.col-md-push-6 {
left: 50%;
}
.col-md-pull-9 {
right: 75%;
.col-md-push-5 {
left: 41.66666666666667%;
}
.col-md-pull-10 {
right: 83.33333333333334%;
.col-md-push-4 {
left: 33.33333333333333%;
}
.col-md-pull-11 {
right: 91.66666666666666%;
.col-md-push-3 {
left: 25%;
}
.col-md-offset-0 {
margin-left: 0;
.col-md-push-2 {
left: 16.666666666666664%;
}
.col-md-offset-1 {
margin-left: 8.333333333333332%;
.col-md-push-1 {
left: 8.333333333333332%;
}
.col-md-offset-2 {
margin-left: 16.666666666666664%;
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-3 {
margin-left: 25%;
.col-md-offset-11 {
margin-left: 91.66666666666666%;
}
.col-md-offset-4 {
margin-left: 33.33333333333333%;
.col-md-offset-10 {
margin-left: 83.33333333333334%;
}
.col-md-offset-5 {
margin-left: 41.66666666666667%;
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-6 {
margin-left: 50%;
.col-md-offset-8 {
margin-left: 66.66666666666666%;
}
.col-md-offset-7 {
margin-left: 58.333333333333336%;
}
.col-md-offset-8 {
margin-left: 66.66666666666666%;
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-9 {
margin-left: 75%;
.col-md-offset-5 {
margin-left: 41.66666666666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333333334%;
.col-md-offset-4 {
margin-left: 33.33333333333333%;
}
.col-md-offset-11 {
margin-left: 91.66666666666666%;
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.666666666666664%;
}
.col-md-offset-1 {
margin-left: 8.333333333333332%;
}
}
......@@ -1275,149 +1428,149 @@ pre code {
.col-lg-11 {
float: left;
}
.col-lg-1 {
width: 8.333333333333332%;
}
.col-lg-2 {
width: 16.666666666666664%;
.col-lg-12 {
width: 100%;
}
.col-lg-3 {
width: 25%;
.col-lg-11 {
width: 91.66666666666666%;
}
.col-lg-4 {
width: 33.33333333333333%;
.col-lg-10 {
width: 83.33333333333334%;
}
.col-lg-5 {
width: 41.66666666666667%;
.col-lg-9 {
width: 75%;
}
.col-lg-6 {
width: 50%;
.col-lg-8 {
width: 66.66666666666666%;
}
.col-lg-7 {
width: 58.333333333333336%;
}
.col-lg-8 {
width: 66.66666666666666%;
}
.col-lg-9 {
width: 75%;
.col-lg-6 {
width: 50%;
}
.col-lg-10 {
width: 83.33333333333334%;
.col-lg-5 {
width: 41.66666666666667%;
}
.col-lg-11 {
width: 91.66666666666666%;
.col-lg-4 {
width: 33.33333333333333%;
}
.col-lg-12 {
width: 100%;
.col-lg-3 {
width: 25%;
}
.col-lg-push-0 {
left: auto;
.col-lg-2 {
width: 16.666666666666664%;
}
.col-lg-push-1 {
left: 8.333333333333332%;
.col-lg-1 {
width: 8.333333333333332%;
}
.col-lg-push-2 {
left: 16.666666666666664%;
.col-lg-pull-12 {
right: 100%;
}
.col-lg-push-3 {
left: 25%;
.col-lg-pull-11 {
right: 91.66666666666666%;
}
.col-lg-push-4 {
left: 33.33333333333333%;
.col-lg-pull-10 {
right: 83.33333333333334%;
}
.col-lg-push-5 {
left: 41.66666666666667%;
.col-lg-pull-9 {
right: 75%;
}
.col-lg-push-6 {
left: 50%;
.col-lg-pull-8 {
right: 66.66666666666666%;
}
.col-lg-push-7 {
left: 58.333333333333336%;
.col-lg-pull-7 {
right: 58.333333333333336%;
}
.col-lg-push-8 {
left: 66.66666666666666%;
.col-lg-pull-6 {
right: 50%;
}
.col-lg-push-9 {
left: 75%;
.col-lg-pull-5 {
right: 41.66666666666667%;
}
.col-lg-push-10 {
left: 83.33333333333334%;
.col-lg-pull-4 {
right: 33.33333333333333%;
}
.col-lg-push-11 {
left: 91.66666666666666%;
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-0 {
right: auto;
.col-lg-pull-2 {
right: 16.666666666666664%;
}
.col-lg-pull-1 {
right: 8.333333333333332%;
}
.col-lg-pull-2 {
right: 16.666666666666664%;
.col-lg-push-12 {
left: 100%;
}
.col-lg-pull-3 {
right: 25%;
.col-lg-push-11 {
left: 91.66666666666666%;
}
.col-lg-pull-4 {
right: 33.33333333333333%;
.col-lg-push-10 {
left: 83.33333333333334%;
}
.col-lg-pull-5 {
right: 41.66666666666667%;
.col-lg-push-9 {
left: 75%;
}
.col-lg-pull-6 {
right: 50%;
.col-lg-push-8 {
left: 66.66666666666666%;
}
.col-lg-pull-7 {
right: 58.333333333333336%;
.col-lg-push-7 {
left: 58.333333333333336%;
}
.col-lg-pull-8 {
right: 66.66666666666666%;
.col-lg-push-6 {
left: 50%;
}
.col-lg-pull-9 {
right: 75%;
.col-lg-push-5 {
left: 41.66666666666667%;
}
.col-lg-pull-10 {
right: 83.33333333333334%;
.col-lg-push-4 {
left: 33.33333333333333%;
}
.col-lg-pull-11 {
right: 91.66666666666666%;
.col-lg-push-3 {
left: 25%;
}
.col-lg-offset-0 {
margin-left: 0;
.col-lg-push-2 {
left: 16.666666666666664%;
}
.col-lg-offset-1 {
margin-left: 8.333333333333332%;
.col-lg-push-1 {
left: 8.333333333333332%;
}
.col-lg-offset-2 {
margin-left: 16.666666666666664%;
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-3 {
margin-left: 25%;
.col-lg-offset-11 {
margin-left: 91.66666666666666%;
}
.col-lg-offset-4 {
margin-left: 33.33333333333333%;
.col-lg-offset-10 {
margin-left: 83.33333333333334%;
}
.col-lg-offset-5 {
margin-left: 41.66666666666667%;
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-6 {
margin-left: 50%;
.col-lg-offset-8 {
margin-left: 66.66666666666666%;
}
.col-lg-offset-7 {
margin-left: 58.333333333333336%;
}
.col-lg-offset-8 {
margin-left: 66.66666666666666%;
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-9 {
margin-left: 75%;
.col-lg-offset-5 {
margin-left: 41.66666666666667%;
}
.col-lg-offset-10 {
margin-left: 83.33333333333334%;
.col-lg-offset-4 {
margin-left: 33.33333333333333%;
}
.col-lg-offset-11 {
margin-left: 91.66666666666666%;
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.666666666666664%;
}
.col-lg-offset-1 {
margin-left: 8.333333333333332%;
}
}
......
dist/css/bootstrap.min.css
View file @ a4369646
This source diff could not be displayed because it is too large. You can view the blob instead.
docs-assets/css/docs.css
View file @ a4369646
......@@ -400,6 +400,12 @@ body {
.bs-docs-home .bs-masthead-links {
margin-left: 350px;
}
.bs-docs-home .bs-social {
margin-bottom: 10px;
}
.bs-docs-home .bs-masthead-links {
margin-top: 10px;
}
}
@media (min-width: 992px) {
.bs-docs-home .carbonad {
......
less/grid.less
View file @ a4369646
......@@ -2,7 +2,6 @@
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
......@@ -14,61 +13,7 @@
}
// Common styles for small and large grid columns
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
.make-grid-columns();
// Extra small grid
......@@ -79,31 +24,11 @@
// Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
// it's full-width.
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
float: left;
}
.col-xs-1 { width: percentage((1 / @grid-columns)); }
.col-xs-2 { width: percentage((2 / @grid-columns)); }
.col-xs-3 { width: percentage((3 / @grid-columns)); }
.col-xs-4 { width: percentage((4 / @grid-columns)); }
.col-xs-5 { width: percentage((5 / @grid-columns)); }
.col-xs-6 { width: percentage((6 / @grid-columns)); }
.col-xs-7 { width: percentage((7 / @grid-columns)); }
.col-xs-8 { width: percentage((8 / @grid-columns)); }
.col-xs-9 { width: percentage((9 / @grid-columns)); }
.col-xs-10 { width: percentage((10/ @grid-columns)); }
.col-xs-11 { width: percentage((11/ @grid-columns)); }
.col-xs-12 { width: 100%; }
.make-grid-columns-float(xs);
.make-grid(@grid-columns, xs, width);
.make-grid(@grid-columns, xs, pull);
.make-grid(@grid-columns, xs, push);
.make-grid(@grid-columns, xs, offset);
// Small grid
......@@ -119,69 +44,11 @@
width: @container-sm;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11 {
float: left;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Push and pull columns for source order changes
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
.col-sm-push-3 { left: percentage((3 / @grid-columns)); }
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
.col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
.col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
.make-grid-columns-float(sm);
.make-grid(@grid-columns, sm, width);
.make-grid(@grid-columns, sm, pull);
.make-grid(@grid-columns, sm, push);
.make-grid(@grid-columns, sm, offset);
}
......@@ -196,72 +63,12 @@
.container {
width: @container-md;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
}
.col-md-1 { width: percentage((1 / @grid-columns)); }
.col-md-2 { width: percentage((2 / @grid-columns)); }
.col-md-3 { width: percentage((3 / @grid-columns)); }
.col-md-4 { width: percentage((4 / @grid-columns)); }
.col-md-5 { width: percentage((5 / @grid-columns)); }
.col-md-6 { width: percentage((6 / @grid-columns)); }
.col-md-7 { width: percentage((7 / @grid-columns)); }
.col-md-8 { width: percentage((8 / @grid-columns)); }
.col-md-9 { width: percentage((9 / @grid-columns)); }
.col-md-10 { width: percentage((10/ @grid-columns)); }
.col-md-11 { width: percentage((11/ @grid-columns)); }
.col-md-12 { width: 100%; }
// Push and pull columns for source order changes
.col-md-push-0 { left: auto; }
.col-md-push-1 { left: percentage((1 / @grid-columns)); }
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
.col-md-pull-0 { right: auto; }
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
.col-md-pull-4 { right: percentage((4 / @grid-columns)); }
.col-md-pull-5 { right: percentage((5 / @grid-columns)); }
.col-md-pull-6 { right: percentage((6 / @grid-columns)); }
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
.col-md-pull-8 { right: percentage((8 / @grid-columns)); }
.col-md-pull-9 { right: percentage((9 / @grid-columns)); }
.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-md-offset-0 { margin-left: 0; }
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
.make-grid-columns-float(md);
.make-grid(@grid-columns, md, width);
.make-grid(@grid-columns, md, pull);
.make-grid(@grid-columns, md, push);
.make-grid(@grid-columns, md, offset);
}
......@@ -277,70 +84,10 @@
width: @container-lg;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11 {
float: left;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
.col-lg-4 { width: percentage((4 / @grid-columns)); }
.col-lg-5 { width: percentage((5 / @grid-columns)); }
.col-lg-6 { width: percentage((6 / @grid-columns)); }
.col-lg-7 { width: percentage((7 / @grid-columns)); }
.col-lg-8 { width: percentage((8 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Push and pull columns for source order changes
.col-lg-push-0 { left: auto; }
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
.col-lg-pull-0 { right: auto; }
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-lg-offset-0 { margin-left: 0; }
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
.make-grid-columns-float(lg);
.make-grid(@grid-columns, lg, width);
.make-grid(@grid-columns, lg, pull);
.make-grid(@grid-columns, lg, push);
.make-grid(@grid-columns, lg, offset);
}
less/mixins.less
View file @ a4369646
......@@ -565,6 +565,7 @@
td& { display: none !important; }
}
// Grid System
// -----------
......@@ -696,6 +697,80 @@
}
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index + 1, @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index + 1, ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.make-grid-columns-float(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col(@index + 1, @item);
}
.col(@index, @list) when (@index < @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col(@index + 1, ~"@{list}, @{item}");
}
.col(@index, @list) when (@index = @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid(@index, @class, @type) when (@type = width) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = push) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = pull) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.make-grid(@index, @class, @type) when (@index > 0) {
.calc-grid(@index, @class, @type);
// next iteration
.make-grid(@index - 1, @class, @type);
}
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment