padding-top: 50px;
}
-
/*
- * Global add-ons
+ * Typography
*/
-.sub-header {
- padding-bottom: 10px;
+h1 {
+ margin-bottom: 20px;
+ padding-bottom: 9px;
border-bottom: 1px solid #eee;
}
-/*
- * Top navigation
- * Hide default border to remove 1px line.
- */
-.navbar-fixed-top {
- border: 0;
-}
-
/*
* Sidebar
*/
-/* Hide for mobile, show later */
.sidebar {
- display: none;
-}
-@media (min-width: 768px) {
- .sidebar {
- position: fixed;
- top: 51px;
- bottom: 0;
- left: 0;
- z-index: 1000;
- display: block;
- padding: 20px;
- overflow-x: hidden;
- overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
- background-color: #f5f5f5;
- border-right: 1px solid #eee;
- }
+ position: fixed;
+ top: 51px;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ padding: 20px;
+ overflow-x: hidden;
+ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+ border-right: 1px solid #eee;
}
/* Sidebar navigation */
-.nav-sidebar {
- margin-right: -21px; /* 20px padding + 1px border */
- margin-bottom: 20px;
- margin-left: -20px;
-}
-.nav-sidebar > li > a {
- padding-right: 20px;
- padding-left: 20px;
-}
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:hover,
-.nav-sidebar > .active > a:focus {
- color: #fff;
- background-color: #428bca;
+.sidebar {
+ padding-left: 0;
+ padding-right: 0;
}
+.sidebar .nav {
+ margin-bottom: 20px;
+}
-/*
- * Main content
- */
-
-.main {
- padding: 20px;
+.sidebar .nav-item {
+ width: 100%;
}
-@media (min-width: 768px) {
- .main {
- padding-right: 40px;
- padding-left: 40px;
- }
+
+.sidebar .nav-item + .nav-item {
+ margin-left: 0;
}
+.sidebar .nav-link {
+ border-radius: 0;
+}
/*
- * Placeholder dashboard ideas
+ * Dashboard
*/
+ /* Placeholders */
.placeholders {
- margin-bottom: 30px;
- text-align: center;
-}
-.placeholders h4 {
- margin-bottom: 0;
-}
-.placeholder {
- margin-bottom: 20px;
+ padding-bottom: 3rem;
}
+
.placeholder img {
- display: inline-block;
- border-radius: 50%;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
}
</head>
<body>
-
- <nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
- <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>
- <a class="navbar-brand" href="#">Project name</a>
- <div id="navbar">
- <nav class="nav navbar-nav float-xs-left">
- <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>
- <form class="float-xs-right">
- <input type="text" class="form-control" placeholder="Search...">
+ <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+ <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"></button>
+ <div class="collapse navbar-toggleable-sm" id="navbar">
+ <a class="navbar-brand" href="#">Project name</a>
+ <ul class="nav navbar-nav float-sm-right">
+ <li class="nav-item active">
+ <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
+ </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>
+ <form class="form-inline float-sm-right mr-3">
+ <input class="form-control" type="text" placeholder="Search">
</form>
</div>
</nav>
<div class="container-fluid">
<div class="row">
- <div class="col-sm-3 col-md-2 sidebar">
- <ul class="nav nav-sidebar">
- <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
- <li><a href="#">Reports</a></li>
- <li><a href="#">Analytics</a></li>
- <li><a href="#">Export</a></li>
+ <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
+ <ul class="nav nav-pills">
+ <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>
</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 class="nav nav-pills">
+ <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>
</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 class="nav nav-pills">
+ <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>
</ul>
- </div>
- <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
+ </nav>
+
+ <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
<h1>Dashboard</h1>
- <div class="row placeholders">
+ <section class="row text-xs-center placeholders">
<div class="col-6 col-sm-3 placeholder">
- <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
+ <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
- <span class="text-muted">Something else</span>
+ <div class="text-muted">Something else</div>
</div>
<div class="col-6 col-sm-3 placeholder">
- <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
+ <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
- <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
+ <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
- <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
+ <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
- </div>
+ </section>
<h2>Section title</h2>
<div class="table-responsive">
</tbody>
</table>
</div>
- </div>
+ </main>
</div>
</div>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<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>
<script src="../../dist/js/bootstrap.min.js"></script>
- <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
- <script src="../../assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
projects / thirdparty / bootstrap.git / commitdiff
