Add small grid for phones and tablets
This commit is contained in:
parent
610eb8fb78
commit
eadfa59d92
|
@ -18,6 +18,7 @@
|
||||||
<li><a href="#grid-offsetting">Offset columns</a></li>
|
<li><a href="#grid-offsetting">Offset columns</a></li>
|
||||||
<li><a href="#grid-nesting">Nested columns</a></li>
|
<li><a href="#grid-nesting">Nested columns</a></li>
|
||||||
<li><a href="#grid-column-ordering">Column ordering</a></li>
|
<li><a href="#grid-column-ordering">Column ordering</a></li>
|
||||||
|
<li><a href="#grid-small">Small device grid</a></li>
|
||||||
<li><a href="#grid-less">LESS mixins and variables</a></li>
|
<li><a href="#grid-less">LESS mixins and variables</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -782,13 +782,66 @@ pre code {
|
||||||
margin-left: -15px;
|
margin-left: -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="col-span-"] {
|
[class*="col-span-"],
|
||||||
|
[class*="col-small-"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="col-small-"] {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-12 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-11 {
|
||||||
|
width: 91.66666666666666%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-10 {
|
||||||
|
width: 83.33333333333334%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-9 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-8 {
|
||||||
|
width: 66.66666666666666%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-7 {
|
||||||
|
width: 58.333333333333336%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-6 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-5 {
|
||||||
|
width: 41.66666666666667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-4 {
|
||||||
|
width: 33.33333333333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-3 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-2 {
|
||||||
|
width: 16.666666666666664%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-small-span-1 {
|
||||||
|
width: 8.333333333333332%;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 728px;
|
max-width: 728px;
|
||||||
|
@ -5161,6 +5214,8 @@ a.list-group-item.active > .badge,
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
.carousel-caption {
|
.carousel-caption {
|
||||||
|
right: 20%;
|
||||||
|
left: 20%;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -321,6 +321,8 @@ title: Bootstrap Documentation
|
||||||
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
|
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Grid system
|
<!-- Grid system
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="bs-docs-section" id="grid">
|
<div class="bs-docs-section" id="grid">
|
||||||
|
@ -438,16 +440,31 @@ title: Bootstrap Documentation
|
||||||
|
|
||||||
<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>.push*</code> and <code>.pull*</code> modifier classes.</p>
|
<p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="col-span-9 col-push-3">9</div>
|
<div class="col-span-9 col-push-3">9</div>
|
||||||
<div class="col-span-3 col-pull-9">3</div>
|
<div class="col-span-3 col-pull-9">3</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html linenos %}
|
{% highlight html linenos %}
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="col-span-9 col-push-3">9</div>
|
<div class="col-span-9 col-push-3">9</div>
|
||||||
<div class="col-span-3 col-pull-9">3</div>
|
<div class="col-span-3 col-pull-9">3</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="grid-small">Small device grid</h3>
|
||||||
|
<p>Use the small device grid classes, like <code>.col-small-span-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
|
||||||
|
<div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
|
||||||
|
<div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
|
||||||
|
</div>
|
||||||
|
{% highlight html linenos %}
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
|
||||||
|
<div class="col-span-4 col-small-span-6">4 cols, 6 small cols</div>
|
||||||
|
<div class="col-span-4 col-small-span-12">4 cols, 12 small cols</div>
|
||||||
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3 id="grid-less">LESS mixins and variables</h3>
|
<h3 id="grid-less">LESS mixins and variables</h3>
|
||||||
|
|
|
@ -12,20 +12,28 @@
|
||||||
.row {
|
.row {
|
||||||
.make-row();
|
.make-row();
|
||||||
}
|
}
|
||||||
[class*="col-span-"] {
|
[class*="col-span-"],
|
||||||
|
[class*="col-small-"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
padding-left: (@grid-gutter-width / 2);
|
padding-left: (@grid-gutter-width / 2);
|
||||||
padding-right: (@grid-gutter-width / 2);
|
padding-right: (@grid-gutter-width / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="col-small-"] {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.generate-small-grid-columns(@grid-columns);
|
||||||
|
|
||||||
// Responsive: Tablets and up
|
// Responsive: Tablets and up
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.container {
|
.container {
|
||||||
max-width: 728px;
|
max-width: 728px;
|
||||||
}
|
}
|
||||||
// Generate the grid columns and offsets
|
// Generate the grid columns and offsets
|
||||||
[class*="col-span-"] { float: left; }
|
[class*="col-span-"] {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
.generate-grid-columns(@grid-columns);
|
.generate-grid-columns(@grid-columns);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -501,6 +501,24 @@
|
||||||
.col-pull-X(@grid-columns);
|
.col-pull-X(@grid-columns);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Small device grid
|
||||||
|
.generate-small-grid-columns(@grid-columns) {
|
||||||
|
|
||||||
|
// Deterimine the classes
|
||||||
|
.col-small-span-X (@index) when (@index > 0) {
|
||||||
|
.col-small-span-@{index} { .col-small-span-(@index); }
|
||||||
|
.col-small-span-X((@index - 1));
|
||||||
|
}
|
||||||
|
.col-small-span-X(0) {}
|
||||||
|
|
||||||
|
// Specify widths
|
||||||
|
.col-small-span-(@columns) {
|
||||||
|
width: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate the CSS
|
||||||
|
.col-small-span-X(@grid-columns);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Framework mixins
|
// Framework mixins
|
||||||
|
|
Loading…
Reference in New Issue