diff options
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 35 |
1 files changed, 29 insertions, 6 deletions
diff --git a/components.html b/components.html index 6eb849ea7..3f177a840 100644 --- a/components.html +++ b/components.html @@ -1965,18 +1965,31 @@ body { padding-bottom: 70px; } {% endhighlight %} <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><div></code> or any heading element (e.g., <code><h3></code>).</p> + <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code><h1></code>-<code><h6></code> with a <code>.panel-title</code> class to add a pre-styled heading.</p> <div class="bs-example"> <div class="panel"> <div class="panel-heading">Panel heading</div> Panel content </div> + <div class="panel"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + Panel content + </div> </div> {% highlight html %} <div class="panel"> <div class="panel-heading">Panel heading</div> Panel content </div> + +<div class="panel"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + Panel content +</div> {% endhighlight %} <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> <div class="bs-example"> <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 </div> <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 </div> <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 </div> <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 </div> <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 </div> </div> |