Skip to content

B
bootstrap
Commit 2d875c8d authored by fat's avatar fat
Browse files
Options

Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip

parents 33f448f6 1b814ddd
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 87 deletions
css.html
View file @ 2d875c8d
...@@ -192,60 +192,60 @@ base_url: "../" ...@@ -192,60 +192,60 @@ base_url: "../"
<p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p> <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-8">8</div> <div class="col-md-8">.col-md-8</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-6">6</div> <div class="col-md-6">.col-md-6</div>
<div class="col-md-6">6</div> <div class="col-md-6">.col-md-6</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
<div class="col-md-1">1</div> <div class="col-md-1">.col-md-1</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-8">8</div> <div class="col-md-8">.col-md-8</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">4</div> <div class="col-md-4">.col-md-4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6">6</div> <div class="col-md-6">.col-md-6</div>
<div class="col-md-6">6</div> <div class="col-md-6">.col-md-6</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -253,37 +253,37 @@ base_url: "../" ...@@ -253,37 +253,37 @@ base_url: "../"
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p> <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col-xs-12 col-md-8">8</div> <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-xs-6 col-md-6">6</div> <div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6 col-md-6">6</div> <div class="col-xs-6">.col-xs-6</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-8">8</div> <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> </div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row"> <div class="row">
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> </div>
<!-- Columns are always 50% wide, on mobile and desktop --> <!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row"> <div class="row">
<div class="col-xs-6 col-md-6">6</div> <div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6 col-md-6">6</div> <div class="col-xs-6">.col-xs-6</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -348,28 +348,28 @@ base_url: "../" ...@@ -348,28 +348,28 @@ base_url: "../"
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p> <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-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-md-4">4</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">4 offset 4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div><!-- /row --> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div><!-- /row --> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-6 col-md-offset-3">6 offset 3</div> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div><!-- /row --> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-4">...</div> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">...</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">3 offset 3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3">...</div> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -378,13 +378,13 @@ base_url: "../" ...@@ -378,13 +378,13 @@ base_url: "../"
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</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>.col-md-*</code> columns within an existing <code>.col-md-*</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="col-md-9"> <div class="col-md-9">
Level 1: 9 columns Level 1: .col-md-9
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-6"> <div class="col-md-6">
Level 2: 6 columns Level 2: .col-md-6
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
Level 2: 6 columns Level 2: .col-md-6
</div> </div>
</div> </div>
</div> </div>
...@@ -392,13 +392,13 @@ base_url: "../" ...@@ -392,13 +392,13 @@ base_url: "../"
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-md-9">
Level 1: 9 columns Level 1: .col-md-9
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
Level 2: 6 columns Level 2: .col-md-6
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
Level 2: 6 columns Level 2: .col-md-6
</div> </div>
</div> </div>
</div> </div>
...@@ -408,14 +408,14 @@ base_url: "../" ...@@ -408,14 +408,14 @@ base_url: "../"
<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-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p> <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col-md-9 col-md-push-3">9</div> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col-md-9 col-md-push-3">9</div> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
...@@ -607,27 +607,27 @@ base_url: "../" ...@@ -607,27 +607,27 @@ base_url: "../"
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<td><h1>Bootstrap heading</h1></td> <td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 38px</td> <td>Semibold 38px</td>
</tr> </tr>
<tr> <tr>
<td><h2>Bootstrap heading</h2></td> <td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 32px</td> <td>Semibold 32px</td>
</tr> </tr>
<tr> <tr>
<td><h3>Bootstrap heading</h3></td> <td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td> <td>Semibold 24px</td>
</tr> </tr>
<tr> <tr>
<td><h4>Bootstrap heading</h4></td> <td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td> <td>Semibold 18px</td>
</tr> </tr>
<tr> <tr>
<td><h5>Bootstrap heading</h5></td> <td><h5>h5. Bootstrap heading</h5></td>
<td>Semibold 14px</td> <td>Semibold 14px</td>
</tr> </tr>
<tr> <tr>
<td><h6>Bootstrap heading</h6></td> <td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td> <td>Semibold 12px</td>
</tr> </tr>
</tbody> </tbody>
...@@ -2070,29 +2070,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2070,29 +2070,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3>.pull-left</h3> <h3>.pull-left</h3>
<p>Float an element left</p> <p>Float an element left with a class. Can also be used as a mixin.</p>
{% highlight html %} {% highlight html %}
<div class="pull-left">...</div> <div class="pull-left">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css %} {% highlight css %}
.pull-left { .pull-left {
float: left; float: left !important;
} }
{% endhighlight %} {% endhighlight %}
<h3>.pull-right</h3> <h3>.pull-right</h3>
<p>Float an element right</p> <p>Float an element right with a class. Can also be used as a mixin.</p>
{% highlight html %} {% highlight html %}
<div class="pull-right">...</div> <div class="pull-right">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css %} {% highlight css %}
.pull-right { .pull-right {
float: right; float: right !important;
} }
{% endhighlight %} {% endhighlight %}
<h3>.clearfix</h3> <h3>.clearfix</h3>
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p> <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
{% highlight html %} {% highlight html %}
<div class="clearfix">...</div> <div class="clearfix">...</div>
{% endhighlight %} {% endhighlight %}
......
dist/css/bootstrap.css
View file @ 2d875c8d
...@@ -1408,6 +1408,7 @@ th { ...@@ -1408,6 +1408,7 @@ th {
.table thead > tr > th { .table thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid #dddddd;
} }
.table caption + thead tr:first-child th, .table caption + thead tr:first-child th,
...@@ -1449,6 +1450,11 @@ th { ...@@ -1449,6 +1450,11 @@ th {
border: 1px solid #dddddd; border: 1px solid #dddddd;
} }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th { .table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9; background-color: #f9f9f9;
......
dist/css/bootstrap.min.css
View file @ 2d875c8d
This source diff could not be displayed because it is too large. You can view the blob instead.
less/tables.less
View file @ 2d875c8d
...@@ -35,6 +35,7 @@ th { ...@@ -35,6 +35,7 @@ th {
// Bottom align for column headings // Bottom align for column headings
thead > tr > th { thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
} }
// Remove top border from thead by default // Remove top border from thead by default
caption + thead, caption + thead,
...@@ -92,6 +93,14 @@ th { ...@@ -92,6 +93,14 @@ th {
} }
} }
} }
> thead {
> tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
} }
......
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