diff options
| author | Mark Otto <[email protected]> | 2013-07-25 21:16:43 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-07-25 21:16:43 -0700 |
| commit | 56404bc89b590ee48313634b0bf2be8591fae233 (patch) | |
| tree | 3c111f33189a57bbcdc7414ab2a3a0bb50a59cdc /components.html | |
| parent | ac4e7db17f3999a3b4e8625b47dda1d186b19330 (diff) | |
| download | bootstrap-56404bc89b590ee48313634b0bf2be8591fae233.tar.xz bootstrap-56404bc89b590ee48313634b0bf2be8591fae233.zip | |
Add `.panel-title` to panel component to mirror modals
/cc @leeaston
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> |