diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard')
-rw-r--r-- | vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard/dashboard.css | 100 | ||||
-rw-r--r-- | vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard/index.html | 303 |
2 files changed, 403 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard/dashboard.css b/vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard/dashboard.css new file mode 100644 index 000000000..eb3bb8540 --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard/dashboard.css @@ -0,0 +1,100 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; + vertical-align: text-bottom; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +@supports ((position: -webkit-sticky) or (position: sticky)) { + .sidebar-sticky { + position: -webkit-sticky; + position: sticky; + } +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-right: 4px; + color: #999; +} + +.sidebar .nav-link.active { + color: #007bff; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +/* + * Content + */ + +[role="main"] { + padding-top: 48px; /* Space for fixed navbar */ +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: 1rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .form-control { + padding: .75rem 1rem; + border-width: 0; + border-radius: 0; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard/index.html b/vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard/index.html new file mode 100644 index 000000000..f66c4505d --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/examples/dashboard/index.html @@ -0,0 +1,303 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta name="description" content=""> + <meta name="author" content=""> + <link rel="icon" href="../../../../favicon.ico"> + + <title>Dashboard Template for Bootstrap</title> + + <!-- Bootstrap core CSS --> + <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> + + <!-- Custom styles for this template --> + <link href="dashboard.css" rel="stylesheet"> + </head> + + <body> + <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"> + <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a> + <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> + <ul class="navbar-nav px-3"> + <li class="nav-item text-nowrap"> + <a class="nav-link" href="#">Sign out</a> + </li> + </ul> + </nav> + + <div class="container-fluid"> + <div class="row"> + <nav class="col-md-2 d-none d-md-block bg-light sidebar"> + <div class="sidebar-sticky"> + <ul class="nav flex-column"> + <li class="nav-item"> + <a class="nav-link active" href="#"> + <span data-feather="home"></span> + Dashboard <span class="sr-only">(current)</span> + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file"></span> + Orders + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="shopping-cart"></span> + Products + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="users"></span> + Customers + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="bar-chart-2"></span> + Reports + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="layers"></span> + Integrations + </a> + </li> + </ul> + + <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"> + <span>Saved reports</span> + <a class="d-flex align-items-center text-muted" href="#"> + <span data-feather="plus-circle"></span> + </a> + </h6> + <ul class="nav flex-column mb-2"> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text"></span> + Current month + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text"></span> + Last quarter + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text"></span> + Social engagement + </a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#"> + <span data-feather="file-text"></span> + Year-end sale + </a> + </li> + </ul> + </div> + </nav> + + <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> + <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> + <h1 class="h2">Dashboard</h1> + <div class="btn-toolbar mb-2 mb-md-0"> + <div class="btn-group mr-2"> + <button class="btn btn-sm btn-outline-secondary">Share</button> + <button class="btn btn-sm btn-outline-secondary">Export</button> + </div> + <button class="btn btn-sm btn-outline-secondary dropdown-toggle"> + <span data-feather="calendar"></span> + This week + </button> + </div> + </div> + + <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> + + <h2>Section title</h2> + <div class="table-responsive"> + <table class="table table-striped table-sm"> + <thead> + <tr> + <th>#</th> + <th>Header</th> + <th>Header</th> + <th>Header</th> + <th>Header</th> + </tr> + </thead> + <tbody> + <tr> + <td>1,001</td> + <td>Lorem</td> + <td>ipsum</td> + <td>dolor</td> + <td>sit</td> + </tr> + <tr> + <td>1,002</td> + <td>amet</td> + <td>consectetur</td> + <td>adipiscing</td> + <td>elit</td> + </tr> + <tr> + <td>1,003</td> + <td>Integer</td> + <td>nec</td> + <td>odio</td> + <td>Praesent</td> + </tr> + <tr> + <td>1,003</td> + <td>libero</td> + <td>Sed</td> + <td>cursus</td> + <td>ante</td> + </tr> + <tr> + <td>1,004</td> + <td>dapibus</td> + <td>diam</td> + <td>Sed</td> + <td>nisi</td> + </tr> + <tr> + <td>1,005</td> + <td>Nulla</td> + <td>quis</td> + <td>sem</td> + <td>at</td> + </tr> + <tr> + <td>1,006</td> + <td>nibh</td> + <td>elementum</td> + <td>imperdiet</td> + <td>Duis</td> + </tr> + <tr> + <td>1,007</td> + <td>sagittis</td> + <td>ipsum</td> + <td>Praesent</td> + <td>mauris</td> + </tr> + <tr> + <td>1,008</td> + <td>Fusce</td> + <td>nec</td> + <td>tellus</td> + <td>sed</td> + </tr> + <tr> + <td>1,009</td> + <td>augue</td> + <td>semper</td> + <td>porta</td> + <td>Mauris</td> + </tr> + <tr> + <td>1,010</td> + <td>massa</td> + <td>Vestibulum</td> + <td>lacinia</td> + <td>arcu</td> + </tr> + <tr> + <td>1,011</td> + <td>eget</td> + <td>nulla</td> + <td>Class</td> + <td>aptent</td> + </tr> + <tr> + <td>1,012</td> + <td>taciti</td> + <td>sociosqu</td> + <td>ad</td> + <td>litora</td> + </tr> + <tr> + <td>1,013</td> + <td>torquent</td> + <td>per</td> + <td>conubia</td> + <td>nostra</td> + </tr> + <tr> + <td>1,014</td> + <td>per</td> + <td>inceptos</td> + <td>himenaeos</td> + <td>Curabitur</td> + </tr> + <tr> + <td>1,015</td> + <td>sodales</td> + <td>ligula</td> + <td>in</td> + <td>libero</td> + </tr> + </tbody> + </table> + </div> + </main> + </div> + </div> + + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> + <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> + <script src="../../assets/js/vendor/popper.min.js"></script> + <script src="../../dist/js/bootstrap.min.js"></script> + + <!-- Icons --> + <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> + <script> + feather.replace() + </script> + + <!-- Graphs --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> + <script> + var ctx = document.getElementById("myChart"); + var myChart = new Chart(ctx, { + type: 'line', + data: { + labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], + datasets: [{ + data: [15339, 21345, 18483, 24003, 23489, 24092, 12034], + lineTension: 0, + backgroundColor: 'transparent', + borderColor: '#007bff', + borderWidth: 4, + pointBackgroundColor: '#007bff' + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + }, + legend: { + display: false, + } + } + }); + </script> + </body> +</html> |