|
|
| Line 4: |
Line 4: |
| | <style> | | <style> |
| | | | |
| − | /*
| |
| − | * Base structure
| |
| − | */
| |
| − |
| |
| − | /* Move down content because we have a fixed navbar that is 50px tall */
| |
| − | body {
| |
| − | padding-top: 50px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*
| |
| − | * Global add-ons
| |
| − | */
| |
| − |
| |
| − | .sub-header {
| |
| − | padding-bottom: 10px;
| |
| − | 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: 100px;
| |
| − | 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;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* 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;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*
| |
| − | * Main content
| |
| − | */
| |
| − |
| |
| − | .main {
| |
| − | padding: 20px;
| |
| − | }
| |
| − | @media (min-width: 768px) {
| |
| − | .main {
| |
| − | padding-right: 40px;
| |
| − | padding-left: 40px;
| |
| − | }
| |
| − | }
| |
| − | .main .page-header {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*
| |
| − | * Placeholder dashboard ideas
| |
| − | */
| |
| − |
| |
| − | .placeholders {
| |
| − | margin-bottom: 30px;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .placeholders h4 {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − | .placeholder {
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| − | .placeholder img {
| |
| − | display: inline-block;
| |
| − | border-radius: 50%;
| |
| − | }
| |
| | .page-header{ | | .page-header{ |
| | background: black; | | background: black; |
| Line 118: |
Line 13: |
| | h1 { | | h1 { |
| | | | |
| − | color:white; | + | color:white; |
| | | | |
| | } | | } |
| Line 139: |
Line 34: |
| | <body> | | <body> |
| | | | |
| − | <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>
| + | |
| − | </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>
| + | |
| | </body> | | </body> |
| | </html> | | </html> |