mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
555 lines
22 KiB
HTML
555 lines
22 KiB
HTML
---
|
|
title: All elements
|
|
layout: default
|
|
---
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h1>h1. Bootstrap heading</h1>
|
|
<h2>h2. Bootstrap heading</h2>
|
|
<h3>h3. Bootstrap heading</h3>
|
|
<h4>h4. Bootstrap heading</h4>
|
|
<h5>h5. Bootstrap heading</h5>
|
|
<h6>h6. Bootstrap heading</h6>
|
|
|
|
<h3>
|
|
Fancy display heading
|
|
<small class="text-muted">With faded secondary text</small>
|
|
</h3>
|
|
|
|
<h1 class="display-1">Display 1</h1>
|
|
<h1 class="display-2">Display 2</h1>
|
|
<h1 class="display-3">Display 3</h1>
|
|
<h1 class="display-4">Display 4</h1>
|
|
|
|
<p class="lead">
|
|
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
|
</p>
|
|
|
|
<p>You can use the mark tag to
|
|
<mark>highlight</mark>
|
|
text.
|
|
</p>
|
|
<p>
|
|
<del>This line of text is meant to be treated as deleted text.</del>
|
|
</p>
|
|
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
|
<p>
|
|
<ins>This line of text is meant to be treated as an addition to the document.</ins>
|
|
</p>
|
|
<p><u>This line of text will render as underlined</u></p>
|
|
<p>
|
|
<small>This line of text is meant to be treated as fine print.</small>
|
|
</p>
|
|
<p><strong>This line rendered as bold text.</strong></p>
|
|
<p><em>This line rendered as italicized text.</em></p>
|
|
|
|
<blockquote class="blockquote">
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
</blockquote>
|
|
|
|
<blockquote class="blockquote">
|
|
<p class="mb-0">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>
|
|
|
|
|
|
<ul class="list-unstyled">
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit
|
|
<ul>
|
|
<li>Phasellus iaculis neque</li>
|
|
<li>Purus sodales ultricies</li>
|
|
<li>Vestibulum laoreet porttitor sem</li>
|
|
<li>Ac tristique libero volutpat at</li>
|
|
</ul>
|
|
</li>
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
|
<li>Aenean sit amet erat nunc</li>
|
|
<li>Eget porttitor lorem</li>
|
|
</ul>
|
|
|
|
<dl class="row">
|
|
<dt class="col-sm-3">Description lists</dt>
|
|
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
|
|
|
<dt class="col-sm-3">Euismod</dt>
|
|
<dd class="col-sm-9">
|
|
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
|
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
|
</dd>
|
|
|
|
<dt class="col-sm-3">Malesuada porta</dt>
|
|
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
|
|
|
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
|
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
|
|
|
<dt class="col-sm-3">Nesting</dt>
|
|
<dd class="col-sm-9">
|
|
<dl class="row">
|
|
<dt class="col-sm-4">Nested definition list</dt>
|
|
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
|
|
<p>For example, <code><section></code> should be wrapped as inline.</p>
|
|
|
|
<pre><code><p>Sample text here...</p>
|
|
<p>And another line of sample text here...</p>
|
|
</code></pre>
|
|
|
|
<p>
|
|
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
|
</p>
|
|
|
|
<p>
|
|
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
|
|
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
|
</p>
|
|
|
|
<p>
|
|
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
|
</p>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Username</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Larry</td>
|
|
<td>the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Username</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td>Larry</td>
|
|
<td>the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<figure class="figure">
|
|
<img src="https://placehold.it/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
|
|
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
|
</figure>
|
|
|
|
<div class="alert alert-primary" role="alert">
|
|
This is a primary alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-secondary" role="alert">
|
|
This is a secondary alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-success" role="alert">
|
|
This is a success alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
This is a danger alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-warning" role="alert">
|
|
This is a warning alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-info" role="alert">
|
|
This is a info alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-light" role="alert">
|
|
This is a light alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-dark" role="alert">
|
|
This is a dark alert with <a href="javascript:void(0)" class="alert-link">an example link</a>. Give it a click if you like.
|
|
</div>
|
|
|
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
|
</div>
|
|
|
|
<h1>Example heading <span class="badge badge-default">New</span></h1>
|
|
<h2>Example heading <span class="badge badge-default">New</span></h2>
|
|
<h3>Example heading <span class="badge badge-default">New</span></h3>
|
|
<h4>Example heading <span class="badge badge-default">New</span></h4>
|
|
<h5>Example heading <span class="badge badge-default">New</span></h5>
|
|
<h6>Example heading <span class="badge badge-default">New</span></h6>
|
|
|
|
<p>
|
|
<button class="btn">
|
|
Profile <span class="badge badge-default">9</span>
|
|
<span class="sr-only">unread messages</span>
|
|
</button>
|
|
</p>
|
|
|
|
<p>
|
|
<span class="badge badge-primary">Primary</span>
|
|
<span class="badge badge-default">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>
|
|
</p>
|
|
|
|
<p>
|
|
<span class="badge badge-pill badge-primary">Primary</span>
|
|
<span class="badge badge-pill badge-default">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>
|
|
</p>
|
|
|
|
<p>
|
|
<a href="javascript:void(0)" class="badge badge-primary">Primary</a>
|
|
<a href="javascript:void(0)" class="badge badge-default">Secondary</a>
|
|
<a href="javascript:void(0)" class="badge badge-success">Success</a>
|
|
<a href="javascript:void(0)" class="badge badge-danger">Danger</a>
|
|
<a href="javascript:void(0)" class="badge badge-warning">Warning</a>
|
|
<a href="javascript:void(0)" class="badge badge-info">Info</a>
|
|
<a href="javascript:void(0)" class="badge badge-light">Light</a>
|
|
<a href="javascript:void(0)" class="badge badge-dark">Dark</a>
|
|
</p>
|
|
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item active">Home</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
|
|
<li class="breadcrumb-item active">Library</li>
|
|
</ol>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
|
|
<li class="breadcrumb-item active">Data</li>
|
|
</ol>
|
|
|
|
<nav class="breadcrumb">
|
|
<a class="breadcrumb-item" href="javascript:void(0)">Home</a>
|
|
<a class="breadcrumb-item" href="javascript:void(0)">Library</a>
|
|
<a class="breadcrumb-item" href="javascript:void(0)">Data</a>
|
|
<span class="breadcrumb-item active">Bootstrap</span>
|
|
</nav>
|
|
|
|
<p>
|
|
<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-danger">Danger</button>
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<button type="button" class="btn btn-light">Light</button>
|
|
<button type="button" class="btn btn-dark">Dark</button>
|
|
|
|
<button type="button" class="btn btn-link">Link</button>
|
|
</p>
|
|
|
|
<p>
|
|
<a class="btn btn-primary" href="javascript:void(0)" role="button">Link</a>
|
|
<button class="btn btn-primary" type="submit">Button</button>
|
|
<input class="btn btn-primary" type="button" value="Input">
|
|
<input class="btn btn-primary" type="submit" value="Submit">
|
|
<input class="btn btn-primary" type="reset" value="Reset">
|
|
</p>
|
|
|
|
<p>
|
|
<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-danger">Danger</button>
|
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
|
<button type="button" class="btn btn-outline-info">Info</button>
|
|
<button type="button" class="btn btn-outline-light">Light</button>
|
|
<button type="button" class="btn btn-outline-dark">Dark</button>
|
|
</p>
|
|
|
|
<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 class="card my-4" style="width: 20rem;">
|
|
<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<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="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card my-4">
|
|
<div class="card-body">
|
|
This is some text within a card block.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row my-4">
|
|
<div class="col-sm-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card text-center my-4">
|
|
<div class="card-header">
|
|
<ul class="nav nav-tabs card-header-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="javascript:void(0)">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="javascript:void(0)">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Primary card title</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Secondary card title</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-success mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Success card title</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Danger card title</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Warning card title</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-info mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Info card title</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-light mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Light card title</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
|
|
<div class="card-header">Header</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Dark card title</h4>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-deck">
|
|
<div class="card">
|
|
<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit
|
|
longer.</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<img class="card-img-top" src="https://placehold.it/318x180" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer
|
|
content than the first to show that equal height action.</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress my-4">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
|
</div>
|
|
|
|
<div class="progress my-4">
|
|
<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 my-4">
|
|
<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 my-4">
|
|
<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 my-4">
|
|
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
|
|
<div class="progress my-4">
|
|
<div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar progress-bar-animated progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
|
|
aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar progress-bar-animated progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
|
|
aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar progress-bar-animated progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
|
|
aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress my-4">
|
|
<div class="progress-bar progress-bar-animated progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
|
|
aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
|
|
<div class="my-4">
|
|
<div class="dropdown">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false">
|
|
Dropdown button
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="javascript:void(0)">Action</a>
|
|
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
|
|
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-4">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Action
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="javascript:void(0)">Action</a>
|
|
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
|
|
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |