Show More
panels.html
152 lines
| 4.7 KiB
| text/html
|
HtmlLexer
r1 | ## -*- coding: utf-8 -*- | |||
<%inherit file="/debug_style/index.html"/> | ||||
<%def name="breadcrumbs_links()"> | ||||
${h.link_to(_('Style'), h.url('debug_style_home'))} | ||||
» | ||||
${c.active} | ||||
</%def> | ||||
<%def name="real_main()"> | ||||
<div class="box"> | ||||
<div class="title"> | ||||
${self.breadcrumbs()} | ||||
</div> | ||||
<div class='sidebar-col-wrapper'> | ||||
${self.sidebar()} | ||||
<div class="main-content"> | ||||
<h2>Panels</h2> | ||||
<p> | ||||
Panels are based on | ||||
<a href="http://getbootstrap.com/components/#panels"> | ||||
Bootstrap panels</a>, with custom styles added.</p> | ||||
<p> | ||||
Examples how to use it: | ||||
</p> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading"> | ||||
Panel title | ||||
</div> | ||||
<div class="panel-body"> | ||||
Panel with a plain <code>.panel-heading</code> | ||||
and <code>.panel-footer</code>. | ||||
</div> | ||||
<div class="panel-footer"> | ||||
Panel footer | ||||
</div> | ||||
</div> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading"> | ||||
Panel title | ||||
</div> | ||||
<div class="panel-body"> | ||||
Footers are optional. | ||||
</div> | ||||
</div> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading"> | ||||
<div class="panel-title"> | ||||
Panel title | ||||
</div> | ||||
</div> | ||||
<div class="panel-body"> | ||||
A <code>div.panel-title</code> | ||||
</div> | ||||
<div class="panel-footer"> | ||||
Panel footer | ||||
</div> | ||||
</div> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading"> | ||||
<h3 class="panel-title"> | ||||
Panel title | ||||
</h3> | ||||
</div> | ||||
<div class="panel-body"> | ||||
A <code>h3.panel-title</code> | ||||
</div> | ||||
<div class="panel-footer"> | ||||
Panel footer | ||||
</div> | ||||
</div> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading"> | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
Panel title | ||||
</div> | ||||
<div class="panel-body"> | ||||
Content, title and footer can be of arbritary length. | ||||
Content, title and footer can be of arbritary length. | ||||
Content, title and footer can be of arbritary length. | ||||
Content, title and footer can be of arbritary length. | ||||
Content, title and footer can be of arbritary length. | ||||
Content, title and footer can be of arbritary length. | ||||
Content, title and footer can be of arbritary length. | ||||
Content, title and footer can be of arbritary length. | ||||
Content, title and footer can be of arbritary length. | ||||
</div> | ||||
<div class="panel-footer"> | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
Panel footer | ||||
</div> | ||||
</div> | ||||
<p> | ||||
Use the HTML format below: | ||||
</p> | ||||
<div class="bs-example template-example"> | ||||
<xmp><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 class="panel-footer"> | ||||
Panel footer | ||||
</div> | ||||
</div></xmp> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</%def> | ||||