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.
1700 lines
80 KiB
1700 lines
80 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>
|
|
.page-title h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.bs-section-title {
|
|
font-size: 30px;
|
|
font-weight: lighter;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.bs-section {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.bs-section-white {
|
|
background: white;
|
|
}
|
|
|
|
.bs-component {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.modal-tabs {
|
|
height: 4rem
|
|
}
|
|
|
|
.panel {
|
|
min-height: 500px;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.table-items-row-details::before {
|
|
right: 80px !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="bs-section container">
|
|
<div class="row">
|
|
<div class="col-lg-12 page-title">
|
|
<h1>Squidex Theme</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Navbars</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row bs-component">
|
|
<div class="col-lg-12">
|
|
<nav class="navbar navbar-expand navbar-dark bg-primary">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
|
|
<ul class="navbar-nav ml-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>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row bs-component">
|
|
<div class="col-lg-12">
|
|
<nav class="navbar navbar-expand navbar-light bg-light">
|
|
<a class="navbar-brand" href="#">Navbar</a>
|
|
|
|
<ul class="navbar-nav ml-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>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Buttons</h1>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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">Top</button>
|
|
<button type="button" class="btn btn-primary">Middle</button>
|
|
<button type="button" class="btn btn-primary">Buttom</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>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Typography</h1>
|
|
</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>The following is an abbreviation <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>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Tables</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<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>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Tables2</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<table class="table table-items">
|
|
<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 class="spacer"></tr>
|
|
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
<td>Column content</td>
|
|
</tr>
|
|
<tr class="spacer"></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Forms</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<form>
|
|
<fieldset>
|
|
<legend>Legend</legend>
|
|
|
|
<div class="form-alert form-alert-error">
|
|
<p>Validation error.</p>
|
|
|
|
<ul>
|
|
<li>An user with the same email aready exists.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="bs-component">
|
|
<div class="form-group">
|
|
<label>Email address</label>
|
|
|
|
<input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
|
|
|
|
<small class="text-muted form-text">We will never share your email with anyone else.</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Underlined</label>
|
|
|
|
<input type="text" class="form-control form-underlined" placeholder="Enter text" autocomplete="false">
|
|
|
|
<small class="text-muted form-text">Input with just an underlined.</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
|
|
<input type="password" class="form-control" placeholder="Password" autocomplete="false">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Example custom select</label>
|
|
|
|
<select class="custom-select">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Example custom multiple select</label>
|
|
|
|
<select multiple class="custom-select">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Example textarea</label>
|
|
|
|
<textarea class="form-control" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Custom File input</label>
|
|
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" id="customFile">
|
|
|
|
<label class="custom-file-label" for="customFile">Choose file</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>File input</label>
|
|
|
|
<input type="file" class="form-control-file">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h2>Custom Radio buttons</h2>
|
|
|
|
<div class="custom-control custom-radio">
|
|
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
|
|
<label class="custom-control-label" for="customRadio1">Option 1</label>
|
|
</div>
|
|
|
|
<div class="custom-control custom-radio">
|
|
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
|
|
<label class="custom-control-label" for="customRadio2">Option 2</label>
|
|
</div>
|
|
|
|
<div class="custom-control custom-radio">
|
|
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
|
|
<label class="custom-control-label" for="customRadio3">Option 3 (disabled)</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h2>Custom Checkboxes</h2>
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" id="customCheckbox1" name="customRadio" class="custom-control-input">
|
|
<label class="custom-control-label" for="customCheckbox1">Option 1</label>
|
|
</div>
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" id="customCheckbox2" name="customRadio" class="custom-control-input">
|
|
<label class="custom-control-label" for="customCheckbox2">Option 2</label>
|
|
</div>
|
|
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" id="customCheckbox3" name="customRadio" class="custom-control-input" disabled>
|
|
<label class="custom-control-label" for="customCheckbox3">Option 3 (disabled)</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-lg-offset-1">
|
|
<form class="bs-component">
|
|
<div class="form-group">
|
|
<label>Disabled input</label>
|
|
|
|
<input class="form-control" type="text" placeholder="Disabled input here..." disabled>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Disabled underlined input</label>
|
|
|
|
<input class="form-control form-underlined" type="text" placeholder="Disabled input here..." disabled>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Readonly input</label>
|
|
|
|
<input class="form-control" type="text" placeholder="Disabled input here..." readonly>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Readonly underlined input</label>
|
|
|
|
<input class="form-control form-underlined" type="text" placeholder="Disabled input here..." readonly>
|
|
</div>
|
|
|
|
<div class="form-group has-success">
|
|
<label>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>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 has-warning">
|
|
<label>Input with error</label>
|
|
|
|
<div class="errors-container">
|
|
<div class="errors">You have entered an invalid value.</div>
|
|
</div>
|
|
|
|
<input type="text" class="form-control is-invalid">
|
|
</div>
|
|
|
|
<div class="form-group has-warning">
|
|
<label>Input with hint</label>
|
|
|
|
<input type="text" class="form-control">
|
|
|
|
<div class="alert alert-hint mt-2">
|
|
<i class="icon-info-outline"></i> The app name cannot be changed later.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Large input</label>
|
|
|
|
<input class="form-control form-control-lg" type="text">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Default input</label>
|
|
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Small input</label>
|
|
|
|
<input class="form-control form-control-sm" type="text">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<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>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Forms</h1>
|
|
</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">Dropdown</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bs-component">
|
|
<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">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">Dropdown</a>
|
|
</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 flex-column">
|
|
<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">Dropdown</a>
|
|
</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 class="row">
|
|
<div class="col-lg-6">
|
|
<h2>Dropdown</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="dropdown-menu" style="position: static; display: block;">
|
|
<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 dropdown-item-delete" href="#">Separated link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Indicators</h1>
|
|
</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>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Progress</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2>Basic</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Contextual alternatives</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 25%"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 50%"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Multiple bars</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar" role="progressbar" style="width: 15%"></div>
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 30%"></div>
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 20%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Striped</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"></div>
|
|
</div>
|
|
<div class="progress mb-1">
|
|
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Animated</h2>
|
|
|
|
<div class="bs-component">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section bs-section-white">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Containers</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Cards</h1>
|
|
</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 href="#" 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>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Modals</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<div class="modal" style="position: relative; width: 100%; height: 500px; display: block;">
|
|
<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; display: block;">
|
|
<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">
|
|
<div class="clearfix">
|
|
<button type="button" class="float-right btn btn-primary">Save changes</button>
|
|
|
|
<button type="button" class="float-left btn btn-text-secondary">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Lists</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="bs-component">
|
|
<div class="table-items-row table-items-row-expandable">
|
|
<div class="table-items-row-summary">
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
My Item 1
|
|
</div>
|
|
<div class="col col-auto">
|
|
<button type="button" class="btn btn-secondary table-items-edit-button mr-1">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-danger"">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-items-row-details">
|
|
<div class="table-items-row-details-tabs clearfix">
|
|
<ul class="nav nav-tabs2">
|
|
<li class="nav-item">
|
|
<a class="nav-link active">Tab1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">Tab2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link">Tab3</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="float-right">
|
|
<button type="reset" class="btn btn-text-secondary">Cancel</button>
|
|
<button type="submit" class="btn btn-primary ml-1">Save</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-items-row-details-tab">
|
|
Text
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row table-items-row-expandable">
|
|
<div class="table-items-row-summary">
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
My Item 2
|
|
</div>
|
|
<div class="col col-auto">
|
|
<button type="button" class="btn btn-secondary table-items-edit-button mr-1">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-danger"">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row table-items-row-expandable">
|
|
<div class="table-items-row-summary">
|
|
<div class="row no-gutters">
|
|
<div class="col col-name">
|
|
My Item 3
|
|
</div>
|
|
<div class="col col-auto">
|
|
<button type="button" class="btn btn-secondary table-items-edit-button mr-1">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-danger"">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row">
|
|
<div class="row no-gutters">
|
|
<div class="col col-name">
|
|
My Item 4
|
|
</div>
|
|
<div class="col col-auto">
|
|
<button type="button" class="btn btn-secondary table-items-edit-button mr-1">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-danger"">
|
|
<i class="icon-bin2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-footer">
|
|
<form>
|
|
<div class="row no-gutters">
|
|
<div class="col">
|
|
<input class="form-control" placeholder="Enter workflow name">
|
|
</div>
|
|
<div class="col-auto pl-1">
|
|
<button ype="submit" class="btn btn-success">Add Workflow</button>
|
|
</div>
|
|
<div class="col-auto pl-1">
|
|
<button type="reset" class="btn btn-text-secondary">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h1 class="bs-section-title">Panels</h1>
|
|
</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 grid">
|
|
<div class="panel-alert panel-alert-danger">
|
|
Alert
|
|
</div>
|
|
</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">
|
|
Text
|
|
</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 d-flex justify-content-between">
|
|
Link 1
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link d-flex justify-content-between">
|
|
Link 2
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link d-flex justify-content-between">
|
|
Link 3
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link d-flex justify-content-between">
|
|
Link 4
|
|
<i class="icon-angle-right"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|