mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-03 15:24:19 +01:00
0e920ce3f4
With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager.
304 lines
9.9 KiB
HTML
304 lines
9.9 KiB
HTML
<!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>
|