413 lines
18 KiB
HTML
413 lines
18 KiB
HTML
{% extends "layouts/base.html" %}
|
|
|
|
{% block title %} UI Buttons {% endblock %}
|
|
|
|
<!-- Specific Page CSS goes HERE -->
|
|
{% block stylesheets %}{% endblock stylesheets %}
|
|
|
|
{% block content %}
|
|
|
|
<main class="content">
|
|
<div class="container-fluid p-0">
|
|
|
|
<h1 class="h3 mb-3">Buttons</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Basic Buttons</h5>
|
|
<h6 class="card-subtitle text-muted">Default Bootstrap buttons style.</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<button class="btn btn-primary">Primary</button>
|
|
<button class="btn btn-secondary">Secondary</button>
|
|
<button class="btn btn-success">Success</button>
|
|
<button class="btn btn-danger">Danger</button>
|
|
<button class="btn btn-warning">Warning</button>
|
|
<button class="btn btn-info">Info</button>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-primary" disabled>Primary</button>
|
|
<button class="btn btn-secondary" disabled>Secondary</button>
|
|
<button class="btn btn-success" disabled>Success</button>
|
|
<button class="btn btn-danger" disabled>Danger</button>
|
|
<button class="btn btn-warning" disabled>Warning</button>
|
|
<button class="btn btn-info" disabled>Info</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Rounded Buttons</h5>
|
|
<h6 class="card-subtitle text-muted">Rounded Bootstrap buttons.</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<button class="btn btn-pill btn-primary">Primary</button>
|
|
<button class="btn btn-pill btn-secondary">Secondary</button>
|
|
<button class="btn btn-pill btn-success">Success</button>
|
|
<button class="btn btn-pill btn-danger">Danger</button>
|
|
<button class="btn btn-pill btn-warning">Warning</button>
|
|
<button class="btn btn-pill btn-info">Info</button>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-pill btn-primary" disabled>Primary</button>
|
|
<button class="btn btn-pill btn-secondary" disabled>Secondary</button>
|
|
<button class="btn btn-pill btn-success" disabled>Success</button>
|
|
<button class="btn btn-pill btn-danger" disabled>Danger</button>
|
|
<button class="btn btn-pill btn-warning" disabled>Warning</button>
|
|
<button class="btn btn-pill btn-info" disabled>Info</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Outline Buttons</h5>
|
|
<h6 class="card-subtitle text-muted">Buttons without background color.</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<button class="btn btn-outline-primary">Primary</button>
|
|
<button class="btn btn-outline-secondary">Secondary</button>
|
|
<button class="btn btn-outline-success">Success</button>
|
|
<button class="btn btn-outline-danger">Danger</button>
|
|
<button class="btn btn-outline-warning">Warning</button>
|
|
<button class="btn btn-outline-info">Info</button>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-outline-primary" disabled>Primary</button>
|
|
<button class="btn btn-outline-secondary" disabled>Secondary</button>
|
|
<button class="btn btn-outline-success" disabled>Success</button>
|
|
<button class="btn btn-outline-danger" disabled>Danger</button>
|
|
<button class="btn btn-outline-warning" disabled>Warning</button>
|
|
<button class="btn btn-outline-info" disabled>Info</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Square Buttons</h5>
|
|
<h6 class="card-subtitle text-muted">Buttons without border radius.</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<button class="btn btn-square btn-primary">Primary</button>
|
|
<button class="btn btn-square btn-secondary">Secondary</button>
|
|
<button class="btn btn-square btn-success">Success</button>
|
|
<button class="btn btn-square btn-danger">Danger</button>
|
|
<button class="btn btn-square btn-warning">Warning</button>
|
|
<button class="btn btn-square btn-info">Info</button>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-square btn-primary" disabled>Primary</button>
|
|
<button class="btn btn-square btn-secondary" disabled>Secondary</button>
|
|
<button class="btn btn-square btn-success" disabled>Success</button>
|
|
<button class="btn btn-square btn-danger" disabled>Danger</button>
|
|
<button class="btn btn-square btn-warning" disabled>Warning</button>
|
|
<button class="btn btn-square btn-info" disabled>Info</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Icon Buttons</h5>
|
|
<h6 class="card-subtitle text-muted">Default Bootstrap buttons with icons.</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<button class="btn btn-primary"><i class="far fa-smile"></i> Primary</button>
|
|
<button class="btn btn-secondary"><i class="fas fa-globe-americas"></i> Secondary</button>
|
|
<button class="btn btn-success"><i class="fas fa-check"></i> Success</button>
|
|
<button class="btn btn-danger"><i class="fas fa-times"></i> Danger</button>
|
|
<button class="btn btn-warning"><i class="fas fa-exclamation"></i> Warning</button>
|
|
<button class="btn btn-info"><i class="fas fa-info"></i> Info</button>
|
|
</div>
|
|
|
|
<div>
|
|
<button class="btn btn-primary"><i class="far fa-smile"></i></button>
|
|
<button class="btn btn-secondary"><i class="fas fa-globe-americas"></i></button>
|
|
<button class="btn btn-success"><i class="fas fa-check"></i></button>
|
|
<button class="btn btn-danger"><i class="fas fa-times"></i></button>
|
|
<button class="btn btn-warning"><i class="fas fa-exclamation"></i></button>
|
|
<button class="btn btn-info"><i class="fas fa-info"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Button Sizes</h5>
|
|
<h6 class="card-subtitle text-muted">Fancy larger or smaller buttons.</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<button class="btn btn-primary btn-sm">Small</button>
|
|
<button class="btn btn-primary">Medium</button>
|
|
<button class="btn btn-primary btn-lg">Large</button>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-primary btn-sm"><i class="fas fa-globe-americas"></i> Small</button>
|
|
<button class="btn btn-primary"><i class="fas fa-globe-americas"></i> Medium</button>
|
|
<button class="btn btn-primary btn-lg"><i class="fas fa-globe-americas"></i> Large</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Button Dropdown</h5>
|
|
<h6 class="card-subtitle text-muted">Dropdowns styles with buttons.</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="mb-3">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Primary
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Secondary
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Success
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Danger
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Warning
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Info
|
|
</button>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Primary
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Secondary
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Success
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Danger
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Warning
|
|
</button>
|
|
<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>
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Info
|
|
</button>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Button Group</h5>
|
|
<h6 class="card-subtitle text-muted">Button group components.</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="card-subtitle mb-2 text-muted">Horizontal button group</h6>
|
|
<div class="btn-group btn-group-lg mb-3" role="group" aria-label="Large button group">
|
|
<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>
|
|
<br>
|
|
<div class="btn-group mb-3" role="group" aria-label="Default button group">
|
|
<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>
|
|
<br>
|
|
<div class="btn-group btn-group-sm mb-4" role="group" aria-label="Small button group">
|
|
<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>
|
|
|
|
<h6 class="card-subtitle mb-2 text-muted">Button toolbar</h6>
|
|
<div class="btn-toolbar mb-4" role="toolbar" aria-label="Toolbar with button groups">
|
|
<div class="btn-group mr-2" 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 mr-2" 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>
|
|
|
|
<h6 class="card-subtitle mb-2 text-muted">Vertical button group</h6>
|
|
<div class="btn-toolbar">
|
|
<div class="btn-group-vertical mr-2" role="group" aria-label="Vertical button group">
|
|
<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 class="btn-group-vertical mr-2" role="group" aria-label="Vertical button group">
|
|
<button type="button" class="btn btn-success">Button</button>
|
|
<button type="button" class="btn btn-success">Button</button>
|
|
<button type="button" class="btn btn-success">Button</button>
|
|
</div>
|
|
<div class="btn-group-vertical mr-2" role="group" aria-label="Vertical button group">
|
|
<button type="button" class="btn btn-warning">Button</button>
|
|
<button type="button" class="btn btn-warning">Button</button>
|
|
<button type="button" class="btn btn-warning">Button</button>
|
|
</div>
|
|
<div class="btn-group-vertical mr-2" role="group" aria-label="Vertical button group">
|
|
<button type="button" class="btn btn-danger">Button</button>
|
|
<button type="button" class="btn btn-danger">Button</button>
|
|
<button type="button" class="btn btn-danger">Button</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.row -->
|
|
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock content %}
|
|
|
|
<!-- Specific Page JS goes HERE -->
|
|
{% block javascripts %}{% endblock javascripts %}
|