diff options
author | ITSERVICES\rb7147 <rb7147@att.com> | 2017-04-25 11:46:00 -0400 |
---|---|---|
committer | ITSERVICES\rb7147 <rb7147@att.com> | 2017-05-03 09:58:17 -0400 |
commit | e0addf5b588a1244f9679becd90999dfcb4c3a94 (patch) | |
tree | 1212772d6366730266ff0e093c874b07aa716c29 /POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/panels.html | |
parent | 39fb0f30472777e4b60d6a7ac8aa4eb9773961ff (diff) |
Policy 1707 commit to LF
Change-Id: Ibe6f01d92f9a434c040abb05d5386e89d675ae65
Signed-off-by: ITSERVICES\rb7147 <rb7147@att.com>
Diffstat (limited to 'POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/panels.html')
-rw-r--r-- | POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/panels.html | 279 |
1 files changed, 279 insertions, 0 deletions
diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/panels.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/panels.html new file mode 100644 index 000000000..dc6181cac --- /dev/null +++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/panels.html @@ -0,0 +1,279 @@ +<div class="bs-docs-section"> + <h1 id="panels" class="page-header">Panels</h1> + + <p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p> + + <h2 id="panels-basic">Basic example</h2> + <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p> + <div class="bs-example" data-example-id="simple-panel"> + <div class="panel panel-default"> + <div class="panel-body"> + Basic panel example + </div> + </div> + </div> +{% highlight html %} +<div class="panel panel-default"> + <div class="panel-body"> + Basic panel example + </div> +</div> +{% endhighlight %} + + <h2 id="panels-heading">Panel with heading</h2> + <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> + <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p> + <div class="bs-example" data-example-id="panel-with-heading"> + <div class="panel panel-default"> + <div class="panel-heading">Panel heading without title</div> + <div class="panel-body"> + Panel content + </div> + </div> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + </div> +{% highlight html %} +<div class="panel panel-default"> + <div class="panel-heading">Panel heading without title</div> + <div class="panel-body"> + Panel content + </div> +</div> + +<div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> +</div> +{% endhighlight %} + + <h2 id="panels-footer">Panel with footer</h2> + <p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p> + <div class="bs-example" data-example-id="panel-with-footer"> + <div class="panel panel-default"> + <div class="panel-body"> + Panel content + </div> + <div class="panel-footer">Panel footer</div> + </div> + </div> +{% highlight html %} +<div class="panel panel-default"> + <div class="panel-body"> + Panel content + </div> + <div class="panel-footer">Panel footer</div> +</div> +{% endhighlight %} + + <h2 id="panels-alternatives">Contextual alternatives</h2> + <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" data-example-id="contextual-panels"> + <div class="panel panel-primary"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + <div class="panel panel-success"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + <div class="panel panel-info"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + <div class="panel panel-warning"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + <div class="panel panel-danger"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + </div> +{% highlight html %} +<div class="panel panel-primary">...</div> +<div class="panel panel-success">...</div> +<div class="panel panel-info">...</div> +<div class="panel panel-warning">...</div> +<div class="panel panel-danger">...</div> +{% endhighlight %} + + <h2 id="panels-tables">With tables</h2> + <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" data-example-id="table-within-panel"> + <div class="panel panel-default"> + <!-- 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> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + </div> + </div> +{% highlight html %} +<div class="panel panel-default"> + <!-- 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" data-example-id="panel-without-body-with-table"> + <div class="panel panel-default"> + <!-- 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> + <th scope="row">1</th> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <th scope="row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <th scope="row">3</th> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + </div> + </div> +{% highlight html %} +<div class="panel panel-default"> + <!-- Default panel contents --> + <div class="panel-heading">Panel heading</div> + + <!-- Table --> + <table class="table"> + ... + </table> +</div> +{% endhighlight %} + + + <h2 id="panels-list-group">With list groups</h2> + <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p> + <div class="bs-example" data-example-id="panel-with-list-group"> + <div class="panel panel-default"> + <!-- 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> + + <!-- List group --> + <ul class="list-group"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item">Morbi leo risus</li> + <li class="list-group-item">Porta ac consectetur ac</li> + <li class="list-group-item">Vestibulum at eros</li> + </ul> + </div> + </div> +{% highlight html %} +<div class="panel panel-default"> + <!-- Default panel contents --> + <div class="panel-heading">Panel heading</div> + <div class="panel-body"> + <p>...</p> + </div> + + <!-- List group --> + <ul class="list-group"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item">Morbi leo risus</li> + <li class="list-group-item">Porta ac consectetur ac</li> + <li class="list-group-item">Vestibulum at eros</li> + </ul> +</div> +{% endhighlight %} +</div> |