Risoluto/Risoluto-Core

View on GitHub
risoluto/apps/RisolutoApps/Sample/Sample3.tpl

Summary

Maintainability
Test Coverage
{*
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>&lt;pre&gt;Text is here&lt;/pre&gt;</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="#">&lt; Older</a></li>
    <li class="next"><a href="#">Newer &gt;</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">&times;</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"}