1674 lines
66 KiB
HTML
1674 lines
66 KiB
HTML
<p translate>
|
|
To view source code, hover over a section, then click the <a class="btn btn-primary btn-xs"><span class="fa fa-code"></span></a> button in the top right of that section.
|
|
</p>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-4">
|
|
<div class="list-group">
|
|
<a translate class="list-group-item" href="#navbar" target="_self">Navbar</a>
|
|
<a translate class="list-group-item" href="#buttons" target="_self">Buttons</a>
|
|
<a translate class="list-group-item" href="#typography" target="_self">Typography</a>
|
|
<a translate class="list-group-item" href="#tables" target="_self">Tables</a>
|
|
<a translate class="list-group-item" href="#forms" target="_self">Forms</a>
|
|
<a translate class="list-group-item" href="#navs" target="_self">Navs</a>
|
|
<a translate class="list-group-item" href="#indicators" target="_self">Indicators</a>
|
|
<a translate class="list-group-item" href="#charts" target="_self">Charts</a>
|
|
<a translate class="list-group-item" href="#progress-bars" target="_self">Progress bars</a>
|
|
<a translate class="list-group-item" href="#containers" target="_self">Containers</a>
|
|
<a translate class="list-group-item" href="#dialogs" target="_self">Dialogs</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navbar -->
|
|
<div class="bs-docs-section clearfix">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="navbar">Navbar</h1>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<div class="navbar navbar-default">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a translate class="navbar-brand" href="#">Brand</a>
|
|
</div>
|
|
<div class="navbar-collapse collapse navbar-responsive-collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a translate href="#">Active</a></li>
|
|
<li><a translate href="#">Link</a></li>
|
|
<li class="dropup">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropup' | translate $} <b class="fa fa-caret-down"></b></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li translate class="dropdown-header">Dropdown header</li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
<li><a translate href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-left">
|
|
<input type="text" class="form-control col-lg-8" placeholder="{$ 'Search' | translate $}">
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a translate href="#">Link</a></li>
|
|
<li class="dropup">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropup' | translate $} <b class="fa fa-caret-down"></b></a>
|
|
<ul class="dropdown-menu dropdown-menu-right">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<div class="navbar navbar-inverse">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a translate class="navbar-brand" href="#">Brand</a>
|
|
</div>
|
|
<div class="navbar-collapse collapse navbar-inverse-collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a translate href="#">Active</a></li>
|
|
<li><a translate href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropdown' | translate $} <b class="fa fa-caret-down"></b></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li translate class="dropdown-header">Dropdown header</li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
<li><a translate href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-left">
|
|
<input type="text" class="form-control col-lg-8" placeholder="{$ 'Search' | translate $}">
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a translate href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{$ 'Dropdown' | translate $} <b class="fa fa-caret-down"></b></a>
|
|
<ul class="dropdown-menu dropdown-menu-right">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div><!-- /example -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 translate id="buttons">Buttons</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<p class="bs-component">
|
|
<button translate type="button" class="btn btn-default">Default</button>
|
|
<button translate type="button" class="btn btn-primary">Primary</button>
|
|
<button translate type="button" class="btn btn-success">Success</button>
|
|
<button translate type="button" class="btn btn-info">Info</button>
|
|
<button translate type="button" class="btn btn-warning">Warning</button>
|
|
<button translate type="button" class="btn btn-danger">Danger</button>
|
|
<button translate type="button" class="btn btn-link">Link</button>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button translate type="button" class="btn btn-default disabled">Default</button>
|
|
<button translate type="button" class="btn btn-primary disabled">Primary</button>
|
|
<button translate type="button" class="btn btn-success disabled">Success</button>
|
|
<button translate type="button" class="btn btn-info disabled">Info</button>
|
|
<button translate type="button" class="btn btn-warning disabled">Warning</button>
|
|
<button translate type="button" class="btn btn-danger disabled">Danger</button>
|
|
<button translate type="button" class="btn btn-link disabled">Link</button>
|
|
</p>
|
|
|
|
<div class="bs-container">
|
|
<div class="btn-toolbar bs-component">
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-default">Default</button>
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-success">Success</button>
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-info">Info</button>
|
|
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-warning">Warning</button>
|
|
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-container">
|
|
<div class="btn-toolbar bs-component">
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-lg btn-default">Default</button>
|
|
<button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-sm btn-default">Default</button>
|
|
<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-xs btn-default">Default</button>
|
|
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-caret-down"></span></button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="bs-component">
|
|
<button translate type="button" class="btn btn-primary btn-lg">Large button</button>
|
|
<button translate type="button" class="btn btn-primary">Default button</button>
|
|
<button translate type="button" class="btn btn-primary btn-sm">Small button</button>
|
|
<button translate type="button" class="btn btn-primary btn-xs">Mini button</button>
|
|
</p>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
|
|
<p class="bs-component">
|
|
<button translate type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
|
|
</p>
|
|
|
|
<div class="bs-component bs-container">
|
|
<div class="btn-group btn-group-justified">
|
|
<a translate href="#" class="btn btn-default">Left</a>
|
|
<a translate href="#" class="btn btn-default">Middle</a>
|
|
<a translate href="#" class="btn btn-default">Right</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component bs-container">
|
|
<div class="btn-toolbar">
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-default">1</button>
|
|
<button translate type="button" class="btn btn-default">2</button>
|
|
<button translate type="button" class="btn btn-default">3</button>
|
|
<button translate type="button" class="btn btn-default">4</button>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button translate type="button" class="btn btn-default">5</button>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
{$ 'Dropdown' | translate $}
|
|
<span class="fa fa-caret-down"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Dropdown link</a></li>
|
|
<li><a translate href="#">Dropdown link</a></li>
|
|
<li><a translate href="#">Dropdown link</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
{$ 'Actions' | translate $}
|
|
<span class="fa fa-caret-down"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="btn btn-default" translate href="#">Default Anchor</a>
|
|
</li>
|
|
<li>
|
|
<button class="btn btn-default" translate href="#">Default Button</button>
|
|
</li>
|
|
<li>
|
|
<a class="btn btn-primary" translate href="#">Primary Anchor</a>
|
|
</li>
|
|
<li>
|
|
<button class="btn btn-primary" translate href="#">Primary Button</button>
|
|
</li>
|
|
<li>
|
|
<a class="btn btn-info" translate href="#">Info Anchor</a>
|
|
</li>
|
|
<li>
|
|
<button class="btn btn-info" translate href="#">Info Button</button>
|
|
</li>
|
|
<li>
|
|
<a class="btn btn-warning" translate href="#">Warning Anchor</a>
|
|
</li>
|
|
<li>
|
|
<button class="btn btn-warning" translate href="#">Warning Button</button>
|
|
</li>
|
|
<li>
|
|
<a class="btn btn-danger" translate href="#">Danger Anchor</a>
|
|
</li>
|
|
<li>
|
|
<button class="btn btn-danger" translate href="#">Danger Button</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<div class="btn-group-vertical">
|
|
<button translate type="button" class="btn btn-default">Button</button>
|
|
<button translate type="button" class="btn btn-default">Button</button>
|
|
<button translate type="button" class="btn btn-default">Button</button>
|
|
<button translate type="button" class="btn btn-default">Button</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typography -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="typography">Typography</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Headings -->
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<h1 translate>Heading 1</h1>
|
|
<h2 translate>Heading 2</h2>
|
|
<h3 translate>Heading 3</h3>
|
|
<h4 translate>Heading 4</h4>
|
|
<h5 translate>Heading 5</h5>
|
|
<h6 translate>Heading 6</h6>
|
|
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<h2 translate>Example body text</h2>
|
|
<p>Maecenas faucibus mollis interdum. Fusce dapibus, <a href="#">tellus ac cursus</a> commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
|
<p translate><small>This line of text is meant to be treated as fine print.</small></p>
|
|
<p translate>The following snippet of text is <strong>rendered as bold text</strong>.</p>
|
|
<p translate>The following snippet of text is <em>rendered as italicized text</em>.</p>
|
|
<p translate>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<h2 translate>Emphasis classes</h2>
|
|
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blockquotes -->
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate id="typography-blockquotes">Blockquotes</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<small>{$ 'Someone famous in' | translate $}<cite title="Source Title" translate>Source Title</cite></small>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<blockquote class="pull-right">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<small>{$ 'Someone famous in' | translate $}<cite title="Source Title" translate>Source Title</cite></small>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tables -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="tables">Tables</h1>
|
|
</div>
|
|
|
|
<h2 translate id="tables-standard">Standard Table</h2>
|
|
<div class="bs-component">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th translate>#</th>
|
|
<th translate>Column heading</th>
|
|
<th translate>Column heading</th>
|
|
<th translate>Column heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td translate>1</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
<tr>
|
|
<td translate>2</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
<tr class="info">
|
|
<td translate>3</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
<tr class="success">
|
|
<td translate>4</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
<tr class="danger">
|
|
<td translate>5</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
<tr class="warning">
|
|
<td translate>6</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
<tr class="active">
|
|
<td translate>7</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- /example -->
|
|
|
|
<h2 translate id="tables-bordered">Bordered Table</h2>
|
|
<div class="bs-component">
|
|
<table class="table table-striped table-hover table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th translate>#</th>
|
|
<th translate>Column heading</th>
|
|
<th translate>Column heading</th>
|
|
<th translate>Column heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td translate>1</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
<tr>
|
|
<td translate>2</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
<td translate>Column content</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- /example -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Forms -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="forms">Forms</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="well bs-component">
|
|
<form class="form-horizontal">
|
|
<fieldset>
|
|
<legend translate>Legend</legend>
|
|
<div class="form-group">
|
|
<label translate for="inputEmail" class="col-lg-2 control-label">Email</label>
|
|
<div class="col-lg-10">
|
|
<input type="email" class="form-control" id="inputEmail" placeholder="{$ 'Email' | translate $}">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate for="inputPassword" class="col-lg-2 control-label">Password</label>
|
|
<div class="col-lg-10">
|
|
<input type="password" class="form-control" id="inputPassword" placeholder="{$ 'Password' | translate $}">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> {$ 'Checkbox' | translate $}
|
|
</label>
|
|
</div>
|
|
<div class="themable-checkbox">
|
|
<input type="checkbox" id="themable-checkbox">
|
|
<label for="themable-checkbox" translate>Themable Checkbox</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate for="textArea" class="col-lg-2 control-label">Textarea</label>
|
|
<div class="col-lg-10">
|
|
<textarea class="form-control" rows="3" id="textArea"></textarea>
|
|
<span translate class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label">Radios</label>
|
|
<div class="col-lg-10">
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
|
|
{$ 'Option one is this' | translate $}
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
|
{$ 'Option two can be something else' | translate $}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label">Themable Radios</label>
|
|
<div class="col-lg-10">
|
|
<div class="themable-radio">
|
|
<input type="radio" name="optionsThemableRadios" id="optionsRadios3" value="option1" checked="">
|
|
<label for="optionsRadios3">
|
|
<span>{$ 'Themable Option 1' | translate $}</span>
|
|
</label>
|
|
</div>
|
|
<div class="themable-radio">
|
|
<input type="radio" name="optionsThemableRadios" id="optionsRadios4" value="option2">
|
|
<label for="optionsRadios4">
|
|
<span>{$ 'Themable Option 2' | translate $}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate for="select" class="col-lg-2 control-label">Selects</label>
|
|
<div class="col-lg-10">
|
|
<select class="form-control" id="select">
|
|
<option translate>1</option>
|
|
<option translate>2</option>
|
|
<option translate>3</option>
|
|
<option translate>4</option>
|
|
<option translate>5</option>
|
|
</select>
|
|
<br>
|
|
<select multiple="" class="form-control">
|
|
<option translate>1</option>
|
|
<option translate>2</option>
|
|
<option translate>3</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate for="select" class="col-lg-2 control-label">Themable Selects</label>
|
|
<div class="col-lg-10">
|
|
<div class="themable-select dropdown form-control">
|
|
<button data-toggle="dropdown" type="button" class="btn btn-default dropdown-toggle" aria-expanded="false">
|
|
<span class="dropdown-title" translate>Select Title</span>
|
|
<span class="fa fa-caret-down"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a href="#" data-select-value="1" translate>1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" data-select-value="2" translate>2</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" data-select-value="3" translate>3</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" data-select-value="4" translate>4</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" data-select-value="5" translate>5</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<select class="form-control" id="select">
|
|
<option value="1" translate>1</option>
|
|
<option value="2" translate>2</option>
|
|
<option value="3" translate>3</option>
|
|
<option value="4" translate>4</option>
|
|
<option value="5" translate>5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-lg-4 col-lg-offset-2">
|
|
<button translate class="btn btn-default">Cancel</button>
|
|
<button translate type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="well bs-component">
|
|
<form class="form-horizontal">
|
|
<fieldset>
|
|
<legend translate>Other Input Types</legend>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label" for="datepicker">Datepicker</label>
|
|
<div class="col-lg-10">
|
|
<div class='input-group'>
|
|
<input type="text" class="form-control" id="datepicker">
|
|
<span class="input-group-addon datepicker-addon">
|
|
<span class="fa fa-calendar"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label" for="datetime-localInput">Datetime</label>
|
|
<div class="col-lg-10">
|
|
<input type="datetime-local" class="form-control" id="datetime-localInput">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label" for="dateInput">Date</label>
|
|
<div class="col-lg-4">
|
|
<input type="date" class="form-control" id="dateInput">
|
|
</div>
|
|
<label translate class="col-lg-2 control-label" for="monthInput">Month</label>
|
|
<div class="col-lg-4">
|
|
<input type="month" class="form-control" id="monthInput">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label" for="timeInput">Time</label>
|
|
<div class="col-lg-4">
|
|
<input type="time" class="form-control" id="timeInput">
|
|
</div>
|
|
<label translate class="col-lg-2 control-label" for="weekInput">Week</label>
|
|
<div class="col-lg-4">
|
|
<input type="week" class="form-control" id="weekInput">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label" for="numberInput">Number</label>
|
|
<div class="col-lg-4">
|
|
<input type="number" class="form-control" id="numberInput">
|
|
</div>
|
|
<label translate class="col-lg-2 control-label" for="emailInput">Email</label>
|
|
<div class="col-lg-4">
|
|
<input type="email" class="form-control" id="emailInput">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label" for="urlInput">Url</label>
|
|
<div class="col-lg-4">
|
|
<input type="url" class="form-control" id="Input">
|
|
</div>
|
|
<label translate class="col-lg-2 control-label" for="searchInput">Search</label>
|
|
<div class="col-lg-4">
|
|
<input type="search" class="form-control" id="searchInput">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate class="col-lg-2 control-label" for="telInput">Tel</label>
|
|
<div class="col-lg-4">
|
|
<input type="tel" class="form-control" id="telInput">
|
|
</div>
|
|
<label translate class="col-lg-2 control-label" for="colorInput">Color</label>
|
|
<div class="col-lg-4">
|
|
<input type="color" class="form-control" id="colorInput">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-lg-offset-1">
|
|
<div class="bs-component">
|
|
<form>
|
|
<h3 translate>Input States</h3>
|
|
<div class="form-group">
|
|
<label translate class="control-label" for="focusedInput">Focused input</label>
|
|
<input class="form-control" id="focusedInput" type="text" value="{$ 'This is focused...' | translate $}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label translate class="control-label" for="disabledInput">Disabled input</label>
|
|
<input class="form-control" id="disabledInput" type="text" placeholder="{$ 'Disabled input here...' | translate $}" disabled="">
|
|
</div>
|
|
|
|
<div class="form-group has-warning">
|
|
<label translate class="control-label" for="inputWarning">Input warning</label>
|
|
<input type="text" class="form-control" id="inputWarning">
|
|
</div>
|
|
|
|
<div class="form-group has-error">
|
|
<label translate class="control-label" for="inputError">Input error</label>
|
|
<input type="text" class="form-control" id="inputError">
|
|
</div>
|
|
|
|
<div class="form-group has-success">
|
|
<label translate class="control-label" for="inputSuccess">Input success</label>
|
|
<input type="text" class="form-control" id="inputSuccess">
|
|
</div>
|
|
|
|
<h3 translate>Input Sizes</h3>
|
|
<div class="form-group">
|
|
<label translate class="control-label" for="inputLarge">Large input</label>
|
|
<input class="form-control input-lg" type="text" id="inputLarge">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label translate class="control-label" for="inputDefault">Default input</label>
|
|
<input type="text" class="form-control" id="inputDefault">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label translate class="control-label" for="inputSmall">Small input</label>
|
|
<input class="form-control input-sm" type="text" id="inputSmall">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label translate class="control-label">Input addons</label>
|
|
<div class="input-group">
|
|
<span class="input-group-addon">$</span>
|
|
<input type="text" class="form-control">
|
|
<span class="input-group-btn">
|
|
<button translate class="btn btn-default" type="button">Button</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="bs-component">
|
|
<h3 translate>Inline Form</h3>
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label translate for="exampleInputName2">Name</label>
|
|
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate for="exampleInputEmail2">Email</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
|
|
</div>
|
|
<button translate type="submit" class="btn btn-default">Send invitation</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navs -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="navs">Navs</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<h2 translate id="navs-tabs">Tabs</h2>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a translate href="#home" data-toggle="tab">Home</a></li>
|
|
<li><a translate href="#profile" data-toggle="tab">Profile</a></li>
|
|
<li class="disabled"><a translate>Disabled</a></li>
|
|
<li class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
{$ 'Dropdown' | translate $} <span class="fa fa-caret-down"></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#dropdown1" data-toggle="tab">Action</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#dropdown2" data-toggle="tab">Another action</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<div id="myTabContent" class="tab-content">
|
|
<div class="tab-pane fade active in" id="home">
|
|
<p>Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile">
|
|
<p>Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="dropdown1">
|
|
<p>Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="dropdown2">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<h2 translate id="navs-pills">Pills</h2>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-pills">
|
|
<li class="active"><a translate href="#">Home</a></li>
|
|
<li><a translate href="#">Profile</a></li>
|
|
<li class="disabled"><a translate href="#">Disabled</a></li>
|
|
<li class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
{$ 'Dropdown' | translate $} <span class="fa fa-caret-down"></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li class="active"><a translate href="#">Home</a></li>
|
|
<li><a translate href="#">Profile</a></li>
|
|
<li class="disabled"><a translate href="#">Disabled</a></li>
|
|
<li class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
{$ 'Dropdown' | translate $} <span class="fa fa-caret-down"></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a translate href="#">Action</a></li>
|
|
<li><a translate href="#">Another action</a></li>
|
|
<li><a translate href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a translate href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<h2 translate id="navs-breadcrumbs">Breadcrumbs</h2>
|
|
<div class="bs-component">
|
|
<ul class="breadcrumb">
|
|
<li translate class="active">Home</li>
|
|
</ul>
|
|
|
|
<ul class="breadcrumb">
|
|
<li><a translate href="#">Home</a></li>
|
|
<li translate class="active">Library</li>
|
|
</ul>
|
|
|
|
<ul class="breadcrumb">
|
|
<li><a translate href="#">Home</a></li>
|
|
<li><a translate href="#">Library</a></li>
|
|
<li translate class="active">Data</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<h2 translate id="pagination">Pagination</h2>
|
|
<div class="bs-component">
|
|
<ul class="pagination">
|
|
<li class="disabled"><a href="#">«</a></li>
|
|
<li class="active"><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">4</a></li>
|
|
<li><a href="#">5</a></li>
|
|
<li><a href="#">»</a></li>
|
|
</ul>
|
|
|
|
<ul class="pagination pagination-lg">
|
|
<li class="disabled"><a href="#">«</a></li>
|
|
<li class="active"><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">»</a></li>
|
|
</ul>
|
|
|
|
<ul class="pagination pagination-sm">
|
|
<li class="disabled"><a href="#">«</a></li>
|
|
<li class="active"><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">4</a></li>
|
|
<li><a href="#">5</a></li>
|
|
<li><a href="#">»</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<h2 translate id="pager">Pager</h2>
|
|
<div class="bs-component">
|
|
<ul class="pager">
|
|
<li><a translate href="#">Previous</a></li>
|
|
<li><a translate href="#">Next</a></li>
|
|
</ul>
|
|
|
|
<ul class="pager">
|
|
<li class="previous disabled"><a href="#">← {$ 'Older' | translate $}</a></li>
|
|
<li class="next"><a href="#">{$ 'Newer' | translate $} →</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indicators
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="indicators">Indicators</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>Alerts</h2>
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissable alert-warning">
|
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
<h4 translate>Warning!</h4>
|
|
<p>Somethings not quite right. Maecenas sed diam eget risus <a href="#" class="alert-link">varius blandit sit amet non magna</a>!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div translate class="alert alert-dismissable alert-danger">
|
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
<strong>Oh snap!</strong>
|
|
<a href="#" class="alert-link">Change a few things up</a>
|
|
and try submitting again.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div translate class="alert alert-dismissable alert-success">
|
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
<strong>Well done!</strong>
|
|
You successfully read
|
|
<a href="#" class="alert-link">this important alert message</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div translate class="alert alert-dismissable alert-info">
|
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
<strong>Heads up!</strong>
|
|
This
|
|
<a href="#" class="alert-link">alert needs your attention</a>,
|
|
but it's not super important.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<h2>Labels</h2>
|
|
<div class="bs-component bs-container">
|
|
<span translate class="label label-default">Default</span>
|
|
<span translate class="label label-primary">Primary</span>
|
|
<span translate class="label label-success">Success</span>
|
|
<span translate class="label label-warning">Warning</span>
|
|
<span translate class="label label-danger">Danger</span>
|
|
<span translate class="label label-info">Info</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<h2 translate>Badges</h2>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-pills">
|
|
<li class="active"><a href="#">{$ 'Home' | translate $} <span class="badge">42</span></a></li>
|
|
<li><a href="#">{$ 'Profile' | translate $} <span class="badge"></span></a></li>
|
|
<li><a href="#">{$ 'Messages' | translate $} <span class="badge">3</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="charts">Charts</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>Usage Charts</h2>
|
|
<div class="bs-component">
|
|
<div class="col-md-1 pie-chart-usage"
|
|
data-used="25 100 100"></div>
|
|
<div class="col-md-1 pie-chart-usage"
|
|
data-used="95 100 100"></div>
|
|
<div class="col-md-1 pie-chart-usage"
|
|
data-used="100 100 100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>Distribution Charts</h2>
|
|
<div class="bs-component">
|
|
<div class="col-md-2 pie-chart-distribution"
|
|
data-used="Foo=1|Bar=2|Baz=3"></div>
|
|
<div class="col-md-2 pie-chart-distribution chart-danger"
|
|
data-used="Foo=5|Bar=3|Baz=4|Blah=1"></div>
|
|
<div class="col-md-2 pie-chart-distribution chart-info"
|
|
data-used="Foo=3|Bar=4|Baz=5|Blah=2"></div>
|
|
<div class="col-md-2 pie-chart-distribution chart-success"
|
|
data-used="Foo=4|Bar=5"></div>
|
|
<div class="col-md-2 pie-chart-distribution chart-warning"
|
|
data-used="Foo=5|Bar=1|Baz=2|Blah=4|Something=2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>Line Charts</h2>
|
|
<div class="col-md-10 bs-component">
|
|
<div class="line-chart">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Progress bars
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="progress-bars">Progress bars</h1>
|
|
</div>
|
|
|
|
<h3 translate id="progress-basic">Basic</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 60%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 translate id="progress-alternatives">Contextual alternatives</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
|
</div>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 translate id="progress-striped">Striped</h3>
|
|
<div class="bs-component">
|
|
<div class="progress progress-striped">
|
|
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
|
|
</div>
|
|
|
|
<div class="progress progress-striped">
|
|
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
|
|
</div>
|
|
|
|
<div class="progress progress-striped">
|
|
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
|
|
</div>
|
|
|
|
<div class="progress progress-striped">
|
|
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 translate id="progress-animated">Animated</h3>
|
|
<div class="bs-component">
|
|
<div class="progress progress-striped active">
|
|
<div class="progress-bar" style="width: 45%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 translate id="progress-stacked">Stacked</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
|
|
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
|
|
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 translate id="progress-info">Text</h3>
|
|
<div class="bs-component">
|
|
<div class="progress-text">
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 10%;"></div>
|
|
</div>
|
|
<span class="progress-bar-text" translate>10%</span>
|
|
</div>
|
|
<div class="progress-text">
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 75%;"></div>
|
|
</div>
|
|
<span class="progress-bar-text" translate>75%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 translate id="progress-info">Loading</h3>
|
|
<div class="bs-component">
|
|
<div class="horizon-loading-bar">
|
|
<div class="progress">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Containers
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="containers">Containers</h1>
|
|
</div>
|
|
<div class="bs-component">
|
|
<div class="jumbotron">
|
|
<h1 translate>Jumbotron</h1>
|
|
<p translate>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
|
<p><a translate class="btn btn-primary btn-lg">Learn more</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>List groups</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<span class="badge">14</span>
|
|
Cras justo odio
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="badge">2</span>
|
|
Dapibus ac facilisis in
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="badge">1</span>
|
|
Morbi leo risus
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item active">
|
|
Cras justo odio
|
|
</a>
|
|
<a href="#" class="list-group-item">Dapibus ac facilisis in
|
|
</a>
|
|
<a href="#" class="list-group-item">Morbi leo risus
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item">
|
|
<h4 translate class="list-group-item-heading">List group item heading</h4>
|
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<h4 translate class="list-group-item-heading">List group item heading</h4>
|
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>Panels</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="panel panel-default">
|
|
<div translate class="panel-body">Basic panel</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div translate class="panel-heading">Panel heading</div>
|
|
<div translate class="panel-body">Panel content</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div translate class="panel-body">Panel content</div>
|
|
<div translate class="panel-footer">Panel footer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">
|
|
<h3 translate class="panel-title">Panel primary</h3>
|
|
</div>
|
|
<div translate class="panel-body">Panel content</div>
|
|
</div>
|
|
|
|
<div class="panel panel-success">
|
|
<div class="panel-heading">
|
|
<h3 translate class="panel-title">Panel success</h3>
|
|
</div>
|
|
<div translate class="panel-body">Panel content</div>
|
|
</div>
|
|
|
|
<div class="panel panel-warning">
|
|
<div class="panel-heading">
|
|
<h3 translate class="panel-title">Panel warning</h3>
|
|
</div>
|
|
<div translate class="panel-body">Panel content</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="panel panel-danger">
|
|
<div class="panel-heading">
|
|
<h3 translate class="panel-title">Panel danger</h3>
|
|
</div>
|
|
<div translate class="panel-body">Panel content</div>
|
|
</div>
|
|
|
|
<div class="panel panel-info">
|
|
<div class="panel-heading">
|
|
<h3 translate class="panel-title">Panel info</h3>
|
|
</div>
|
|
<div translate class="panel-body">Panel content</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>Wells</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div translate class="well">
|
|
Look, I'm in a well!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div translate class="well well-sm">
|
|
Look, I'm in a small well!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div translate class="well well-lg">
|
|
Look, I'm in a large well!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>Other lists</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<h3 translate>Unordered</h3>
|
|
<div class="bs-component">
|
|
<ul>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit
|
|
<ul>
|
|
<li>Phasellus iaculis neque</li>
|
|
<li>Purus sodales ultricies</li>
|
|
<li>Vestibulum laoreet porttitor sem</li>
|
|
<li>Ac tristique libero volutpat at</li>
|
|
</ul>
|
|
</li>
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
|
<li>Aenean sit amet erat nunc</li>
|
|
<li>Eget porttitor lorem</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<h3 translate>Ordered</h3>
|
|
<div class="bs-component">
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit</li>
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
|
<li>Aenean sit amet erat nunc</li>
|
|
<li>Eget porttitor lorem</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<h3 translate>Unstyled</h3>
|
|
<div class="bs-component">
|
|
<ul class="list-unstyled">
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit
|
|
<ul>
|
|
<li>Phasellus iaculis neque</li>
|
|
<li>Purus sodales ultricies</li>
|
|
<li>Vestibulum laoreet porttitor sem</li>
|
|
<li>Ac tristique libero volutpat at</li>
|
|
</ul>
|
|
</li>
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
|
<li>Aenean sit amet erat nunc</li>
|
|
<li>Eget porttitor lorem</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<h3 translate>Inline</h3>
|
|
<div class="bs-component">
|
|
<ul class="list-inline">
|
|
<li>Lorem ipsum</li>
|
|
<li>Phasellus iaculis</li>
|
|
<li>Nulla volutpat</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<h3 translate>Definition list</h3>
|
|
<div class="bs-component">
|
|
<dl>
|
|
<dt translate>Description lists</dt>
|
|
<dd translate>A description list is perfect for defining terms.</dd>
|
|
<dt>Euismod</dt>
|
|
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
|
|
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
|
<dt>Malesuada porta</dt>
|
|
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<h3 translate>Horizontal Definition List</h3>
|
|
<div class="bs-component">
|
|
<dl class="dl-horizontal">
|
|
<dt translate>Description lists</dt>
|
|
<dd translate>A description list is perfect for defining terms.</dd>
|
|
<dt>Euismod</dt>
|
|
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
|
|
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
|
<dt>Malesuada porta</dt>
|
|
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
|
<dt>Felis euismod semper eget lacinia</dt>
|
|
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dialogs
|
|
================================================== -->
|
|
<div class="bs-docs-section">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1 translate id="dialogs">Dialogs</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-10 col-lg-offset-2">
|
|
<h2 translate>Popovers</h2>
|
|
<div class="bs-component">
|
|
<button translate type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
|
|
<button translate type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
|
|
<button translate type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivam sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
|
|
<button translate type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
|
|
</div>
|
|
<h2 translate>Tooltips</h2>
|
|
<div class="bs-component">
|
|
<button translate type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Left</button>
|
|
<button translate type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top</button>
|
|
<button translate type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Bottom</button>
|
|
<button translate type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 translate>Modals</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="bs-component">
|
|
<div class="modal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
<span class="fa fa-close"></span>
|
|
</button>
|
|
<h4 translate class="modal-title">Standard Modal</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p translate>One fine body…</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button translate type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
<button translate type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="modal">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
<span class="fa fa-close"></span>
|
|
</button>
|
|
<h4 translate class="modal-title">Small Modal</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p translate>One small body…</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button translate type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
<button translate type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-2">
|
|
<div class="bs-component">
|
|
<div class="modal">
|
|
<div class="modal-dialog modal-xs">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
<span class="fa fa-close"></span>
|
|
</button>
|
|
<h4 translate class="modal-title">XS</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p translate>One tiny body…</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button translate type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-10">
|
|
<div class="bs-component">
|
|
<div class="modal">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
<span class="fa fa-close"></span>
|
|
</button>
|
|
<h4 translate class="modal-title">Large Modal</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p translate>One large body…</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button translate type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
<button translate type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<div class="modal">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
<span class="fa fa-close"></span>
|
|
</button>
|
|
<h4 translate class="modal-title">XL Modal</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p translate>One super large body…</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button translate type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
<button translate type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="source-modal" class="modal fade">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h4 translate class="modal-title">Source Code</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<pre></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|