rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity
Bootstrap/docs/examples/dashboard/index.html

232 lines
8.7 KiB
HTML
Raw Normal View History

Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
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 12:35:39 +01:00
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Fix issue #15601 — Position of X-UA-Compatible Fix issue #15601 — Position of X-UA-Compatible, charset and viewport Add comment to all examples The non-responsive is correctly saying 2 instead of 3
2015-01-23 14:34:52 -05:00
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
Add new template, Dashboard
2013-12-07 20: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 09:30:04 +02:00
<link rel="icon" href="../../favicon.ico">
Add new template, Dashboard
2013-12-07 20: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-07 20:51:25 -08:00
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
slightly better dashboard example
2015-08-22 23:49:46 -07:00
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
remove navbar-toggler unicode symbol in HTML remove current HTML-based symbol, add any missing aria-* attributes
2016-07-08 09:54:53 +01:00
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation"></button>
slightly better dashboard example
2015-08-22 23:49:46 -07:00
<a class="navbar-brand" href="#">Project name</a>
For now, add hacky <div id="navbar"> to avoid HTML validation error in Dashboard example Closes #17319 by merging it.
2015-08-25 13:43:39 -07:00
<div id="navbar">
Rename pull-*-{left|right} classes to .float-*-left and .float-*-right
2016-09-26 00:54:10 -07:00
<nav class="nav navbar-nav float-xs-left">
For now, add hacky <div id="navbar"> to avoid HTML validation error in Dashboard example Closes #17319 by merging it.
2015-08-25 13:43:39 -07:00
<a class="nav-item nav-link" href="#">Dashboard</a>
<a class="nav-item nav-link" href="#">Settings</a>
<a class="nav-item nav-link" href="#">Profile</a>
<a class="nav-item nav-link" href="#">Help</a>
</nav>
Rename pull-*-{left|right} classes to .float-*-left and .float-*-right
2016-09-26 00:54:10 -07:00
<form class="float-xs-right">
For now, add hacky <div id="navbar"> to avoid HTML validation error in Dashboard example Closes #17319 by merging it.
2015-08-25 13:43:39 -07:00
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
consistently use <nav> instead of <div> for .navbar in docs
2014-08-15 18:09:05 -07:00
</nav>
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<div class="container-fluid">
<div class="row">
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 10:51:59 -08:00
<div class="col-sm-3 col-md-2 sidebar">
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<ul class="nav nav-sidebar">
Assorted accessibility (and some consistency) fixes for documentation Closes #14951 by merging it.
2014-10-30 16:45:33 +00:00
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 10:51:59 -08:00
<div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 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-27 18:16:22 -08:00
<h1>Dashboard</h1>
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<div class="row placeholders">
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 10:51:59 -08:00
<div class="col-xs-6 col-sm-3 placeholder">
Rename .img-responsive class to .img-fluid Fix #17166
2015-08-20 17:38:40 -04:00
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 10:51:59 -08:00
<div class="col-xs-6 col-sm-3 placeholder">
Rename .img-responsive class to .img-fluid Fix #17166
2015-08-20 17:38:40 -04:00
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 10:51:59 -08:00
<div class="col-xs-6 col-sm-3 placeholder">
Rename .img-responsive class to .img-fluid Fix #17166
2015-08-20 17:38:40 -04:00
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 10:51:59 -08:00
<div class="col-xs-6 col-sm-3 placeholder">
Rename .img-responsive class to .img-fluid Fix #17166
2015-08-20 17:38:40 -04:00
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
Remove double bottom border on sub header The table includes a border between the two making this unnecessary
2015-10-08 08:43:45 -04:00
<h2>Section title</h2>
Add new template, Dashboard
2013-12-07 20: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>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
Support jQuery v3 in Bootstrap v4 (#20191) * bower.json, package.json: Extend jQuery version ranges to include v3 * NuGet: Bump jQuery to v3.0.0.1 * Docs+Examples: Update jQuery to v3.0.0 * Use jQuery v3.0.0 for JS unit tests * Update jqueryVersionCheck to allow jQuery v3.x.x
2016-06-28 22:19:46 -07:00
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" 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 00:25:00 +03:00
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
Examples: Update tether to v1.2.0. [ci skip]
2016-03-07 20:11:41 +02:00
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
Add new template, Dashboard
2013-12-07 20:51:25 -08:00
<script src="../../dist/js/bootstrap.min.js"></script>
Use just holder.js instead of docs.min.js in examples when possible And add explanatory comments to the Carousel & Dashboard examples regarding holder.js [skip sauce]
2015-02-07 17:59:19 -08:00
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
Update Holder.js to v2.6.0. [ci skip]
2015-04-21 07:58:52 +03:00
<script src="../../assets/js/vendor/holder.min.js"></script>
Fix #14164: move Windows Phone 8 IE10 viewport bug workaround script to footer of pages
2014-07-27 17:01:34 -07: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-07 20:51:25 -08:00
</body>
</html>
Reference in New Issue Copy Permalink