diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 37e89e3d6cc5b6c53de7e79f645b2d8b27420de2..5632d3aaddf4f978adb0a2aa9fb9f868dd7082e5 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -288,19 +288,21 @@ html {
}
body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ font-size: 1.4rem;
+ line-height: 20px;
color: #333333;
background-color: #ffffff;
}
-body,
input,
button,
select,
textarea {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 14px;
- font-size: 1.4rem;
- line-height: 20px;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
}
a {
@@ -344,7 +346,7 @@ p {
font-size: 21px;
font-size: 2.1rem;
font-weight: 200;
- line-height: 1.25;
+ line-height: 1.3;
}
small {
@@ -755,7 +757,7 @@ pre code {
clear: both;
}
-[class^="span"] {
+[class*="col-span-"] {
position: relative;
min-height: 1px;
padding-right: 15px;
@@ -766,151 +768,151 @@ pre code {
.container {
max-width: 728px;
}
- [class^="span"] {
+ [class*="col-span-"] {
float: left;
}
- .span12 {
+ .col-span-12 {
width: 100%;
}
- .span11 {
+ .col-span-11 {
width: 91.66666666666666%;
}
- .span10 {
+ .col-span-10 {
width: 83.33333333333334%;
}
- .span9 {
+ .col-span-9 {
width: 75%;
}
- .span8 {
+ .col-span-8 {
width: 66.66666666666666%;
}
- .span7 {
+ .col-span-7 {
width: 58.333333333333336%;
}
- .span6 {
+ .col-span-6 {
width: 50%;
}
- .span5 {
+ .col-span-5 {
width: 41.66666666666667%;
}
- .span4 {
+ .col-span-4 {
width: 33.33333333333333%;
}
- .span3 {
+ .col-span-3 {
width: 25%;
}
- .span2 {
+ .col-span-2 {
width: 16.666666666666664%;
}
- .span1 {
+ .col-span-1 {
width: 8.333333333333332%;
}
- .offset12 {
+ .col-offset-12 {
margin-left: 100%;
}
- .offset11 {
+ .col-offset-11 {
margin-left: 91.66666666666666%;
}
- .offset10 {
+ .col-offset-10 {
margin-left: 83.33333333333334%;
}
- .offset9 {
+ .col-offset-9 {
margin-left: 75%;
}
- .offset8 {
+ .col-offset-8 {
margin-left: 66.66666666666666%;
}
- .offset7 {
+ .col-offset-7 {
margin-left: 58.333333333333336%;
}
- .offset6 {
+ .col-offset-6 {
margin-left: 50%;
}
- .offset5 {
+ .col-offset-5 {
margin-left: 41.66666666666667%;
}
- .offset4 {
+ .col-offset-4 {
margin-left: 33.33333333333333%;
}
- .offset3 {
+ .col-offset-3 {
margin-left: 25%;
}
- .offset2 {
+ .col-offset-2 {
margin-left: 16.666666666666664%;
}
- .offset1 {
+ .col-offset-1 {
margin-left: 8.333333333333332%;
}
- .push12 {
+ .col-push-12 {
left: 100%;
}
- .push11 {
+ .col-push-11 {
left: 91.66666666666666%;
}
- .push10 {
+ .col-push-10 {
left: 83.33333333333334%;
}
- .push9 {
+ .col-push-9 {
left: 75%;
}
- .push8 {
+ .col-push-8 {
left: 66.66666666666666%;
}
- .push7 {
+ .col-push-7 {
left: 58.333333333333336%;
}
- .push6 {
+ .col-push-6 {
left: 50%;
}
- .push5 {
+ .col-push-5 {
left: 41.66666666666667%;
}
- .push4 {
+ .col-push-4 {
left: 33.33333333333333%;
}
- .push3 {
+ .col-push-3 {
left: 25%;
}
- .push2 {
+ .col-push-2 {
left: 16.666666666666664%;
}
- .push1 {
+ .col-push-1 {
left: 8.333333333333332%;
}
- .pull12 {
+ .col-pull-12 {
right: 100%;
}
- .pull11 {
+ .col-pull-11 {
right: 91.66666666666666%;
}
- .pull10 {
+ .col-pull-10 {
right: 83.33333333333334%;
}
- .pull9 {
+ .col-pull-9 {
right: 75%;
}
- .pull8 {
+ .col-pull-8 {
right: 66.66666666666666%;
}
- .pull7 {
+ .col-pull-7 {
right: 58.333333333333336%;
}
- .pull6 {
+ .col-pull-6 {
right: 50%;
}
- .pull5 {
+ .col-pull-5 {
right: 41.66666666666667%;
}
- .pull4 {
+ .col-pull-4 {
right: 33.33333333333333%;
}
- .pull3 {
+ .col-pull-3 {
right: 25%;
}
- .pull2 {
+ .col-pull-2 {
right: 16.666666666666664%;
}
- .pull1 {
+ .col-pull-1 {
right: 8.333333333333332%;
}
}
@@ -927,7 +929,7 @@ pre code {
}
}
-[class*="span"].pull-right {
+[class*="col-span-"].pull-right {
float: right;
}
@@ -1065,13 +1067,13 @@ th {
background-color: #f5f5f5;
}
-table col[class^="span"] {
+table col[class*="col-span-"] {
display: table-column;
float: none;
}
-table td[class^="span"],
-table th[class^="span"] {
+table td[class*="col-span-"],
+table th[class*="col-span-"] {
display: table-cell;
float: none;
}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ca8fc006ec3f4e366c23c98fbc390b1ca9c15c11..f3d7c156e37897375afc8c4a8fde1b63a28da7b3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -159,13 +159,13 @@ section > ul li {
.show-grid {
margin-bottom: 15px;
}
-.show-grid [class^="span"] {
+.show-grid [class*="col-span-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
-.show-grid [class*="span"]:hover {
+.show-grid [class*="col-span-"]:hover {
background-color: #ddd;
}
diff --git a/docs/components.html b/docs/components.html
index e2c6143ab6fc41b79b6b6f942574188cc0b43f47..5e17a6a3e487d81a02b3c356bc5a87e14431a04e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -19,7 +19,7 @@ title: Components
<!-- Docs nav
================================================== -->
<div class="row">
- <div class="span3 bs-docs-sidebar">
+ <div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#dropdowns"><i class="glyphicon glyphicon-chevron-right"></i> Dropdowns</a></li>
<li><a href="#buttonGroups"><i class="glyphicon glyphicon-chevron-right"></i> Button groups</a></li>
@@ -38,7 +38,7 @@ title: Components
<li><a href="#misc"><i class="glyphicon glyphicon-chevron-right"></i> Misc</a></li>
</ul>
</div>
- <div class="span9">
+ <div class="col-span-9">
diff --git a/docs/css.html b/docs/css.html
index 988610a6f171c8acedfc81b4be7cda46f35cb170..874e00ed04e349d59a0bbb4bc4c48ad4a8bc19eb 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -18,12 +18,12 @@ title: CSS
<!-- Docs nav
================================================== -->
<div class="row">
- <div class="span3 bs-docs-sidebar">
+ <div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#global"><i class="glyphicon glyphicon-chevron-right"></i> Global settings</a></li>
+ <li><a href="#grid"><i class="glyphicon glyphicon-chevron-right"></i> Grid system</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="#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="#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>
@@ -32,7 +32,7 @@ title: CSS
<li><a href="#responsive-utilities"><i class="glyphicon glyphicon-chevron-right"></i> Responsive utilities</a></li>
</ul>
</div>
- <div class="span9">
+ <div class="col-span-9">
@@ -79,6 +79,207 @@ title: CSS
+ <!-- Grid system
+ ================================================== -->
+ <section id="grid">
+ <div class="page-header">
+ <h1>Grid system</h1>
+ </div>
+ <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 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>.col-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="row show-grid">
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ </div>
+ <div class="row show-grid">
+ <div class="col-span-4">4</div>
+ <div class="col-span-4">4</div>
+ <div class="col-span-4">4</div>
+ </div>
+ <div class="row show-grid">
+ <div class="col-span-6">6</div>
+ <div class="col-span-6">6</div>
+ </div>
+ </div>
+{% highlight html linenos %}
+<div class="row">
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+ <div class="col-span-1">1</div>
+</div>
+<div class="row">
+ <div class="col-span-4">4</div>
+ <div class="col-span-4">4</div>
+ <div class="col-span-4">4</div>
+</div>
+<div class="row">
+ <div class="col-span-6">6</div>
+ <div class="col-span-6">6</div>
+</div>
+{% endhighlight %}
+
+ <h3 id="grid-offsetting">Offsetting columns</h3>
+ <p>Move columns to the right using <code>.col-offset-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
+ <div class="bs-docs-grid">
+ <div class="row show-grid">
+ <div class="col-span-4">4</div>
+ <div class="col-span-4 col-offset-4">4 offset 4</div>
+ </div><!-- /row -->
+ <div class="row show-grid">
+ <div class="col-span-3 col-offset-3">3 offset 3</div>
+ <div class="col-span-3 col-offset-3">3 offset 3</div>
+ </div><!-- /row -->
+ <div class="row show-grid">
+ <div class="col-span-6 col-offset-6">6 offset 6</div>
+ </div><!-- /row -->
+ </div>
+{% highlight html linenos %}
+<div class="row">
+ <div class="col-span-4">...</div>
+ <div class="col-span-4 col-offset-4">...</div>
+</div>
+{% endhighlight %}
+
+
+ <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>
+ <div class="row show-grid">
+ <div class="col-span-9">
+ Level 1: 9 columns
+ <div class="row show-grid">
+ <div class="col-span-6">
+ Level 2: 6 columns
+ </div>
+ <div class="col-span-6">
+ Level 2: 6 columns
+ </div>
+ </div>
+ </div>
+ </div>
+{% highlight html linenos %}
+<div class="row">
+ <div class="col-span-9">
+ Level 1: 9 columns
+ <div class="row">
+ <div class="col-span-6">
+ Level 2: 6 columns
+ </div>
+ <div class="col-span-6">
+ Level 2: 6 columns
+ </div>
+ </div>
+ </div>
+</div>
+{% endhighlight %}
+
+ <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>
+<div class="row show-grid">
+ <div class="col-span-9 col-push-3">9</div>
+ <div class="col-span-3 col-pull-9">3</div>
+</div>
+
+{% highlight html linenos %}
+<div class="row show-grid">
+ <div class="col-span-9 col-push-3">9</div>
+ <div class="col-span-3 col-pull-9">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>
+
+
+
<!-- Typography
================================================== -->
@@ -466,207 +667,6 @@ title: CSS
- <!-- Grid system
- ================================================== -->
- <section id="grid">
- <div class="page-header">
- <h1>Grid system</h1>
- </div>
- <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 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>
- <div class="bs-docs-grid">
- <div class="row show-grid">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- </div>
- <div class="row show-grid">
- <div class="span4">4</div>
- <div class="span4">4</div>
- <div class="span4">4</div>
- </div>
- <div class="row show-grid">
- <div class="span6">6</div>
- <div class="span6">6</div>
- </div>
- </div>
-{% highlight html linenos %}
-<div class="row">
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
- <div class="span1">1</div>
-</div>
-<div class="row">
- <div class="span4">4</div>
- <div class="span4">4</div>
- <div class="span4">4</div>
-</div>
-<div class="row">
- <div class="span6">6</div>
- <div class="span6">6</div>
-</div>
-{% endhighlight %}
-
- <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>
- <div class="bs-docs-grid">
- <div class="row show-grid">
- <div class="span4">4</div>
- <div class="span4 offset4">4 offset 4</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span3 offset3">3 offset 3</div>
- <div class="span3 offset3">3 offset 3</div>
- </div><!-- /row -->
- <div class="row show-grid">
- <div class="span6 offset6">6 offset 6</div>
- </div><!-- /row -->
- </div>
-{% highlight html linenos %}
-<div class="row">
- <div class="span4">...</div>
- <div class="span4 offset4">...</div>
-</div>
-{% endhighlight %}
-
-
- <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>
- <div class="row show-grid">
- <div class="span9">
- Level 1: 9 columns
- <div class="row show-grid">
- <div class="span6">
- Level 2: 6 columns
- </div>
- <div class="span6">
- Level 2: 6 columns
- </div>
- </div>
- </div>
- </div>
-{% highlight html linenos %}
-<div class="row">
- <div class="span9">
- Level 1: 9 columns
- <div class="row">
- <div class="span6">
- Level 2: 6 columns
- </div>
- <div class="span6">
- Level 2: 6 columns
- </div>
- </div>
- </div>
-</div>
-{% endhighlight %}
-
- <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>
-<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>
-
-
-
<!-- Code
diff --git a/docs/customize.html b/docs/customize.html
index 014a48f5e4c8161dca2732e89ba9a8ed6872231e..544f41310bf56599f057700316982627dc3c83c1 100644
--- a/docs/customize.html
+++ b/docs/customize.html
@@ -19,7 +19,7 @@ title: Customize and download
<!-- Docs nav
================================================== -->
<div class="row">
- <div class="span3 bs-docs-sidebar">
+ <div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#components"><i class="glyphicon glyphicon-chevron-right"></i> 1. Choose components</a></li>
<li><a href="#plugins"><i class="glyphicon glyphicon-chevron-right"></i> 2. Select jQuery plugins</a></li>
@@ -27,7 +27,7 @@ title: Customize and download
<li><a href="#download"><i class="glyphicon glyphicon-chevron-right"></i> 4. Download</a></li>
</ul>
</div>
- <div class="span9">
+ <div class="col-span-9">
<!-- Customize form
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 48b5d51ada1070810e464d0c5d53e369ec4ae3cd..79b31d25df990ffd9dc93116bc376165f0aa6cb9 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -19,7 +19,7 @@ description: Overview of the project, its contents, and how to get started with
<!-- Docs nav
================================================== -->
<div class="row">
- <div class="span3 bs-docs-sidebar">
+ <div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#download-bootstrap"><i class="glyphicon glyphicon-chevron-right"></i> Download</a></li>
<li><a href="#file-structure"><i class="glyphicon glyphicon-chevron-right"></i> File structure</a></li>
@@ -29,7 +29,7 @@ description: Overview of the project, its contents, and how to get started with
<li><a href="#what-next"><i class="glyphicon glyphicon-chevron-right"></i> What next?</a></li>
</ul>
</div>
- <div class="span9">
+ <div class="col-span-9">
diff --git a/docs/index.html b/docs/index.html
index 5fbf2e3666b9ce1ed195f48a1d7454e4b072ed80..17afe11c438d3c2647973795bc5c6a55905ef338 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -30,17 +30,17 @@ title: Bootstrap
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
<div class="row">
- <div class="span4">
+ <div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
<h2>By nerds, for nerds.</h2>
<p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
</div>
- <div class="span4">
+ <div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
<h2>Made for everyone.</h2>
<p>Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).</p>
</div>
- <div class="span4">
+ <div class="col-span-4">
<img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
<h2>Packed with features.</h2>
<p>A 12-column responsive <a href="./css/#grid-system">grid</a>, dozens of components, <a href="./javascript/">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
@@ -50,22 +50,22 @@ title: Bootstrap
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For more sites built with Bootstrap, <a href="http://expo.getbootstrap.com">visit the Expo</a> or <a href="./getting-started/#examples">browse the examples</a>.</p>
<div class="row bs-docs-gallery">
- <div class="span3">
+ <div class="col-span-3">
<a class="thumbnail" href="http://delicious.com" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/delicious.jpg" alt="Delicious">
</a>
</div>
- <div class="span3">
+ <div class="col-span-3">
<a class="thumbnail" href="https://yourkarma.com" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/karma.jpg" alt="Karma">
</a>
</div>
- <div class="span3">
+ <div class="col-span-3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/soundready.jpg" alt="SoundReady">
</a>
</div>
- <div class="span3">
+ <div class="col-span-3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="http://expo.getbootstrap.com/screenshots/kippt.jpg" alt="Kippt">
</a>
diff --git a/docs/javascript.html b/docs/javascript.html
index 45ebb5ee82402c2392639aa4c9d2f29765e44ab7..8e65c61d54a4758d530638c0a69ae8d4dbdd9c8a 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -17,7 +17,7 @@ title: JavaScript plugins
<!-- Docs nav
================================================== -->
<div class="row">
- <div class="span3 bs-docs-sidebar">
+ <div class="col-span-3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#overview"><i class="glyphicon glyphicon-chevron-right"></i> Overview</a></li>
<li><a href="#transitions"><i class="glyphicon glyphicon-chevron-right"></i> Transitions</a></li>
@@ -35,7 +35,7 @@ title: JavaScript plugins
<li><a href="#affix"><i class="glyphicon glyphicon-chevron-right"></i> Affix</a></li>
</ul>
</div>
- <div class="span9">
+ <div class="col-span-9">
<!-- Overview
diff --git a/less/grid.less b/less/grid.less
index e9eb52ef2f476b7a6fde0890d1bf31343160ce9a..1de1b15f6caa9603f9ce2e3d954ec03ced5c93de 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -12,7 +12,7 @@
.row {
.make-row();
}
-[class^="span"] {
+[class*="col-span-"] {
position: relative;
min-height: 1px;
padding-left: (@grid-gutter-width / 2);
@@ -25,7 +25,7 @@
max-width: 728px;
}
// Generate the grid columns and offsets
- [class^="span"] { float: left; }
+ [class*="col-span-"] { float: left; }
.generate-grid-columns(@grid-columns);
}
@@ -44,6 +44,6 @@
}
// Reset utility classes due to specificity
-[class*="span"].pull-right {
+[class*="col-span-"].pull-right {
float: right;
}
diff --git a/less/mixins.less b/less/mixins.less
index 458e58cc987a4b4982da70eddf4d0c35746abfd9..7a993b1aec26f9d61f17db3ac5d141e02d61e901 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -449,52 +449,52 @@
.generate-grid-columns(@grid-columns) {
// Default columns
- .spanX (@index) when (@index > 0) {
- .span@{index} { .span(@index); }
- .spanX((@index - 1));
+ .col-span-X (@index) when (@index > 0) {
+ .col-span-@{index} { .col-span-(@index); }
+ .col-span-X((@index - 1));
}
- .spanX(0) {}
+ .col-span-X(0) {}
// Offsets (gaps between columns)
- .offsetX (@index) when (@index > 0) {
- .offset@{index} { .offset(@index); }
- .offsetX((@index - 1));
+ .col-offset-X (@index) when (@index > 0) {
+ .col-offset-@{index} { .col-offset-(@index); }
+ .col-offset-X((@index - 1));
}
- .offsetX (0) {}
+ .col-offset-X (0) {}
// Source ordering
- .pushX (@index) when (@index > 0) {
- .push@{index} { .push(@index); }
- .pushX((@index - 1));
+ .col-push-X (@index) when (@index > 0) {
+ .col-push-@{index} { .col-push-(@index); }
+ .col-push-X((@index - 1));
}
- .pushX (0) {}
+ .col-push-X (0) {}
// Source ordering
- .pullX (@index) when (@index > 0) {
- .pull@{index} { .pull(@index); }
- .pullX((@index - 1));
+ .col-pull-X (@index) when (@index > 0) {
+ .col-pull-@{index} { .col-pull-(@index); }
+ .col-pull-X((@index - 1));
}
- .pullX (0) {}
+ .col-pull-X (0) {}
// Apply the styles
- .span(@columns) {
+ .col-span-(@columns) {
width: percentage((@columns / @grid-columns));
}
- .offset(@columns) {
+ .col-offset-(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
- .push(@columns) {
+ .col-push-(@columns) {
left: percentage((@columns / @grid-columns));
}
- .pull(@columns) {
+ .col-pull-(@columns) {
right: percentage((@columns / @grid-columns));
}
// Generate .spanX and .offsetX
- .spanX(@grid-columns);
- .offsetX(@grid-columns);
- .pushX(@grid-columns);
- .pullX(@grid-columns);
+ .col-span-X(@grid-columns);
+ .col-offset-X(@grid-columns);
+ .col-push-X(@grid-columns);
+ .col-pull-X(@grid-columns);
}
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 2b82d1e90c0de603f77aec6d8c61773155065b0a..633222ed8cc6ebe4ddbb185755a8bb51c98cf504 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -30,19 +30,21 @@ html {
}
body {
+ font-family: @font-family-base;
+ .font-size();
+ line-height: @line-height-base;
color: @text-color;
background-color: @body-background;
}
// Reset fonts for revelant elements
-body,
input,
button,
select,
textarea {
- font-family: @font-family-base;
- .font-size();
- line-height: @line-height-base;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
}
diff --git a/less/tables.less b/less/tables.less
index b3045bf07c956ce8acc0706124ac90cd45c4c968..f70d46396dee90e064fdcfdd026227ee83203ffc 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -179,12 +179,12 @@ th {
// -----------------
// Reset default table behavior
-table col[class^="span"] {
+table col[class*="col-span-"] {
float: none;
display: table-column;
}
-table td[class^="span"],
-table th[class^="span"] {
+table td[class*="col-span-"],
+table th[class*="col-span-"] {
float: none;
display: table-cell;
}
diff --git a/less/type.less b/less/type.less
index 55aea4d8a68396a1d2a1ed57cb88051a32adc61d..193078c72c3e940c7408d365453dab4c161c550b 100644
--- a/less/type.less
+++ b/less/type.less
@@ -13,7 +13,7 @@ p {
margin-bottom: @line-height-base;
.font-size((@font-size-base * 1.5));
font-weight: 200;
- line-height: 1.25;
+ line-height: 1.3;
}