-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e6f96d8
commit 3b855ea
Showing
1 changed file
with
303 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,303 @@ | ||
| {% extends "layouts/base.html" %} | ||
|
|
||
| {% block title %} UI Buttons {% endblock %} | ||
|
|
||
| <!-- Specific Page CSS goes HERE --> | ||
| {% block stylesheets %}{% endblock stylesheets %} | ||
|
|
||
| {% block content %} | ||
|
|
||
| <div class="content"> | ||
| <div class="page-inner"> | ||
| <div class="page-header"> | ||
| <h4 class="page-title">Buttons</h4> | ||
| <ul class="breadcrumbs"> | ||
| <li class="nav-home"> | ||
| <a href="#"> | ||
| <i class="flaticon-home"></i> | ||
| </a> | ||
| </li> | ||
| <li class="separator"> | ||
| <i class="flaticon-right-arrow"></i> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a href="#">Base</a> | ||
| </li> | ||
| <li class="separator"> | ||
| <i class="flaticon-right-arrow"></i> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a href="#">Buttons</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h4 class="card-title">Button Original</h4> | ||
|
|
||
| </div> | ||
| <div class="card-body"> | ||
| <p class="demo"> | ||
| <button class="btn btn-default">Default</button> | ||
|
|
||
| <button class="btn btn-primary">Primary</button> | ||
|
|
||
| <button class="btn btn-secondary">Secondary</button> | ||
|
|
||
| <button class="btn btn-info">Info</button> | ||
|
|
||
| <button class="btn btn-success">Success</button> | ||
|
|
||
| <button class="btn btn-warning">Warning</button> | ||
|
|
||
| <button class="btn btn-danger">Danger</button> | ||
|
|
||
| <button class="btn btn-link">Link</button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h4 class="card-title">Button with Label</h4> | ||
|
|
||
| </div> | ||
| <div class="card-body"> | ||
| <p class="demo"> | ||
| <button class="btn btn-default"> | ||
| <span class="btn-label"> | ||
| <i class="fa fa-archive"></i> | ||
| </span> | ||
| Default | ||
| </button> | ||
|
|
||
| <button class="btn btn-primary"> | ||
| <span class="btn-label"> | ||
| <i class="fa fa-bookmark"></i> | ||
| </span> | ||
| Primary | ||
| </button> | ||
|
|
||
| <button class="btn btn-secondary"> | ||
| <span class="btn-label"> | ||
| <i class="fa fa-plus"></i> | ||
| </span> | ||
| Secondary | ||
| </button> | ||
|
|
||
| <button class="btn btn-info"> | ||
| <span class="btn-label"> | ||
| <i class="fa fa-info"></i> | ||
| </span> | ||
| Info | ||
| </button> | ||
|
|
||
| <button class="btn btn-success"> | ||
| <span class="btn-label"> | ||
| <i class="fa fa-check"></i> | ||
| </span> | ||
| Success | ||
| </button> | ||
|
|
||
| <button class="btn btn-warning"> | ||
| <span class="btn-label"> | ||
| <i class="fa fa-exclamation-circle"></i> | ||
| </span> | ||
| Warning | ||
| </button> | ||
|
|
||
| <button class="btn btn-danger"> | ||
| <span class="btn-label"> | ||
| <i class="fa fa-heart"></i> | ||
| </span> | ||
| Danger | ||
| </button> | ||
|
|
||
| <button class="btn btn-link"> | ||
| <span class="btn-label"> | ||
| <i class="fa fa-link"></i> | ||
| </span> | ||
| Link | ||
| </button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h4 class="card-title">Button Icon</h4> | ||
|
|
||
| </div> | ||
| <div class="card-body"> | ||
| <p class="demo"> | ||
| <button type="button" class="btn btn-icon btn-round btn-default"> | ||
| <i class="fa fa-align-left"></i> | ||
| </button> | ||
|
|
||
| <button type="button" class="btn btn-icon btn-round btn-primary"> | ||
| <i class="fab fa-twitter"></i> | ||
| </button> | ||
|
|
||
| <button type="button" class="btn btn-icon btn-round btn-secondary"> | ||
| <i class="fa fa-bookmark"></i> | ||
| </button> | ||
|
|
||
| <button type="button" class="btn btn-icon btn-round btn-info"> | ||
| <i class="fa fa-info"></i> | ||
| </button> | ||
|
|
||
| <button type="button" class="btn btn-icon btn-round btn-success"> | ||
| <i class="fa fa-check"></i> | ||
| </button> | ||
|
|
||
| <button type="button" class="btn btn-icon btn-round btn-warning"> | ||
| <i class="fa fa-exclamation-circle"></i> | ||
| </button> | ||
|
|
||
| <button type="button" class="btn btn-icon btn-round btn-danger"> | ||
| <i class="fa fa-heart"></i> | ||
| </button> | ||
|
|
||
| <button type="button" class="btn btn-icon btn-link"> | ||
| <i class="fa fa-link"></i> | ||
| </button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h4 class="card-title">Disabled Button</h4> | ||
|
|
||
| </div> | ||
| <div class="card-body"> | ||
| <p class="demo"> | ||
| <button class="btn btn-default" disabled="disabled">Default</button> | ||
|
|
||
| <button class="btn btn-primary" disabled="disabled">Primary</button> | ||
|
|
||
| <button class="btn btn-secondary" disabled="disabled">Secondary</button> | ||
|
|
||
| <button class="btn btn-info" disabled="disabled">Info</button> | ||
|
|
||
| <button class="btn btn-success" disabled="disabled">Success</button> | ||
|
|
||
| <button class="btn btn-warning" disabled="disabled">Warning</button> | ||
|
|
||
| <button class="btn btn-danger" disabled="disabled">Danger</button> | ||
|
|
||
| <button class="btn btn-link" disabled>Link</button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h4 class="card-title">Button Size</h4> | ||
|
|
||
| </div> | ||
| <div class="card-body"> | ||
| <p class="demo"> | ||
| <button class="btn btn-primary btn-lg">Large</button> | ||
|
|
||
| <button class="btn btn-primary">Normal</button> | ||
|
|
||
| <button class="btn btn-primary btn-sm">Small</button> | ||
|
|
||
| <button class="btn btn-primary btn-xs">Extra Small</button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h4 class="card-title">Button Type</h4> | ||
|
|
||
| </div> | ||
| <div class="card-body"> | ||
| <p class="demo"> | ||
| <button class="btn btn-primary">Normal</button> | ||
| <button class="btn btn-primary btn-border">Border</button> | ||
|
|
||
| <button class="btn btn-primary btn-round">Round</button> | ||
|
|
||
| <button class="btn btn-primary btn-border btn-round">Round</button> | ||
|
|
||
| <button class="btn btn-primary btn-link">Link</button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h4 class="card-title">Nav Pills</h4> | ||
|
|
||
| </div> | ||
| <div class="card-body"> | ||
| <ul class="nav nav-pills nav-primary"> | ||
| <li class="nav-item"> | ||
| <a class="nav-link active" href="#">Active</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="#">Link</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="col-md-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h4 class="card-title">Pagination</h4> | ||
|
|
||
| </div> | ||
| <div class="card-body"> | ||
| <div class="demo"> | ||
| <ul class="pagination pg-primary"> | ||
| <li class="page-item"> | ||
| <a class="page-link" href="#" aria-label="Previous"> | ||
| <span aria-hidden="true">«</span> | ||
| <span class="sr-only">Previous</span> | ||
| </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="#" aria-label="Next"> | ||
| <span aria-hidden="true">»</span> | ||
| <span class="sr-only">Next</span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| {% endblock content %} | ||
|
|
||
| <!-- Specific Page JS goes HERE --> | ||
| {% block javascripts %} | ||
|
|
||
| <!-- Atlantis DEMO methods, don't include it in your project! --> | ||
| <script src="/static/assets/js/setting-demo2.js"></script> | ||
|
|
||
| {% endblock javascripts %} |