POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/panels.html

   1 <div class="bs-docs-section">
   2   <h1 id="panels" class="page-header">Panels</h1>
   3
   4   <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>
   5
   6   <h2 id="panels-basic">Basic example</h2>
   7   <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
   8   <div class="bs-example" data-example-id="simple-panel">
   9     <div class="panel panel-default">
  10       <div class="panel-body">
  11         Basic panel example
  12       </div>
  13     </div>
  14   </div>
  15 {% highlight html %}
  16 <div class="panel panel-default">
  17   <div class="panel-body">
  18     Basic panel example
  19   </div>
  20 </div>
  21 {% endhighlight %}
  22
  23   <h2 id="panels-heading">Panel with heading</h2>
  24   <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>
  25   <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
  26   <div class="bs-example" data-example-id="panel-with-heading">
  27     <div class="panel panel-default">
  28       <div class="panel-heading">Panel heading without title</div>
  29       <div class="panel-body">
  30         Panel content
  31       </div>
  32     </div>
  33     <div class="panel panel-default">
  34       <div class="panel-heading">
  35         <h3 class="panel-title">Panel title</h3>
  36       </div>
  37       <div class="panel-body">
  38         Panel content
  39       </div>
  40     </div>
  41   </div>
  42 {% highlight html %}
  43 <div class="panel panel-default">
  44   <div class="panel-heading">Panel heading without title</div>
  45   <div class="panel-body">
  46     Panel content
  47   </div>
  48 </div>
  49
  50 <div class="panel panel-default">
  51   <div class="panel-heading">
  52     <h3 class="panel-title">Panel title</h3>
  53   </div>
  54   <div class="panel-body">
  55     Panel content
  56   </div>
  57 </div>
  58 {% endhighlight %}
  59
  60   <h2 id="panels-footer">Panel with footer</h2>
  61   <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>
  62   <div class="bs-example" data-example-id="panel-with-footer">
  63     <div class="panel panel-default">
  64       <div class="panel-body">
  65         Panel content
  66       </div>
  67       <div class="panel-footer">Panel footer</div>
  68     </div>
  69   </div>
  70 {% highlight html %}
  71 <div class="panel panel-default">
  72   <div class="panel-body">
  73     Panel content
  74   </div>
  75   <div class="panel-footer">Panel footer</div>
  76 </div>
  77 {% endhighlight %}
  78
  79   <h2 id="panels-alternatives">Contextual alternatives</h2>
  80   <p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
  81   <div class="bs-example" data-example-id="contextual-panels">
  82     <div class="panel panel-primary">
  83       <div class="panel-heading">
  84         <h3 class="panel-title">Panel title</h3>
  85       </div>
  86       <div class="panel-body">
  87         Panel content
  88       </div>
  89     </div>
  90     <div class="panel panel-success">
  91       <div class="panel-heading">
  92         <h3 class="panel-title">Panel title</h3>
  93       </div>
  94       <div class="panel-body">
  95         Panel content
  96       </div>
  97     </div>
  98     <div class="panel panel-info">
  99       <div class="panel-heading">
 100         <h3 class="panel-title">Panel title</h3>
 101       </div>
 102       <div class="panel-body">
 103         Panel content
 104       </div>
 105     </div>
 106     <div class="panel panel-warning">
 107       <div class="panel-heading">
 108         <h3 class="panel-title">Panel title</h3>
 109       </div>
 110       <div class="panel-body">
 111         Panel content
 112       </div>
 113     </div>
 114     <div class="panel panel-danger">
 115       <div class="panel-heading">
 116         <h3 class="panel-title">Panel title</h3>
 117       </div>
 118       <div class="panel-body">
 119         Panel content
 120       </div>
 121     </div>
 122   </div>
 123 {% highlight html %}
 124 <div class="panel panel-primary">...</div>
 125 <div class="panel panel-success">...</div>
 126 <div class="panel panel-info">...</div>
 127 <div class="panel panel-warning">...</div>
 128 <div class="panel panel-danger">...</div>
 129 {% endhighlight %}
 130
 131   <h2 id="panels-tables">With tables</h2>
 132   <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>
 133   <div class="bs-example" data-example-id="table-within-panel">
 134     <div class="panel panel-default">
 135       <!-- Default panel contents -->
 136       <div class="panel-heading">Panel heading</div>
 137       <div class="panel-body">
 138         <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>
 139       </div>
 140
 141       <!-- Table -->
 142       <table class="table">
 143         <thead>
 144           <tr>
 145             <th>#</th>
 146             <th>First Name</th>
 147             <th>Last Name</th>
 148             <th>Username</th>
 149           </tr>
 150         </thead>
 151         <tbody>
 152           <tr>
 153             <th scope="row">1</th>
 154             <td>Mark</td>
 155             <td>Otto</td>
 156             <td>@mdo</td>
 157           </tr>
 158           <tr>
 159             <th scope="row">2</th>
 160             <td>Jacob</td>
 161             <td>Thornton</td>
 162             <td>@fat</td>
 163           </tr>
 164           <tr>
 165             <th scope="row">3</th>
 166             <td>Larry</td>
 167             <td>the Bird</td>
 168             <td>@twitter</td>
 169           </tr>
 170         </tbody>
 171       </table>
 172     </div>
 173   </div>
 174 {% highlight html %}
 175 <div class="panel panel-default">
 176   <!-- Default panel contents -->
 177   <div class="panel-heading">Panel heading</div>
 178   <div class="panel-body">
 179     <p>...</p>
 180   </div>
 181
 182   <!-- Table -->
 183   <table class="table">
 184     ...
 185   </table>
 186 </div>
 187 {% endhighlight %}
 188
 189   <p>If there is no panel body, the component moves from panel header to table without interruption.</p>
 190   <div class="bs-example" data-example-id="panel-without-body-with-table">
 191     <div class="panel panel-default">
 192       <!-- Default panel contents -->
 193       <div class="panel-heading">Panel heading</div>
 194
 195       <!-- Table -->
 196       <table class="table">
 197         <thead>
 198           <tr>
 199             <th>#</th>
 200             <th>First Name</th>
 201             <th>Last Name</th>
 202             <th>Username</th>
 203           </tr>
 204         </thead>
 205         <tbody>
 206           <tr>
 207             <th scope="row">1</th>
 208             <td>Mark</td>
 209             <td>Otto</td>
 210             <td>@mdo</td>
 211           </tr>
 212           <tr>
 213             <th scope="row">2</th>
 214             <td>Jacob</td>
 215             <td>Thornton</td>
 216             <td>@fat</td>
 217           </tr>
 218           <tr>
 219             <th scope="row">3</th>
 220             <td>Larry</td>
 221             <td>the Bird</td>
 222             <td>@twitter</td>
 223           </tr>
 224         </tbody>
 225       </table>
 226     </div>
 227   </div>
 228 {% highlight html %}
 229 <div class="panel panel-default">
 230   <!-- Default panel contents -->
 231   <div class="panel-heading">Panel heading</div>
 232
 233   <!-- Table -->
 234   <table class="table">
 235     ...
 236   </table>
 237 </div>
 238 {% endhighlight %}
 239
 240
 241   <h2 id="panels-list-group">With list groups</h2>
 242   <p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>
 243   <div class="bs-example" data-example-id="panel-with-list-group">
 244     <div class="panel panel-default">
 245       <!-- Default panel contents -->
 246       <div class="panel-heading">Panel heading</div>
 247       <div class="panel-body">
 248         <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>
 249       </div>
 250
 251       <!-- List group -->
 252       <ul class="list-group">
 253         <li class="list-group-item">Cras justo odio</li>
 254         <li class="list-group-item">Dapibus ac facilisis in</li>
 255         <li class="list-group-item">Morbi leo risus</li>
 256         <li class="list-group-item">Porta ac consectetur ac</li>
 257         <li class="list-group-item">Vestibulum at eros</li>
 258       </ul>
 259     </div>
 260   </div>
 261 {% highlight html %}
 262 <div class="panel panel-default">
 263   <!-- Default panel contents -->
 264   <div class="panel-heading">Panel heading</div>
 265   <div class="panel-body">
 266     <p>...</p>
 267   </div>
 268
 269   <!-- List group -->
 270   <ul class="list-group">
 271     <li class="list-group-item">Cras justo odio</li>
 272     <li class="list-group-item">Dapibus ac facilisis in</li>
 273     <li class="list-group-item">Morbi leo risus</li>
 274     <li class="list-group-item">Porta ac consectetur ac</li>
 275     <li class="list-group-item">Vestibulum at eros</li>
 276   </ul>
 277 </div>
 278 {% endhighlight %}
 279 </div>