rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Add .panel-title to panel component to mirror modals

Browse Source 
/cc @leeaston
This commit is contained in:
Mark Otto 2013-07-25 21:16:43 -07:00
parent ac4e7db17f
commit 56404bc89b
4 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components.html
View File

@ -1965,18 +1965,31 @@ body { padding-bottom: 70px; }
{% endhighlight %} {% endhighlight %}
<h3 id="panels-heading">Panel with heading</h3> <h3 id="panels-heading">Panel with heading</h3>
<p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p> <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
<div class="bs-example"> <div class="bs-example">
<div class="panel"> <div class="panel">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
Panel content Panel content
</div> </div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="panel"> <div class="panel">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">Panel heading</div>
Panel content Panel content
</div> </div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
{% endhighlight %} {% endhighlight %}
<h3 id="panels-footer">Panel with footer</h3> <h3 id="panels-footer">Panel with footer</h3>
@ -1998,23 +2011,33 @@ body { padding-bottom: 70px; }
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p> <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<div class="bs-example"> <div class="bs-example">
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content Panel content
</div> </div>
<div class="panel panel-success"> <div class="panel panel-success">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content Panel content
</div> </div>
<div class="panel panel-warning"> <div class="panel panel-warning">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content Panel content
</div> </div>
<div class="panel panel-danger"> <div class="panel panel-danger">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content Panel content
</div> </div>
<div class="panel panel-info"> <div class="panel panel-info">
<div class="panel-heading">Panel heading</div> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content Panel content
</div> </div>
</div> </div>

9
dist/css/bootstrap.css vendored
View File

@ -2269,14 +2269,19 @@ a.list-group-item.active .list-group-item-text {
.panel-heading { .panel-heading {
padding: 10px 15px; padding: 10px 15px;
margin: -15px -15px 15px; margin: -15px -15px 15px;
font-size: 17.5px;
font-weight: 500;
background-color: #f5f5f5; background-color: #f5f5f5;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 17.5px;
font-weight: 500;
}
.panel-footer { .panel-footer {
padding: 10px 15px; padding: 10px 15px;
margin: 15px -15px -15px; margin: 15px -15px -15px;

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
less/panels.less
View File

@ -17,14 +17,20 @@
.panel-heading { .panel-heading {
margin: -15px -15px 15px; margin: -15px -15px 15px;
padding: 10px 15px; padding: 10px 15px;
font-size: (@font-size-base * 1.25);
font-weight: 500;
background-color: @panel-heading-bg; background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border; border-bottom: 1px solid @panel-border;
border-top-left-radius: (@panel-border-radius - 1); border-top-left-radius: (@panel-border-radius - 1);
border-top-right-radius: (@panel-border-radius - 1); border-top-right-radius: (@panel-border-radius - 1);
} }
// Within heading, strip any `h*` tag of it's default margins for spacing.
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-weight: 500;
}
// Optional footer (stays gray in every modifier class) // Optional footer (stays gray in every modifier class)
.panel-footer { .panel-footer {
margin: 15px -15px -15px; margin: 15px -15px -15px;