mirror of https://github.com/Squidex/squidex.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1429 lines
74 KiB
1429 lines
74 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Squidex theme</title>
|
|
|
|
<meta content="width=device-width, initial-scale=1" name="viewport">
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
|
|
|
|
<style>
|
|
body {
|
|
background: white !important;
|
|
}
|
|
|
|
.bs-docs-section {
|
|
margin-top: 6em;
|
|
}
|
|
|
|
.bs-component .card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.bs-component+.bs-component {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.bs-component {
|
|
position: relative;
|
|
}
|
|
|
|
.bs-component .modal {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.progress {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="bs-docs-section clearfix">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Navbars</h1>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
|
|
<button type="button" class="navbar-toggler navbar-toggler-right">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Features</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Pricing</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">About</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<form class="form-inline">
|
|
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
|
<button type="button" class="btn btn-secondary my-2 my-sm-0">Search</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<nav class="navbar navbar-toggleable-md navbar-dark bg-inverse">
|
|
<button type="button" class="navbar-toggler navbar-toggler-right">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Features</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Pricing</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">About</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<form class="form-inline">
|
|
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
|
<button type="button" class="btn btn-secondary my-2 my-sm-0">Search</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="page-header">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1>Buttons</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-7">
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-secondary">Secondary</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>
|
|
<a class="btn btn-link">Link</a>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-text-primary">Primary</button>
|
|
<button type="button" class="btn btn-text-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-text-success">Success</button>
|
|
<button type="button" class="btn btn-text-info">Info</button>
|
|
<button type="button" class="btn btn-text-warning">Warning</button>
|
|
<button type="button" class="btn btn-text-danger">Danger</button>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-primary disabled">Primary</button>
|
|
<button type="button" class="btn btn-secondary disabled">Secondary</button>
|
|
<button type="button" class="btn btn-success disabled">Success</button>
|
|
<button type="button" class="btn btn-info disabled">Info</button>
|
|
<button type="button" class="btn btn-warning disabled">Warning</button>
|
|
<button type="button" class="btn btn-danger disabled">Danger</button>
|
|
</p>
|
|
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-outline-primary">Primary</button>
|
|
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-outline-success">Success</button>
|
|
<button type="button" class="btn btn-outline-info">Info</button>
|
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
|
<button type="button" class="btn btn-outline-danger">Danger</button>
|
|
</p>
|
|
|
|
<div class="bs-component">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary dropdown-toggle"></button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-success dropdown-toggle"></button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-info dropdown-toggle"></button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-danger dropdown-toggle"></button>
|
|
<div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
<a class="dropdown-item" href="#">Dropdown link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
|
<button type="button" class="btn btn-primary">Default button</button>
|
|
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-lg-5">
|
|
<p class="bs-component">
|
|
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
|
</p>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-primary">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-warning">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-danger">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-success">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<button type="button" class="btn btn-toggle btn-info">
|
|
Active
|
|
</button>
|
|
<button type="button" class="btn btn-toggle">
|
|
Inactive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary active">
|
|
<input type="checkbox" checked> Checkbox 1
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="checkbox"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="checkbox"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary active">
|
|
<input type="radio" name="options" checked> Radio 1
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="options"> Radio 2
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="options"> Radio 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<div class="btn-group-vertical" data-toggle="buttons">
|
|
<button type="button" class="btn btn-primary">Button</button>
|
|
<button type="button" class="btn btn-primary">Button</button>
|
|
<button type="button" class="btn btn-primary">Button</button>
|
|
<button type="button" class="btn btn-primary">Button</button>
|
|
<button type="button" class="btn btn-primary">Button</button>
|
|
<button type="button" class="btn btn-primary">Button</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-group" role="group" aria-label="Basic example">
|
|
<button type="button" class="btn btn-secondary">Left</button>
|
|
<button type="button" class="btn btn-secondary">Middle</button>
|
|
<button type="button" class="btn btn-secondary">Right</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-component" style="margin-bottom: 15px">
|
|
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
|
<div class="btn-group" role="group" aria-label="First group">
|
|
<button type="button" class="btn btn-secondary">1</button>
|
|
<button type="button" class="btn btn-secondary">2</button>
|
|
<button type="button" class="btn btn-secondary">3</button>
|
|
<button type="button" class="btn btn-secondary">4</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" role="group" aria-label="Second group">
|
|
<button type="button" class="btn btn-secondary">5</button>
|
|
<button type="button" class="btn btn-secondary">6</button>
|
|
<button type="button" class="btn btn-secondary">7</button>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" role="group" aria-label="Third group">
|
|
<button type="button" class="btn btn-secondary">8</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Typography</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
<h3>Heading <small class="text-muted">with muted text</small></h3>
|
|
|
|
<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>Example body text</h2>
|
|
|
|
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
|
<p>The following is <strong>rendered as bold text</strong>.</p>
|
|
<p>The following is <em>rendered as italicized text</em>.</p>
|
|
<p>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>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>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Blockquotes</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<blockquote class="blockquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<blockquote class="blockquote blockquote-reverse">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Tables</h1>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<table class="table table-striped table-hover table-bordered">
|
|
<thead class="thead-inverse">
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
<th>Column heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-info">
|
|
<td>3</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-success">
|
|
<td>4</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-danger">
|
|
<td>5</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-warning">
|
|
<td>6</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="table-active">
|
|
<td>7</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Forms</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<form>
|
|
<fieldset>
|
|
<legend>Legend</legend>
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
|
|
<small class="text-muted form-text">We'll never share your email with anyone else.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="underlinedInputHelp">Underlined</label>
|
|
<input type="text" class="form-control form-underlined" name="xyz" aria-describedby="underlinedInputHelp" placeholder="Enter text">
|
|
<small class="text-muted form-text">Input with just a line.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" placeholder="Password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleSelect1">Example select</label>
|
|
<select class="form-control">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleSelect2">Example multiple select</label>
|
|
<select multiple class="form-control">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleTextarea">Example textarea</label>
|
|
<textarea class="form-control" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleInputFile">File input</label>
|
|
<input type="file" class="form-control-file" aria-describedby="fileHelp">
|
|
<sqx-form-hint>This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
|
</div>
|
|
<fieldset class="form-group">
|
|
<legend>Radio buttons</legend>
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input type="radio" class="form-check-input" name="optionsRadios" value="option1" checked>
|
|
Option one is this and that—be sure to include why it's great
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input type="radio" class="form-check-input" name="optionsRadios" value="option2">
|
|
Option two can be something else and selecting it will deselect option one
|
|
</label>
|
|
</div>
|
|
<div class="form-check disabled">
|
|
<label class="form-check-label">
|
|
<input type="radio" class="form-check-input" name="optionsRadios" value="option3" disabled>
|
|
Option three is disabled
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<div class="form-check">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox">
|
|
Check me out
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-lg-offset-1">
|
|
<form class="bs-component">
|
|
<div class="form-group">
|
|
<fieldset disabled>
|
|
<label class="control-label" for="disabledInput">Disabled input</label>
|
|
<input class="form-control" type="text" placeholder="Disabled input here..." disabled="">
|
|
</fieldset>
|
|
|
|
<fieldset disabled>
|
|
<label class="control-label" for="disabledInput">Disabled underlined input</label>
|
|
<input class="form-control form-underlined" type="text" placeholder="Disabled input here..." disabled="">
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<fieldset>
|
|
<label class="control-label" for="readOnlyInput">Readonly input</label>
|
|
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<label class="control-label" for="readOnlyInput">Readonly underlined input</label>
|
|
<input class="form-control form-underlined" type="text" placeholder="Readonly input here…" readonly>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="form-group has-success">
|
|
<label class="form-control-label" for="inputSuccess1">Input with success</label>
|
|
<input type="text" class="form-control is-valid">
|
|
<div class="valid-feedback">Success! You've done it.</div>
|
|
</div>
|
|
|
|
<div class="form-group has-warning">
|
|
<label class="form-control-label" for="inputWarning1">Input with warning</label>
|
|
<input type="text" class="form-control is-invalid">
|
|
<div class="invalid-feedback">Shucks, try again.</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
|
|
<input class="form-control form-control-lg" type="text">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-form-label" for="inputDefault">Default input</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
|
|
<input class="form-control form-control-sm" type="text">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="control-label">Input addons</label>
|
|
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">$</span>
|
|
</div>
|
|
|
|
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
|
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Navs</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="margin-bottom: 2rem">
|
|
<div class="col-lg-6">
|
|
<h2>Tabs</h2>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#home">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#profile">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<h2>Pills</h2>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br>
|
|
<div class="bs-component">
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h2>Breadcrumbs</h2>
|
|
<div class="bs-component">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item active">Home</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active">Library</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
<li class="breadcrumb-item done"><a href="#">Others</a></li>
|
|
<li class="breadcrumb-item active">Data</li>
|
|
</ol>
|
|
<ol class="breadcrumb steps">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item done"><a href="#">Library</a></li>
|
|
<li class="breadcrumb-item active">Others</li>
|
|
<li class="breadcrumb-item">Data</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<h2>Pagination</h2>
|
|
<div class="bs-component">
|
|
<div>
|
|
<ul class="pagination">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<ul class="pagination pagination-lg">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<ul class="pagination pagination-sm">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#">«</a>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" href="#">1</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">2</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">3</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">4</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">5</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">»</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Indicators</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Alerts</h2>
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-warning mt-2">
|
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
<h4>Warning!</h4>
|
|
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="alert alert-dismissible alert-danger mt-2">
|
|
<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 class="alert alert-dismissible alert-success mt-2">
|
|
<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 class="alert alert-dismissible alert-info mt-2">
|
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
|
<i class="icon-info-outline"></i> <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>
|
|
<h2>Badges</h2>
|
|
<div class="bs-component" style="margin-bottom: 40px">
|
|
<span class="badge badge-primary">Primary</span>
|
|
<span class="badge badge-secondary">Secondary</span>
|
|
<span class="badge badge-success">Success</span>
|
|
<span class="badge badge-danger">Danger</span>
|
|
<span class="badge badge-warning">Warning</span>
|
|
<span class="badge badge-info">Info</span>
|
|
<span class="badge badge-light">Light</span>
|
|
<span class="badge badge-dark">Dark</span>
|
|
</div>
|
|
<div class="bs-component">
|
|
<span class="badge badge-pill badge-primary">Primary</span>
|
|
<span class="badge badge-pill badge-secondary">Secondary</span>
|
|
<span class="badge badge-pill badge-success">Success</span>
|
|
<span class="badge badge-pill badge-danger">Danger</span>
|
|
<span class="badge badge-pill badge-warning">Warning</span>
|
|
<span class="badge badge-pill badge-info">Info</span>
|
|
<span class="badge badge-pill badge-light">Light</span>
|
|
<span class="badge badge-pill badge-dark">Dark</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Progress</h1>
|
|
</div>
|
|
|
|
<h3>Basic</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Contextual alternatives</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Multiple bars</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Striped</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
|
|
aria-valuenow="10"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"
|
|
aria-valuenow="25"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"
|
|
aria-valuenow="50"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"
|
|
aria-valuenow="75"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"
|
|
aria-valuenow="100"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Animated</h3>
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
|
aria-valuenow="75"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100" style="width: 75%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Containers</h1>
|
|
</div>
|
|
<div class="bs-component">
|
|
<div class="jumbotron">
|
|
<h1 class="display-3">Jumbotron</h1>
|
|
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
|
<p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>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="tag tag-default tag-pill float-xs-right">14</span> Cras justo odio
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="tag tag-default tag-pill float-xs-right">2</span> Dapibus ac facilisis in
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="tag tag-default tag-pill float-xs-right">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 list-group-item-action active">Cras justo odio</a>
|
|
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
|
<a href="#" class="list-group-item list-group-item-action disabled">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 list-group-item-action active">
|
|
<h4 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 list-group-item-action">
|
|
<h4 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>Cards</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card text-white bg-primary text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-success text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-info text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-warning text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-danger text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card border-primary text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card border-success text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card border-info text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card border-warning text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<div class="card border-danger text-xs-center">
|
|
<div class="card-body">
|
|
<blockquote class="card-bodyquote">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="bs-component">
|
|
<div class="card">
|
|
<h3 class="card-header">Card header</h3>
|
|
<div class="card-body">
|
|
<h5 class="card-title">Special title treatment</h5>
|
|
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
|
</div>
|
|
|
|
<img style="height: 200px; width: 100%; display: block" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
|
|
|
|
<div class="card-body">
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="card-link">Card link</a>
|
|
<a href="#" class="card-link">Another link</a>
|
|
</div>
|
|
|
|
<div class="card-footer text-muted text-xs-center">
|
|
2 days ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Dialogs</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h2>Modals</h2>
|
|
<div class="bs-component">
|
|
<div class="modal" style="position: relative; width: 100%; height: 500px">
|
|
<div class="modal-backdrop show" style="position: absolute"></div>
|
|
|
|
<div class="modal-dialog modal-lg" style="position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px">
|
|
<div class="modal-content">
|
|
<div class="modal-header" *ngIf="showHeader">
|
|
<h4 class="modal-title">
|
|
Title
|
|
</h4>
|
|
|
|
<button type="button" class="close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-tabs clearfix">
|
|
<ul class="nav nav-tabs2">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#home">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#profile">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
Modal body text goes here.
|
|
</div>
|
|
|
|
<div class="modal-footer" [hidden]="!showFooter">
|
|
<div class="clearfix" #footerElement>
|
|
<button type="button" class="float-right btn btn-primary">Save changes</button>
|
|
<button type="button" class="float-left btn btn-secondary">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="page-header">
|
|
<h1>Modals</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Default</h2>
|
|
<div class="bs-component">
|
|
<div class="panel panel-light">
|
|
<div class="panel-header">
|
|
<div class="panel-title-row">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-success">New</button>
|
|
</div>
|
|
|
|
<h3 class="panel-title">
|
|
Title
|
|
</h3>
|
|
</div>
|
|
|
|
<a class="panel-close">
|
|
<i class="icon-close"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="panel-main">
|
|
<div class="panel-content">
|
|
<div class="panel-alert panel-alert-danger">
|
|
Alert
|
|
</div>
|
|
|
|
<ul>
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
<li>Three</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="panel-sidebar">
|
|
<a href="#" class="panel-link">
|
|
<i class="icon-help2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<h2>Light</h2>
|
|
<div class="bs-component">
|
|
<div class="panel panel-light">
|
|
<div class="panel-header">
|
|
<div class="panel-title-row">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-success">New</button>
|
|
</div>
|
|
|
|
<h3 class="panel-title">
|
|
Title
|
|
</h3>
|
|
</div>
|
|
|
|
<a class="panel-close">
|
|
<i class="icon-close"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="panel-main">
|
|
<div class="panel-content panel-content-blank">
|
|
<ul class="nav nav-panel nav-dark-bordered flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link">Link 1
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">Link 2
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active">Link 3
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">Link 4
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<h2>Dark</h2>
|
|
<div class="bs-component">
|
|
<div class="panel panel-dark">
|
|
<div class="panel-header large">
|
|
<div class="panel-title-row">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-success">New</button>
|
|
</div>
|
|
|
|
<h3 class="panel-title">
|
|
Title
|
|
</h3>
|
|
</div>
|
|
|
|
<a class="panel-close">
|
|
<i class="icon-close"></i>
|
|
</a>
|
|
|
|
<div class="panel-header-row">
|
|
<div class="search-form">
|
|
<input class="form-control form-control-dark" placeholder="Search here..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-main">
|
|
<div class="panel-content">
|
|
<ul class="nav nav-panel nav-dark nav-dark-bordered flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link">Link 1
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">Link 2
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active">Link 3
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">Link 4
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|