mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Overhaul the grid system and its docs
* Add new grid mixins adapted from Preboot (http://github.com/mdo/preboot) * Drop the @grid-row-width and @grid-column-width variables * Add the @grid-float-breakpoint variable, as used in Preboot * Add support for .push* and .pull* classes for column ordering manipulation * Document all the things
This commit is contained in:
Mark Otto
parent
145eb054d9
commit
bb38fa5286
89
docs/assets/css/bootstrap.css
vendored
89
docs/assets/css/bootstrap.css
vendored
@ -741,8 +741,8 @@ pre code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
margin-right: -10px;
|
margin-right: -15px;
|
||||||
margin-left: -10px;
|
margin-left: -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row:before,
|
.row:before,
|
||||||
@ -756,9 +756,10 @@ pre code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
[class^="span"] {
|
[class^="span"] {
|
||||||
|
position: relative;
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
padding-right: 10px;
|
padding-right: 15px;
|
||||||
padding-left: 10px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
@ -840,6 +841,78 @@ pre code {
|
|||||||
.offset1 {
|
.offset1 {
|
||||||
margin-left: 8.333333333333332%;
|
margin-left: 8.333333333333332%;
|
||||||
}
|
}
|
||||||
|
.push12 {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
.push11 {
|
||||||
|
left: 91.66666666666666%;
|
||||||
|
}
|
||||||
|
.push10 {
|
||||||
|
left: 83.33333333333334%;
|
||||||
|
}
|
||||||
|
.push9 {
|
||||||
|
left: 75%;
|
||||||
|
}
|
||||||
|
.push8 {
|
||||||
|
left: 66.66666666666666%;
|
||||||
|
}
|
||||||
|
.push7 {
|
||||||
|
left: 58.333333333333336%;
|
||||||
|
}
|
||||||
|
.push6 {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
.push5 {
|
||||||
|
left: 41.66666666666667%;
|
||||||
|
}
|
||||||
|
.push4 {
|
||||||
|
left: 33.33333333333333%;
|
||||||
|
}
|
||||||
|
.push3 {
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
.push2 {
|
||||||
|
left: 16.666666666666664%;
|
||||||
|
}
|
||||||
|
.push1 {
|
||||||
|
left: 8.333333333333332%;
|
||||||
|
}
|
||||||
|
.pull12 {
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
.pull11 {
|
||||||
|
right: 91.66666666666666%;
|
||||||
|
}
|
||||||
|
.pull10 {
|
||||||
|
right: 83.33333333333334%;
|
||||||
|
}
|
||||||
|
.pull9 {
|
||||||
|
right: 75%;
|
||||||
|
}
|
||||||
|
.pull8 {
|
||||||
|
right: 66.66666666666666%;
|
||||||
|
}
|
||||||
|
.pull7 {
|
||||||
|
right: 58.333333333333336%;
|
||||||
|
}
|
||||||
|
.pull6 {
|
||||||
|
right: 50%;
|
||||||
|
}
|
||||||
|
.pull5 {
|
||||||
|
right: 41.66666666666667%;
|
||||||
|
}
|
||||||
|
.pull4 {
|
||||||
|
right: 33.33333333333333%;
|
||||||
|
}
|
||||||
|
.pull3 {
|
||||||
|
right: 25%;
|
||||||
|
}
|
||||||
|
.pull2 {
|
||||||
|
right: 16.666666666666664%;
|
||||||
|
}
|
||||||
|
.pull1 {
|
||||||
|
right: 8.333333333333332%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 992px) {
|
@media screen and (min-width: 992px) {
|
||||||
@ -852,14 +925,6 @@ pre code {
|
|||||||
.container {
|
.container {
|
||||||
max-width: 1170px;
|
max-width: 1170px;
|
||||||
}
|
}
|
||||||
.row {
|
|
||||||
margin-right: -15px;
|
|
||||||
margin-left: -15px;
|
|
||||||
}
|
|
||||||
[class^="span"] {
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="span"].pull-right {
|
[class*="span"].pull-right {
|
||||||
|
|||||||
@ -23,7 +23,7 @@ title: CSS
|
|||||||
<li><a href="#global"><i class="glyphicon glyphicon-chevron-right"></i> Global settings</a></li>
|
<li><a href="#global"><i class="glyphicon glyphicon-chevron-right"></i> Global settings</a></li>
|
||||||
<li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
|
<li><a href="#typography"><i class="glyphicon glyphicon-chevron-right"></i> Typography</a></li>
|
||||||
<li><a href="#code"><i class="glyphicon glyphicon-chevron-right"></i> Code</a></li>
|
<li><a href="#code"><i class="glyphicon glyphicon-chevron-right"></i> Code</a></li>
|
||||||
<li><a href="#grid-system"><i class="glyphicon glyphicon-chevron-right"></i> Grid system</a></li>
|
<li><a href="#grid"><i class="glyphicon glyphicon-chevron-right"></i> Grid system</a></li>
|
||||||
<li><a href="#tables"><i class="glyphicon glyphicon-chevron-right"></i> Tables</a></li>
|
<li><a href="#tables"><i class="glyphicon glyphicon-chevron-right"></i> Tables</a></li>
|
||||||
<li><a href="#forms"><i class="glyphicon glyphicon-chevron-right"></i> Forms</a></li>
|
<li><a href="#forms"><i class="glyphicon glyphicon-chevron-right"></i> Forms</a></li>
|
||||||
<li><a href="#buttons"><i class="glyphicon glyphicon-chevron-right"></i> Buttons</a></li>
|
<li><a href="#buttons"><i class="glyphicon glyphicon-chevron-right"></i> Buttons</a></li>
|
||||||
@ -468,13 +468,13 @@ title: CSS
|
|||||||
|
|
||||||
<!-- Grid system
|
<!-- Grid system
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<section id="grid-system">
|
<section id="grid">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>Grid system</h1>
|
<h1>Grid system</h1>
|
||||||
</div>
|
</div>
|
||||||
<p class="lead">Bootstrap utilizes a responsive, percent-based grid system, that scales up appropriately as devices and viewport sizes increase. In other words, it's mobile first.</p>
|
<p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p>
|
||||||
|
|
||||||
<h3>Grid example</h3>
|
<h3 id="grid-example">Grid example</h3>
|
||||||
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.span*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
|
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.span*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
|
||||||
<div class="bs-docs-grid">
|
<div class="bs-docs-grid">
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
@ -527,7 +527,7 @@ title: CSS
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h2>Offsetting columns</h2>
|
<h3 id="grid-offsetting">Offsetting columns</h3>
|
||||||
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
|
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</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">
|
||||||
@ -550,7 +550,7 @@ title: CSS
|
|||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
<h2>Nesting columns</h2>
|
<h3 id="grid-nesting">Nesting columns</h3>
|
||||||
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
|
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="span9">
|
<div class="span9">
|
||||||
@ -581,6 +581,88 @@ title: CSS
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="grid-column-ordering">Column ordering</h3>
|
||||||
|
<p>Easily 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="span9 push3">9</div>
|
||||||
|
<div class="span3 pull9">3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html linenos %}
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="span9 push3">9</div>
|
||||||
|
<div class="span3 pull9">3</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="grid-less">LESS mixins and variables</h3>
|
||||||
|
<p>In addition to <a href="#grid-example">prebuilt grid classes</a> for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.</p>
|
||||||
|
|
||||||
|
<h4>Variables</h4>
|
||||||
|
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
|
||||||
|
{% highlight css linenos %}
|
||||||
|
@grid-columns: 12;
|
||||||
|
@grid-gutter-width: 30px;
|
||||||
|
@grid-float-breakpoint: 768px;
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h4>Mixins</h4>
|
||||||
|
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
|
||||||
|
{% highlight css linenos %}
|
||||||
|
// Creates a wrapper for a series of columns
|
||||||
|
.make-row() {
|
||||||
|
// Negative margin the row out to align the content of columns
|
||||||
|
margin-left: (@grid-gutter-width / -2);
|
||||||
|
margin-right: (@grid-gutter-width / -2);
|
||||||
|
// Then clear the floated columns
|
||||||
|
.clear_float();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate the columns
|
||||||
|
.make-column(@columns) {
|
||||||
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
|
float: left;
|
||||||
|
// Calculate width based on number of columns available
|
||||||
|
width: percentage(@columns / @grid-columns);
|
||||||
|
}
|
||||||
|
// Prevent columns from collapsing when empty
|
||||||
|
min-height: 1px;
|
||||||
|
// Set inner padding as gutters instead of margin
|
||||||
|
padding-left: (@grid-gutter-width / 2);
|
||||||
|
padding-right: (@grid-gutter-width / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate the column offsets
|
||||||
|
.make-column-offset(@columns) {
|
||||||
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
|
margin-left: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h4>Example usage</h4>
|
||||||
|
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
|
||||||
|
{% highlight css linenos %}
|
||||||
|
.wrapper {
|
||||||
|
.make-row();
|
||||||
|
}
|
||||||
|
.content-main {
|
||||||
|
.make-column(8);
|
||||||
|
}
|
||||||
|
.content-secondary {
|
||||||
|
.make-column(3);
|
||||||
|
.make-column-offset(1);
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
{% highlight html linenos %}
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="content-main">...</div>
|
||||||
|
<div class="content-secondary">...</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -10,11 +10,10 @@
|
|||||||
|
|
||||||
// Mobile-first defaults
|
// Mobile-first defaults
|
||||||
.row {
|
.row {
|
||||||
margin-left: (@grid-gutter-width / -2);
|
.make-row();
|
||||||
margin-right: (@grid-gutter-width / -2);
|
|
||||||
.clear_float();
|
|
||||||
}
|
}
|
||||||
[class^="span"] {
|
[class^="span"] {
|
||||||
|
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);
|
||||||
@ -26,10 +25,8 @@
|
|||||||
max-width: 728px;
|
max-width: 728px;
|
||||||
}
|
}
|
||||||
// Generate the grid columns and offsets
|
// Generate the grid columns and offsets
|
||||||
[class^="span"] {
|
[class^="span"] { float: left; }
|
||||||
float: left;
|
.generate-grid-columns(@grid-columns);
|
||||||
}
|
|
||||||
#grid > .core(@grid-column-width, @grid-gutter-width);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Responsive: Desktops and up
|
// Responsive: Desktops and up
|
||||||
@ -44,14 +41,6 @@
|
|||||||
.container {
|
.container {
|
||||||
max-width: 1170px;
|
max-width: 1170px;
|
||||||
}
|
}
|
||||||
.row {
|
|
||||||
margin-left: -15px;
|
|
||||||
margin-right: -15px;
|
|
||||||
}
|
|
||||||
[class^="span"] {
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset utility classes due to specificity
|
// Reset utility classes due to specificity
|
||||||
|
|||||||
123
less/mixins.less
123
less/mixins.less
@ -439,59 +439,96 @@
|
|||||||
.clear_float();
|
.clear_float();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make a Grid
|
// Make a grid
|
||||||
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
|
||||||
// .makeRow() {
|
|
||||||
// margin-left: @grid-gutter-width * -1;
|
|
||||||
// .clearfix();
|
|
||||||
// }
|
|
||||||
// .makeColumn(@columns: 1, @offset: 0) {
|
|
||||||
// float: left;
|
|
||||||
// margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2);
|
|
||||||
// width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1));
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
// Creates a wrapper for a series of columns
|
||||||
.make-row() {
|
.make-row() {
|
||||||
|
// Negative margin the row out to align the content of columns
|
||||||
|
margin-left: (@grid-gutter-width / -2);
|
||||||
|
margin-right: (@grid-gutter-width / -2);
|
||||||
|
// Then clear the floated columns
|
||||||
|
.clear_float();
|
||||||
}
|
}
|
||||||
|
// Generate the columns
|
||||||
.make-column(@columns) {
|
.make-column(@columns) {
|
||||||
float: left;
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
padding: @grid-gutter-width;
|
float: left;
|
||||||
width: percentage(@columns / @grid-columns);
|
// Calculate width based on number of columns available
|
||||||
|
width: percentage(@columns / @grid-columns);
|
||||||
|
}
|
||||||
|
// Prevent columns from collapsing when empty
|
||||||
|
min-height: 1px;
|
||||||
|
// Set inner padding as gutters instead of margin
|
||||||
|
padding-left: (@grid-gutter-width / 2);
|
||||||
|
padding-right: (@grid-gutter-width / 2);
|
||||||
}
|
}
|
||||||
|
// Generate the column offsets
|
||||||
.make-column-offset(@columns) {
|
.make-column-offset(@columns) {
|
||||||
margin-left: percentage(@columns / @grid-columns);
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
|
margin-left: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
.make-column-push(@columns) {
|
||||||
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
|
left: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.make-column-pull(@columns) {
|
||||||
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
|
right: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// The Grid
|
// The Grid
|
||||||
#grid {
|
.generate-grid-columns(@grid-columns) {
|
||||||
|
|
||||||
.core(@grid-column-width, @grid-gutter-width) {
|
|
||||||
|
|
||||||
.spanX (@index) when (@index > 0) {
|
|
||||||
.span@{index} { .span(@index); }
|
|
||||||
.spanX((@index - 1));
|
|
||||||
}
|
|
||||||
.spanX(0) {}
|
|
||||||
|
|
||||||
.offsetX (@index) when (@index > 0) {
|
|
||||||
.offset@{index} { .offset(@index); }
|
|
||||||
.offsetX((@index - 1));
|
|
||||||
}
|
|
||||||
.offsetX (0) {}
|
|
||||||
|
|
||||||
// Base styles
|
|
||||||
.offset(@columns) {
|
|
||||||
margin-left: percentage((@columns / @grid-columns));
|
|
||||||
}
|
|
||||||
.span(@columns) {
|
|
||||||
width: percentage((@columns / @grid-columns));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate .spanX and .offsetX
|
|
||||||
.spanX(@grid-columns);
|
|
||||||
.offsetX(@grid-columns);
|
|
||||||
|
|
||||||
|
// Default columns
|
||||||
|
.spanX (@index) when (@index > 0) {
|
||||||
|
.span@{index} { .span(@index); }
|
||||||
|
.spanX((@index - 1));
|
||||||
}
|
}
|
||||||
|
.spanX(0) {}
|
||||||
|
|
||||||
|
// Offsets (gaps between columns)
|
||||||
|
.offsetX (@index) when (@index > 0) {
|
||||||
|
.offset@{index} { .offset(@index); }
|
||||||
|
.offsetX((@index - 1));
|
||||||
|
}
|
||||||
|
.offsetX (0) {}
|
||||||
|
|
||||||
|
// Source ordering
|
||||||
|
.pushX (@index) when (@index > 0) {
|
||||||
|
.push@{index} { .push(@index); }
|
||||||
|
.pushX((@index - 1));
|
||||||
|
}
|
||||||
|
.pushX (0) {}
|
||||||
|
|
||||||
|
// Source ordering
|
||||||
|
.pullX (@index) when (@index > 0) {
|
||||||
|
.pull@{index} { .pull(@index); }
|
||||||
|
.pullX((@index - 1));
|
||||||
|
}
|
||||||
|
.pullX (0) {}
|
||||||
|
|
||||||
|
// Apply the styles
|
||||||
|
.span(@columns) {
|
||||||
|
width: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
.offset(@columns) {
|
||||||
|
margin-left: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
.push(@columns) {
|
||||||
|
left: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
.pull(@columns) {
|
||||||
|
right: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate .spanX and .offsetX
|
||||||
|
.spanX(@grid-columns);
|
||||||
|
.offsetX(@grid-columns);
|
||||||
|
.pushX(@grid-columns);
|
||||||
|
.pullX(@grid-columns);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -308,11 +308,9 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
// GRID
|
// Grid system
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
// Default 940px grid
|
|
||||||
@grid-columns: 12;
|
@grid-columns: 12;
|
||||||
@grid-column-width: 60px;
|
@grid-gutter-width: 30px;
|
||||||
@grid-gutter-width: 20px;
|
@grid-float-breakpoint: 768px;
|
||||||
@grid-row-width: ((@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1)));
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user