root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity
bootstrap/docs/examples/dashboard/index.html

263 lines
9.5 KiB
HTML
Raw Normal View History

Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Add shrink-to-fit viewport directive Fixes potential problems with iOS9's new viewport behavior - see for instance https://forums.developer.apple.com/thread/13510
2015-10-06 19:35:39 +08:00
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<meta name="description" content="">
<meta name="author" content="">
Move apple-touch-icon-precomposed.png and favicon.ico in docs root. This way, it works in all browsers.
2014-03-25 15:30:04 +08:00
<link rel="icon" href="../../favicon.ico">
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
fix assets links in all examples
2014-01-01 22:29:13 +08:00
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
rename from .navbar-toggleable to .navbar-expand to reflect mobile first approach everywhere else
2017-03-22 13:00:46 +08:00
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
more docs updates
2017-03-21 14:13:34 +08:00
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
put new toggler markup to use
2016-12-22 14:11:04 +08:00
<span class="navbar-toggler-icon"></span>
</button>
more example fixes
2016-12-22 14:33:18 +08:00
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
update all examples
2016-12-29 09:25:00 +08:00
<ul class="navbar-nav mr-auto">
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<li class="nav-item active">
more example fixes
2016-12-22 14:33:18 +08:00
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
more example fixes
2016-12-22 14:33:18 +08:00
<form class="form-inline mt-2 mt-md-0">
Add explicit aria-label to placeholder-only inputs While `placeholder` is nominally valid per spec http://rawgit.com/w3c/html-api-map/master/index.html#accessible-name-and-description-calculation it is inelegant, a fallback, and not supported in ios/safari/voiceover and android/chrome/talkback, to name a few combinations `aria-describedby` is also not really the right tool for providing a name/label equivalent, so remove that from the list of possible alternative methods / clarify how it can be used
2017-03-31 05:45:36 +08:00
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
unify alignment of all these dang navbar forms
2016-12-23 15:04:02 +08:00
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
For now, add hacky <div id="navbar"> to avoid HTML validation error in Dashboard example Closes #17319 by merging it.
2015-08-26 04:43:39 +08:00
</form>
</div>
consistently use <nav> instead of <div> for .navbar in docs
2014-08-16 09:09:05 +08:00
</nav>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<div class="container-fluid">
<div class="row">
update instances of old classes in the docs
2017-03-04 04:59:14 +08:00
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-faded sidebar">
update all examples
2016-12-29 09:25:00 +08:00
<ul class="nav nav-pills flex-column">
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
</ul>
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
update all examples
2016-12-29 09:25:00 +08:00
<ul class="nav nav-pills flex-column">
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
</ul>
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
update all examples
2016-12-29 09:25:00 +08:00
<ul class="nav nav-pills flex-column">
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
</ul>
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
</nav>
Add explicit role="main" to <main> elements (#22574) For compatibility in IE10/IE11 which don't otherwise "know" this element's role/don't expose it to AT
2017-05-05 17:22:09 +08:00
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3" role="main">
Example pages: Remove usages of defunct .page-header class /fyi @mdo Note: The selector in dashboard.css that used .page-header was superfluous because the margin that it zeroed was already zero even without that declaration. [skip sauce]
2016-02-28 10:16:22 +08:00
<h1>Dashboard</h1>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
Remove 'xs' from text utilities (#21217)
2016-11-27 12:33:46 +08:00
<section class="row text-center placeholders">
Update docs to reflect new breakpoint naming convention
2016-11-05 00:54:34 +08:00
<div class="col-6 col-sm-3 placeholder">
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<h4>Label</h4>
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<div class="text-muted">Something else</div>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
</div>
Update docs to reflect new breakpoint naming convention
2016-11-05 00:54:34 +08:00
<div class="col-6 col-sm-3 placeholder">
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
Update docs to reflect new breakpoint naming convention
2016-11-05 00:54:34 +08:00
<div class="col-6 col-sm-3 placeholder">
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
Update docs to reflect new breakpoint naming convention
2016-11-05 00:54:34 +08:00
<div class="col-6 col-sm-3 placeholder">
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
</section>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
Remove double bottom border on sub header The table includes a border between the two making this unnecessary
2015-10-08 20:43:45 +08:00
<h2>Section title</h2>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<div class="table-responsive">
<table class="table table-striped">
<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>
Refactor Dashboard example. (#21140)
2016-11-26 12:23:11 +08:00
</main>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
bump to jquery 3.2.1
2017-03-21 14:04:14 +08:00
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
Add a local jQuery fallback. Shouldn't really happen, but China for example has blocked Google so this should help.
2015-07-26 05:25:00 +08:00
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
Update Popper.js 1.9.1 + Update documentation about Dropdown placement
2017-04-29 22:05:22 +08:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.1/umd/popper.min.js" integrity="sha256-bEc/d4PvjMyrMkTlKFig/0NhlGlr7UA2Q0BoiXR9gc0=" crossorigin="anonymous"></script>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
<script src="../../dist/js/bootstrap.min.js"></script>
Fix #14164: move Windows Phone 8 IE10 viewport bug workaround script to footer of pages
2014-07-28 08:01:34 +08:00
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Add new template, Dashboard
2013-12-08 12:51:25 +08:00
</body>
</html>