rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-02 14:24:19 +01:00
Code Issues Actions Packages Releases Activity

Added classes for lg-pull, lg-push, lg-offset, sm-pull, sm-push, sm-offset

Browse Source
This commit is contained in:
Jeff Tickle 2013-08-01 11:49:16 -04:00
parent 7a3c61ee33
commit 1583dd55e9
5 changed files with 219 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css.html
View File

@ -299,31 +299,31 @@ base_url: "../"
</div> </div>
<h3 id="grid-offsetting">Offsetting columns</h3> <h3 id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p> <p>Move columns to the right using <code>.col-lg-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-lg-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col-lg-4 col-offset-4">4 offset 4</div> <div class="col-lg-4 col-lg-offset-4">4 offset 4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
<div class="col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="col-lg-6 col-offset-3">6 offset 3</div> <div class="col-lg-6 col-lg-offset-3">6 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-lg-4">...</div> <div class="col-lg-4">...</div>
<div class="col-lg-4 col-offset-4">...</div> <div class="col-lg-4 col-lg-offset-4">...</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
<div class="col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-lg-offset-3">3 offset 3</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6 col-offset-3">...</div> <div class="col-lg-6 col-lg-offset-3">...</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -360,16 +360,16 @@ base_url: "../"
{% endhighlight %} {% endhighlight %}
<h3 id="grid-column-ordering">Column ordering</h3> <h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p> <p>Easily change the order of our built-in grid columns with <code>.col-lg-push-*</code> and <code>.col-lg-pull-*</code> modifier classes.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-lg-9 col-push-3">9</div> <div class="col-lg-9 col-lg-push-3">9</div>
<div class="col-lg-3 col-pull-9">3</div> <div class="col-lg-3 col-lg-pull-9">3</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-lg-9 col-push-3">9</div> <div class="col-lg-9 col-lg-push-3">9</div>
<div class="col-lg-3 col-pull-9">3</div> <div class="col-lg-3 col-lg-pull-9">3</div>
</div> </div>
{% endhighlight %} {% endhighlight %}

165
dist/css/bootstrap.css vendored
View File

