risoluto/apps/RisolutoApps/Sample/Sample3.tpl
{*
This file is part of Risoluto( http://www.risoluto.org/ )
Risoluto is released under New BSD License( http://opensource.org/licenses/bsd-license.php )
(C) 2008-2015 Risoluto Developers / All Rights Reserved.
*}
{include file="$__RISOLUTO_APPS/common/header.tpl"}
<hr>
<h1>h1.
<small>h1. small</small>
<span class="label label-default">Label</span>
</h1>
<h2>h2.
<small>h2. small</small>
<span class="label label-primary">Label</span>
</h2>
<h3>h3.
<small>h3. small</small>
<span class="label label-success">Label</span>
</h3>
<h4>h4.
<small>h4. small</small>
<span class="label label-info">Label</span>
</h4>
<h5>h5.
<small>h5. small</small>
<span class="label label-warning">Label</span>
</h5>
<h6>h6.
<small>h6. small</small>
<span class="label label-danger">Label</span>
</h6>
<hr>
<a href="#">Link text<span class="badge">badge</span></a>
<p>Paragraph</p>
<p class="lead">Paragraph with .lead</p>
<p>Inline
<mark>mark</mark>
</p>
<p>Inline
<del>delete</del>
</p>
<p>Inline <s>strike</s></p>
<p>Inline
<ins>Insert</ins>
</p>
<p>
<small>Small text</small>
</p>
<p><strong>Bold text</strong></p>
<p><em>Italic text</em></p>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<p class="text-muted">text-muted</p>
<p class="text-primary">text-primary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>
<p class="bg-primary">bg-primary</p>
<p class="bg-success">bg-success</p>
<p class="bg-info">bg-info</p>
<p class="bg-warning">bg-warning</p>
<p class="bg-danger">bg-danger</p>
<p>This is <abbr title="Title text">abbr normal</abbr></p>
<p>This is <abbr title="Title text" class="initialism">abbr initialism</abbr></p>
<address>Address text</address>
<p>Inline text <code>Code is here</code></p>
<p>Inline text <kbd>keybord operations</kbd></p>
<hr>
<pre><pre>Text is here</pre></pre>
<blockquote>
<p>Blockquote text</p>
<footer>footer text and <cite title="Title text">source</cite></footer>
</blockquote>
<blockquote class="blockquote-reverse">
<p>Blockquote text</p>
<footer>footer text and <cite title="Title text">source</cite></footer>
</blockquote>
<p><var>y</var> = <var>1</var></p>
<samp>Sample text</samp>
<hr>
<ul>
<li>List #1</li>
<li>List #2
<ul>
<li>List #2-1</li>
</ul>
</li>
<li>List #3</li>
</ul>
<ol>
<li>List #1</li>
<li>List #2
<ol>
<li>List #2-1</li>
</ol>
</li>
<li>List #3</li>
</ol>
<ul class="list-inline">
<li>List #1</li>
<li>List #2</li>
<li>List #3</li>
</ul>
<dl>
<dt>dl dt</dt>
<dd>dl dd</dd>
<dt>dl dt</dt>
<dd>dl dd</dd>
</dl>
<dl class="dl-horizontal">
<dt>dl dt</dt>
<dd>dl dd</dd>
<dt>dl dt</dt>
<dd>dl dd</dd>
</dl>
<hr>
<p>Normal</p>
<table>
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
<p>class=table</p>
<table class="table">
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
<p>class=table table-striped</p>
<table class="table table-striped">
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
<p>class=table table-bordered</p>
<table class="table table-bordered">
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
<p>class=table table-hover</p>
<table class="table table-hover">
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
<p>class=table table-condensed</p>
<table class="table table-condensed">
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
<p>Use contextual classes in tr</p>
<table class="table">
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr class="success">
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr class="info">
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr class="warning">
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr class="danger">
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
<p>Use contextual classes in tr</p>
<table class="table">
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
<th>thead tr th</th>
<th>thead tr th</th>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr>
<td class="active">tbody tr td</td>
<td class="success">tbody tr td</td>
<td class="info">tbody tr td</td>
<td class="warning">tbody tr td</td>
<td class="danger">tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
<p>Responsive table</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>thead tr th</th>
<th>thead tr th</th>
<th>thead tr th</th>
<th>thead tr th</th>
<th>thead tr th</th>
<th>thead tr th</th>
</tr>
</thead>
<tbody>
<tr>
<td class="active">tbody tr td</td>
<td class="success">tbody tr td</td>
<td class="info">tbody tr td</td>
<td class="warning">tbody tr td</td>
<td class="danger">tbody tr td</td>
<td>tbody tr td</td>
</tr>
</tbody>
</table>
</div>
<hr>
<p>Normal form</p>
<form role="form">
<div class="form-group">
<input class="form-control" id="disabledInput" type="text" placeholder="placeholder" disabled>
<input class="form-control" type="text" placeholder="Readonly" readonly>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<span class="help-block">Help text</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
<span class="help-block">Help text</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block">Help text</span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Static</label>
<div class="col-sm-10">
<p class="form-control-static">Static</p>
</div>
</div>
<div class="form-group">
<label for="form_1">Input</label>
<input type="text" class="form-control" id="form_1" placeholder="Input">
<span class="help-block">Help text</span>
</div>
<div class="form-group">
<label for="form_2">Password</label>
<input type="password" class="form-control" id="form_2" placeholder="Password">
</div>
<div class="form-group">
<label for="form_3">File input</label>
<input type="file" id="form_3">
<p class="help-block">Something write here</p>
</div>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<textarea class="form-control" rows="3"></textarea>
<div class="checkbox">
<label>
<input type="checkbox" value="">Checkbox enabled
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>Checkbox disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" id="radio1" value="radio1" checked>Radio enabled checked
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" id="radio2" value="radio2">Radio enabled
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="radio" id="radio3" value="radio3" disabled>Radio disabled
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<p>Inline form</p>
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" id="disabledInput" type="text" placeholder="placeholder" disabled>
<input class="form-control" type="text" placeholder="Readonly" readonly>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<span class="help-block">Help text</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
<span class="help-block">Help text</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block">Help text</span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Static</label>
<div class="col-sm-10">
<p class="form-control-static">Static</p>
</div>
</div>
<div class="form-group">
<label for="form_1">Input</label>
<input type="text" class="form-control" id="form_1" placeholder="Input">
<span class="help-block">Help text</span>
</div>
<div class="form-group">
<label for="form_2">Password</label>
<input type="password" class="form-control" id="form_2" placeholder="Password">
</div>
<div class="form-group">
<label for="form_3">File input</label>
<input type="file" id="form_3">
<p class="help-block">Something write here</p>
</div>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<textarea class="form-control" rows="3"></textarea>
<div class="checkbox">
<label>
<input type="checkbox" value="">Checkbox enabled
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>Checkbox disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" id="radio1" value="radio1" checked>Radio enabled checked
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" id="radio2" value="radio2">Radio enabled
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="radio" id="radio3" value="radio3" disabled>Radio disabled
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<hr>
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
<p>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
<hr>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Header #1</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 2</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Menu 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Header #2</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 4</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">Button #1</button>
<button type="button" class="btn btn-default">Button #2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button #3</button>
<button type="button" class="btn btn-default">Button #4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Button #5</button>
<button type="button" class="btn btn-default">Button #6</button>
</div>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Top</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Bottom</button>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Tab #1</a></li>
<li><a href="#">Tab #2</a></li>
<li><a href="#">Tab #3</a></li>
</ul>
<ul class="nav nav-pills">
<li class="active"><a href="#">pills #1</a></li>
<li><a href="#">Pills #2</a></li>
<li><a href="#">Pills #3</a></li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Stacked #1</a></li>
<li><a href="#">Stacked #2</a></li>
<li><a href="#">Stacked #3</a></li>
</ul>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Justified Tab #1</a></li>
<li><a href="#">Justified Tab #2</a></li>
<li><a href="#">Justified Tab #3</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Justified Pills #1</a></li>
<li><a href="#">Justified Pills #2</a></li>
<li><a href="#">Justified Pills #3</a></li>
</ul>
<ul class="pager">
<li class="previous disabled"><a href="#">< Older</a></li>
<li class="next"><a href="#">Newer ></a></li>
</ul>
<div class="jumbotron">
<div class="container">
<h1>Jumbotron</h1>
<p>Text is here</p>
<p><a class="btn btn-default btn-lg" role="button">Link to somewhere</a></p>
</div>
</div>
<div class="alert alert-success" role="alert">alert success <a href="#" class="alert-link">alert link</a></div>
<div class="alert alert-info" role="alert">alert info <a href="#" class="alert-link">alert link</a></div>
<div class="alert alert-warning" role="alert">alert warning <a href="#" class="alert-link">alert link</a></div>
<div class="alert alert-danger" role="alert">alert danger <a href="#" class="alert-link">alert link</a></div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span
class="sr-only">Close</span></button>
alert which can close <a href="#" class="alert-link">alert link</a>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="2" aria-valuemin="0"
aria-valuemax="100" style="width: 2%;">
2%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="width: 100%;">
100%
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel header #1</div>
<div class="panel-body">
Panel content #1
</div>
<div class="panel-footer">Panel footer #1</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel header #2</div>
<div class="panel-body">
Panel content #2
</div>
<div class="panel-footer">Panel footer #2</div>
</div>
<hr>
{include file="$__RISOLUTO_APPS/common/footer.tpl"}