static/scss/bootstrap-4.0.0-alpha.6/docs/examples/dashboard/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   6     <meta name="description" content="">
   7     <meta name="author" content="">
   8     <link rel="icon" href="../../favicon.ico">
   9
  10     <title>Dashboard Template for Bootstrap</title>
  11
  12     <!-- Bootstrap core CSS -->
  13     <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
  14
  15     <!-- Custom styles for this template -->
  16     <link href="dashboard.css" rel="stylesheet">
  17   </head>
  18
  19   <body>
  20     <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  21       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  22         <span class="navbar-toggler-icon"></span>
  23       </button>
  24       <a class="navbar-brand" href="#">Dashboard</a>
  25
  26       <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  27         <ul class="navbar-nav mr-auto">
  28           <li class="nav-item active">
  29             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  30           </li>
  31           <li class="nav-item">
  32             <a class="nav-link" href="#">Settings</a>
  33           </li>
  34           <li class="nav-item">
  35             <a class="nav-link" href="#">Profile</a>
  36           </li>
  37           <li class="nav-item">
  38             <a class="nav-link" href="#">Help</a>
  39           </li>
  40         </ul>
  41         <form class="form-inline mt-2 mt-md-0">
  42           <input class="form-control mr-sm-2" type="text" placeholder="Search">
  43           <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  44         </form>
  45       </div>
  46     </nav>
  47
  48     <div class="container-fluid">
  49       <div class="row">
  50         <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
  51           <ul class="nav nav-pills flex-column">
  52             <li class="nav-item">
  53               <a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
  54             </li>
  55             <li class="nav-item">
  56               <a class="nav-link" href="#">Reports</a>
  57             </li>
  58             <li class="nav-item">
  59               <a class="nav-link" href="#">Analytics</a>
  60             </li>
  61             <li class="nav-item">
  62               <a class="nav-link" href="#">Export</a>
  63             </li>
  64           </ul>
  65
  66           <ul class="nav nav-pills flex-column">
  67             <li class="nav-item">
  68               <a class="nav-link" href="#">Nav item</a>
  69             </li>
  70             <li class="nav-item">
  71               <a class="nav-link" href="#">Nav item again</a>
  72             </li>
  73             <li class="nav-item">
  74               <a class="nav-link" href="#">One more nav</a>
  75             </li>
  76             <li class="nav-item">
  77               <a class="nav-link" href="#">Another nav item</a>
  78             </li>
  79           </ul>
  80
  81           <ul class="nav nav-pills flex-column">
  82             <li class="nav-item">
  83               <a class="nav-link" href="#">Nav item again</a>
  84             </li>
  85             <li class="nav-item">
  86               <a class="nav-link" href="#">One more nav</a>
  87             </li>
  88             <li class="nav-item">
  89               <a class="nav-link" href="#">Another nav item</a>
  90             </li>
  91           </ul>
  92         </nav>
  93
  94         <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
  95           <h1>Dashboard</h1>
  96
  97           <section class="row text-center placeholders">
  98             <div class="col-6 col-sm-3 placeholder">
  99               <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
 100               <h4>Label</h4>
 101               <div class="text-muted">Something else</div>
 102             </div>
 103             <div class="col-6 col-sm-3 placeholder">
 104               <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
 105               <h4>Label</h4>
 106               <span class="text-muted">Something else</span>
 107             </div>
 108             <div class="col-6 col-sm-3 placeholder">
 109               <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
 110               <h4>Label</h4>
 111               <span class="text-muted">Something else</span>
 112             </div>
 113             <div class="col-6 col-sm-3 placeholder">
 114               <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
 115               <h4>Label</h4>
 116               <span class="text-muted">Something else</span>
 117             </div>
 118           </section>
 119
 120           <h2>Section title</h2>
 121           <div class="table-responsive">
 122             <table class="table table-striped">
 123               <thead>
 124                 <tr>
 125                   <th>#</th>
 126                   <th>Header</th>
 127                   <th>Header</th>
 128                   <th>Header</th>
 129                   <th>Header</th>
 130                 </tr>
 131               </thead>
 132               <tbody>
 133                 <tr>
 134                   <td>1,001</td>
 135                   <td>Lorem</td>
 136                   <td>ipsum</td>
 137                   <td>dolor</td>
 138                   <td>sit</td>
 139                 </tr>
 140                 <tr>
 141                   <td>1,002</td>
 142                   <td>amet</td>
 143                   <td>consectetur</td>
 144                   <td>adipiscing</td>
 145                   <td>elit</td>
 146                 </tr>
 147                 <tr>
 148                   <td>1,003</td>
 149                   <td>Integer</td>
 150                   <td>nec</td>
 151                   <td>odio</td>
 152                   <td>Praesent</td>
 153                 </tr>
 154                 <tr>
 155                   <td>1,003</td>
 156                   <td>libero</td>
 157                   <td>Sed</td>
 158                   <td>cursus</td>
 159                   <td>ante</td>
 160                 </tr>
 161                 <tr>
 162                   <td>1,004</td>
 163                   <td>dapibus</td>
 164                   <td>diam</td>
 165                   <td>Sed</td>
 166                   <td>nisi</td>
 167                 </tr>
 168                 <tr>
 169                   <td>1,005</td>
 170                   <td>Nulla</td>
 171                   <td>quis</td>
 172                   <td>sem</td>
 173                   <td>at</td>
 174                 </tr>
 175                 <tr>
 176                   <td>1,006</td>
 177                   <td>nibh</td>
 178                   <td>elementum</td>
 179                   <td>imperdiet</td>
 180                   <td>Duis</td>
 181                 </tr>
 182                 <tr>
 183                   <td>1,007</td>
 184                   <td>sagittis</td>
 185                   <td>ipsum</td>
 186                   <td>Praesent</td>
 187                   <td>mauris</td>
 188                 </tr>
 189                 <tr>
 190                   <td>1,008</td>
 191                   <td>Fusce</td>
 192                   <td>nec</td>
 193                   <td>tellus</td>
 194                   <td>sed</td>
 195                 </tr>
 196                 <tr>
 197                   <td>1,009</td>
 198                   <td>augue</td>
 199                   <td>semper</td>
 200                   <td>porta</td>
 201                   <td>Mauris</td>
 202                 </tr>
 203                 <tr>
 204                   <td>1,010</td>
 205                   <td>massa</td>
 206                   <td>Vestibulum</td>
 207                   <td>lacinia</td>
 208                   <td>arcu</td>
 209                 </tr>
 210                 <tr>
 211                   <td>1,011</td>
 212                   <td>eget</td>
 213                   <td>nulla</td>
 214                   <td>Class</td>
 215                   <td>aptent</td>
 216                 </tr>
 217                 <tr>
 218                   <td>1,012</td>
 219                   <td>taciti</td>
 220                   <td>sociosqu</td>
 221                   <td>ad</td>
 222                   <td>litora</td>
 223                 </tr>
 224                 <tr>
 225                   <td>1,013</td>
 226                   <td>torquent</td>
 227                   <td>per</td>
 228                   <td>conubia</td>
 229                   <td>nostra</td>
 230                 </tr>
 231                 <tr>
 232                   <td>1,014</td>
 233                   <td>per</td>
 234                   <td>inceptos</td>
 235                   <td>himenaeos</td>
 236                   <td>Curabitur</td>
 237                 </tr>
 238                 <tr>
 239                   <td>1,015</td>
 240                   <td>sodales</td>
 241                   <td>ligula</td>
 242                   <td>in</td>
 243                   <td>libero</td>
 244                 </tr>
 245               </tbody>
 246             </table>
 247           </div>
 248         </main>
 249       </div>
 250     </div>
 251
 252     <!-- Bootstrap core JavaScript
 253     ================================================== -->
 254     <!-- Placed at the end of the document so the pages load faster -->
 255     <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
 256     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
 257     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
 258     <script src="../../dist/js/bootstrap.min.js"></script>
 259     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 260     <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
 261   </body>
 262 </html>