@ -931,72 +931,105 @@ pre code {
.col-sm-12 { .col-sm-12 {
width: 100%; width: 100%;
} }
.col-push-1 { .col-sm-push-1 {
left: 8.333333333333332%; left: 8.333333333333332%;
} }
.col-push-2 { .col-sm-push-2 {
left: 16.666666666666664%; left: 16.666666666666664%;
} }
.col-push-3 { .col-sm-push-3 {
left: 25%; left: 25%;
} }
.col-push-4 { .col-sm-push-4 {
left: 33.33333333333333%; left: 33.33333333333333%;
} }
.col-push-5 { .col-sm-push-5 {
left: 41.66666666666667%; left: 41.66666666666667%;
} }
.col-push-6 { .col-sm-push-6 {
left: 50%; left: 50%;
} }
.col-push-7 { .col-sm-push-7 {
left: 58.333333333333336%; left: 58.333333333333336%;
} }
.col-push-8 { .col-sm-push-8 {
left: 66.66666666666666%; left: 66.66666666666666%;
} }
.col-push-9 { .col-sm-push-9 {
left: 75%; left: 75%;
} }
.col-push-10 { .col-sm-push-10 {
left: 83.33333333333334%; left: 83.33333333333334%;
} }
.col-push-11 { .col-sm-push-11 {
left: 91.66666666666666%; left: 91.66666666666666%;
} }
.col-pull-1 { .col-sm-pull-1 {
right: 8.333333333333332%; right: 8.333333333333332%;
} }
.col-pull-2 { .col-sm-pull-2 {
right: 16.666666666666664%; right: 16.666666666666664%;
} }
.col-pull-3 { .col-sm-pull-3 {
right: 25%; right: 25%;
} }
.col-pull-4 { .col-sm-pull-4 {
right: 33.33333333333333%; right: 33.33333333333333%;
} }
.col-pull-5 { .col-sm-pull-5 {
right: 41.66666666666667%; right: 41.66666666666667%;
} }
.col-pull-6 { .col-sm-pull-6 {
right: 50%; right: 50%;
} }
.col-pull-7 { .col-sm-pull-7 {
right: 58.333333333333336%; right: 58.333333333333336%;
} }
.col-pull-8 { .col-sm-pull-8 {
right: 66.66666666666666%; right: 66.66666666666666%;
} }
.col-pull-9 { .col-sm-pull-9 {
right: 75%; right: 75%;
} }
.col-pull-10 { .col-sm-pull-10 {
right: 83.33333333333334%; right: 83.33333333333334%;
} }
.col-pull-11 { .col-sm-pull-11 {
right: 91.66666666666666%; right: 91.66666666666666%;
} }
.col-sm-offset-1 {
margin-left: 8.333333333333332%;
}
.col-sm-offset-2 {
margin-left: 16.666666666666664%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-4 {
margin-left: 33.33333333333333%;
}
.col-sm-offset-5 {
margin-left: 41.66666666666667%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-7 {
margin-left: 58.333333333333336%;
}
.col-sm-offset-8 {
margin-left: 66.66666666666666%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-10 {
margin-left: 83.33333333333334%;
}
.col-sm-offset-11 {
margin-left: 91.66666666666666%;
}
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@ -1053,37 +1086,103 @@ pre code {
.col-lg-12 { .col-lg-12 {
width: 100%; width: 100%;
} }
.col-offset-1 { .col-lg-push-1 {
left: 8.333333333333332%;
}
.col-lg-push-2 {
left: 16.666666666666664%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-4 {
left: 33.33333333333333%;
}
.col-lg-push-5 {
left: 41.66666666666667%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-7 {
left: 58.333333333333336%;
}
.col-lg-push-8 {
left: 66.66666666666666%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-10 {
left: 83.33333333333334%;
}
.col-lg-push-11 {
left: 91.66666666666666%;
}
.col-lg-pull-1 {
right: 8.333333333333332%;
}
.col-lg-pull-2 {
right: 16.666666666666664%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-4 {
right: 33.33333333333333%;
}
.col-lg-pull-5 {
right: 41.66666666666667%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-7 {
right: 58.333333333333336%;
}
.col-lg-pull-8 {
right: 66.66666666666666%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-10 {
right: 83.33333333333334%;
}
.col-lg-pull-11 {
right: 91.66666666666666%;
}
.col-lg-offset-1 {
margin-left: 8.333333333333332%; margin-left: 8.333333333333332%;
} }
.col-offset-2 { .col-lg-offset-2 {
margin-left: 16.666666666666664%; margin-left: 16.666666666666664%;
} }
.col-offset-3 { .col-lg-offset-3 {
margin-left: 25%; margin-left: 25%;
} }
.col-offset-4 { .col-lg-offset-4 {
margin-left: 33.33333333333333%; margin-left: 33.33333333333333%;
} }
.col-offset-5 { .col-lg-offset-5 {
margin-left: 41.66666666666667%; margin-left: 41.66666666666667%;
} }
.col-offset-6 { .col-lg-offset-6 {
margin-left: 50%; margin-left: 50%;
} }
.col-offset-7 { .col-lg-offset-7 {
margin-left: 58.333333333333336%; margin-left: 58.333333333333336%;
} }
.col-offset-8 { .col-lg-offset-8 {
margin-left: 66.66666666666666%; margin-left: 66.66666666666666%;
} }
.col-offset-9 { .col-lg-offset-9 {
margin-left: 75%; margin-left: 75%;
} }
.col-offset-10 { .col-lg-offset-10 {
margin-left: 83.33333333333334%; margin-left: 83.33333333333334%;
} }
.col-offset-11 { .col-lg-offset-11 {
margin-left: 91.66666666666666%; margin-left: 91.66666666666666%;
} }
} }

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

104
less/grid.less
View File

@ -125,29 +125,42 @@
.col-sm-12 { width: 100%; } .col-sm-12 { width: 100%; }
// Push and pull columns for source order changes // Push and pull columns for source order changes
.col-push-1 { left: percentage((1 / @grid-columns)); } .col-sm-push-1 { left: percentage((1 / @grid-columns)); }
.col-push-2 { left: percentage((2 / @grid-columns)); } .col-sm-push-2 { left: percentage((2 / @grid-columns)); }
.col-push-3 { left: percentage((3 / @grid-columns)); } .col-sm-push-3 { left: percentage((3 / @grid-columns)); }
.col-push-4 { left: percentage((4 / @grid-columns)); } .col-sm-push-4 { left: percentage((4 / @grid-columns)); }
.col-push-5 { left: percentage((5 / @grid-columns)); } .col-sm-push-5 { left: percentage((5 / @grid-columns)); }
.col-push-6 { left: percentage((6 / @grid-columns)); } .col-sm-push-6 { left: percentage((6 / @grid-columns)); }
.col-push-7 { left: percentage((7 / @grid-columns)); } .col-sm-push-7 { left: percentage((7 / @grid-columns)); }
.col-push-8 { left: percentage((8 / @grid-columns)); } .col-sm-push-8 { left: percentage((8 / @grid-columns)); }
.col-push-9 { left: percentage((9 / @grid-columns)); } .col-sm-push-9 { left: percentage((9 / @grid-columns)); }
.col-push-10 { left: percentage((10/ @grid-columns)); } .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
.col-push-11 { left: percentage((11/ @grid-columns)); } .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
.col-pull-1 { right: percentage((1 / @grid-columns)); } .col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
.col-pull-2 { right: percentage((2 / @grid-columns)); } .col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
.col-pull-3 { right: percentage((3 / @grid-columns)); } .col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
.col-pull-4 { right: percentage((4 / @grid-columns)); } .col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
.col-pull-5 { right: percentage((5 / @grid-columns)); } .col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
.col-pull-6 { right: percentage((6 / @grid-columns)); } .col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
.col-pull-7 { right: percentage((7 / @grid-columns)); } .col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
.col-pull-8 { right: percentage((8 / @grid-columns)); } .col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
.col-pull-9 { right: percentage((9 / @grid-columns)); } .col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
.col-pull-10 { right: percentage((10/ @grid-columns)); } .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
.col-pull-11 { right: percentage((11/ @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)); }
} }
// Medium and large device columns (desktop and up) // Medium and large device columns (desktop and up)
@ -182,18 +195,43 @@
.col-lg-11 { width: percentage((11/ @grid-columns)); } .col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; } .col-lg-12 { width: 100%; }
// Push and pull columns for source order changes
.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-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 // Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); } .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); } .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); } .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); } .col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); } .col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); } .col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); } .col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); } .col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); } .col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); } .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); } .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
} }
// Large desktops and up // Large desktops and up