0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-24 16:52:19 +01:00

Merge branch '3.0.0-wip' into gh-pages

This commit is contained in:
Mark Otto 2013-08-18 11:09:32 -07:00
commit 8989d7791b
7 changed files with 147 additions and 4 deletions

View File

@ -2,7 +2,7 @@
<a href="#glyphicons">Glyphicons</a>
<ul class="nav">
<li><a href="#glyphicons-glyphs">Available glyphs</a></li>
<li><a href="#glyphicons-how-to-use">How ot use</a></li>
<li><a href="#glyphicons-how-to-use">How to use</a></li>
<li><a href="#glyphicons-examples">Examples</a></li>
</ul>
</li>

View File

@ -244,7 +244,7 @@ base_url: "../"
</ul>
<h2 id="glyphicons-how-to">How to use</h2>
<h2 id="glyphicons-how-to-use">How to use</h2>
<p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
{% highlight html %}
<span class="glyphicon glyphicon-search"></span>
@ -2779,6 +2779,117 @@ body { padding-bottom: 70px; }
<div class="panel panel-danger">...</div>
{% endhighlight %}
<h3 id="panels-tables">With tables</h3>
<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>
<div class="bs-example">
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
{% highlight html %}
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
{% endhighlight %}
<p>If there is no panel body, the component moves from panel header to table without interruption.</p>
<div class="bs-example">
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
{% highlight html %}
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
{% endhighlight %}
<h3 id="panels-list-group">With list groups</h3>
<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
<div class="bs-example">

View File

@ -5231,6 +5231,10 @@ a.list-group-item:focus {
clear: both;
}
.panel > .table {
margin-bottom: 0;
}
.panel > .list-group {
margin-bottom: 0;
}
@ -5252,6 +5256,14 @@ a.list-group-item:focus {
border-top-width: 0;
}
.panel > .table {
margin-bottom: 0;
}
.panel > .panel-body + .table {
border-top: 1px solid #dddddd;
}
.panel-heading {
padding: 10px 15px;
background-color: #f5f5f5;

File diff suppressed because one or more lines are too long

View File

@ -545,7 +545,7 @@ bootstrap/
</tr>
<tr>
<td>Well sizes</td>
<td><code>.well-small</code> <code>.well-large</code></td>
<td><code>.well-sm</code> <code>.well-lg</code></td>
</tr>
<tr>
<td>Alert links</td>

View File

View File

@ -18,12 +18,16 @@
.clearfix();
}
// List groups in panels
//
// By default, space out list group content from panel headings to account for
// any kind of custom content between the two.
.panel {
> .table {
margin-bottom: 0;
}
> .list-group {
margin-bottom: 0;
@ -48,6 +52,22 @@
}
}
// Tables in panels
//
// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
// watch it go full width.
.panel {
> .table {
margin-bottom: 0;
}
> .panel-body + .table {
border-top: 1px solid @table-border-color;
}
}
// Optional heading
.panel-heading {
padding: 10px 15px;