gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   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>Navbar 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="navbar.css" rel="stylesheet">
  17   </head>
  18
  19   <body>
  20
  21     <nav class="navbar navbar-dark bg-dark">
  22       <a class="navbar-brand" href="#">Never expand</a>
  23       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
  24         <span class="navbar-toggler-icon"></span>
  25       </button>
  26
  27       <div class="collapse navbar-collapse" id="navbarsExample01">
  28         <ul class="navbar-nav mr-auto">
  29           <li class="nav-item active">
  30             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  31           </li>
  32           <li class="nav-item">
  33             <a class="nav-link" href="#">Link</a>
  34           </li>
  35           <li class="nav-item">
  36             <a class="nav-link disabled" href="#">Disabled</a>
  37           </li>
  38           <li class="nav-item dropdown">
  39             <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  40             <div class="dropdown-menu" aria-labelledby="dropdown01">
  41               <a class="dropdown-item" href="#">Action</a>
  42               <a class="dropdown-item" href="#">Another action</a>
  43               <a class="dropdown-item" href="#">Something else here</a>
  44             </div>
  45           </li>
  46         </ul>
  47         <form class="form-inline my-2 my-md-0">
  48           <input class="form-control" type="text" placeholder="Search" aria-label="Search">
  49         </form>
  50       </div>
  51     </nav>
  52
  53     <nav class="navbar navbar-expand navbar-dark bg-dark">
  54       <a class="navbar-brand" href="#">Always expand</a>
  55       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
  56         <span class="navbar-toggler-icon"></span>
  57       </button>
  58
  59       <div class="collapse navbar-collapse" id="navbarsExample02">
  60         <ul class="navbar-nav mr-auto">
  61           <li class="nav-item active">
  62             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  63           </li>
  64           <li class="nav-item">
  65             <a class="nav-link" href="#">Link</a>
  66           </li>
  67         </ul>
  68         <form class="form-inline my-2 my-md-0">
  69           <input class="form-control" type="text" placeholder="Search">
  70         </form>
  71       </div>
  72     </nav>
  73
  74     <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  75       <a class="navbar-brand" href="#">Expand at sm</a>
  76       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
  77         <span class="navbar-toggler-icon"></span>
  78       </button>
  79
  80       <div class="collapse navbar-collapse" id="navbarsExample03">
  81         <ul class="navbar-nav mr-auto">
  82           <li class="nav-item active">
  83             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  84           </li>
  85           <li class="nav-item">
  86             <a class="nav-link" href="#">Link</a>
  87           </li>
  88           <li class="nav-item">
  89             <a class="nav-link disabled" href="#">Disabled</a>
  90           </li>
  91           <li class="nav-item dropdown">
  92             <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  93             <div class="dropdown-menu" aria-labelledby="dropdown03">
  94               <a class="dropdown-item" href="#">Action</a>
  95               <a class="dropdown-item" href="#">Another action</a>
  96               <a class="dropdown-item" href="#">Something else here</a>
  97             </div>
  98           </li>
  99         </ul>
 100         <form class="form-inline my-2 my-md-0">
 101           <input class="form-control" type="text" placeholder="Search">
 102         </form>
 103       </div>
 104     </nav>
 105
 106     <nav class="navbar navbar-expand-md navbar-dark bg-dark">
 107       <a class="navbar-brand" href="#">Expand at md</a>
 108       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
 109         <span class="navbar-toggler-icon"></span>
 110       </button>
 111
 112       <div class="collapse navbar-collapse" id="navbarsExample04">
 113         <ul class="navbar-nav mr-auto">
 114           <li class="nav-item active">
 115             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 116           </li>
 117           <li class="nav-item">
 118             <a class="nav-link" href="#">Link</a>
 119           </li>
 120           <li class="nav-item">
 121             <a class="nav-link disabled" href="#">Disabled</a>
 122           </li>
 123           <li class="nav-item dropdown">
 124             <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 125             <div class="dropdown-menu" aria-labelledby="dropdown04">
 126               <a class="dropdown-item" href="#">Action</a>
 127               <a class="dropdown-item" href="#">Another action</a>
 128               <a class="dropdown-item" href="#">Something else here</a>
 129             </div>
 130           </li>
 131         </ul>
 132         <form class="form-inline my-2 my-md-0">
 133           <input class="form-control" type="text" placeholder="Search">
 134         </form>
 135       </div>
 136     </nav>
 137
 138     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 139       <a class="navbar-brand" href="#">Expand at lg</a>
 140       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
 141         <span class="navbar-toggler-icon"></span>
 142       </button>
 143
 144       <div class="collapse navbar-collapse" id="navbarsExample05">
 145         <ul class="navbar-nav mr-auto">
 146           <li class="nav-item active">
 147             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 148           </li>
 149           <li class="nav-item">
 150             <a class="nav-link" href="#">Link</a>
 151           </li>
 152           <li class="nav-item">
 153             <a class="nav-link disabled" href="#">Disabled</a>
 154           </li>
 155           <li class="nav-item dropdown">
 156             <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown05" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 157             <div class="dropdown-menu" aria-labelledby="dropdown05">
 158               <a class="dropdown-item" href="#">Action</a>
 159               <a class="dropdown-item" href="#">Another action</a>
 160               <a class="dropdown-item" href="#">Something else here</a>
 161             </div>
 162           </li>
 163         </ul>
 164         <form class="form-inline my-2 my-md-0">
 165           <input class="form-control" type="text" placeholder="Search">
 166         </form>
 167       </div>
 168     </nav>
 169
 170     <nav class="navbar navbar-expand-xl navbar-dark bg-dark">
 171       <a class="navbar-brand" href="#">Expand at xl</a>
 172       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
 173         <span class="navbar-toggler-icon"></span>
 174       </button>
 175
 176       <div class="collapse navbar-collapse" id="navbarsExample06">
 177         <ul class="navbar-nav mr-auto">
 178           <li class="nav-item active">
 179             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 180           </li>
 181           <li class="nav-item">
 182             <a class="nav-link" href="#">Link</a>
 183           </li>
 184           <li class="nav-item">
 185             <a class="nav-link disabled" href="#">Disabled</a>
 186           </li>
 187           <li class="nav-item dropdown">
 188             <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 189             <div class="dropdown-menu" aria-labelledby="dropdown06">
 190               <a class="dropdown-item" href="#">Action</a>
 191               <a class="dropdown-item" href="#">Another action</a>
 192               <a class="dropdown-item" href="#">Something else here</a>
 193             </div>
 194           </li>
 195         </ul>
 196         <form class="form-inline my-2 my-md-0">
 197           <input class="form-control" type="text" placeholder="Search">
 198         </form>
 199       </div>
 200     </nav>
 201
 202     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 203       <div class="container">
 204         <a class="navbar-brand" href="#">Container</a>
 205         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
 206           <span class="navbar-toggler-icon"></span>
 207         </button>
 208
 209         <div class="collapse navbar-collapse" id="navbarsExample07">
 210           <ul class="navbar-nav mr-auto">
 211             <li class="nav-item active">
 212               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 213             </li>
 214             <li class="nav-item">
 215               <a class="nav-link" href="#">Link</a>
 216             </li>
 217             <li class="nav-item">
 218               <a class="nav-link disabled" href="#">Disabled</a>
 219             </li>
 220             <li class="nav-item dropdown">
 221               <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 222               <div class="dropdown-menu" aria-labelledby="dropdown07">
 223                 <a class="dropdown-item" href="#">Action</a>
 224                 <a class="dropdown-item" href="#">Another action</a>
 225                 <a class="dropdown-item" href="#">Something else here</a>
 226               </div>
 227             </li>
 228           </ul>
 229           <form class="form-inline my-2 my-md-0">
 230             <input class="form-control" type="text" placeholder="Search" aria-label="Search">
 231           </form>
 232         </div>
 233       </div>
 234     </nav>
 235
 236     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 237       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
 238         <span class="navbar-toggler-icon"></span>
 239       </button>
 240
 241       <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
 242         <ul class="navbar-nav">
 243           <li class="nav-item active">
 244             <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
 245           </li>
 246           <li class="nav-item">
 247             <a class="nav-link" href="#">Link</a>
 248           </li>
 249           <li class="nav-item">
 250             <a class="nav-link disabled" href="#">Disabled</a>
 251           </li>
 252           <li class="nav-item dropdown">
 253             <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 254             <div class="dropdown-menu" aria-labelledby="dropdown08">
 255               <a class="dropdown-item" href="#">Action</a>
 256               <a class="dropdown-item" href="#">Another action</a>
 257               <a class="dropdown-item" href="#">Something else here</a>
 258             </div>
 259           </li>
 260         </ul>
 261       </div>
 262     </nav>
 263
 264     <div class="container">
 265       <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
 266         <a class="navbar-brand" href="#">Navbar</a>
 267         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
 268           <span class="navbar-toggler-icon"></span>
 269         </button>
 270
 271         <div class="collapse navbar-collapse" id="navbarsExample09">
 272           <ul class="navbar-nav mr-auto">
 273             <li class="nav-item active">
 274               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 275             </li>
 276             <li class="nav-item">
 277               <a class="nav-link" href="#">Link</a>
 278             </li>
 279             <li class="nav-item">
 280               <a class="nav-link disabled" href="#">Disabled</a>
 281             </li>
 282             <li class="nav-item dropdown">
 283               <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 284               <div class="dropdown-menu" aria-labelledby="dropdown09">
 285                 <a class="dropdown-item" href="#">Action</a>
 286                 <a class="dropdown-item" href="#">Another action</a>
 287                 <a class="dropdown-item" href="#">Something else here</a>
 288               </div>
 289             </li>
 290           </ul>
 291           <form class="form-inline my-2 my-md-0">
 292             <input class="form-control" type="text" placeholder="Search" aria-label="Search">
 293           </form>
 294         </div>
 295       </nav>
 296
 297       <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
 298         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
 299           <span class="navbar-toggler-icon"></span>
 300         </button>
 301
 302         <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
 303           <ul class="navbar-nav">
 304             <li class="nav-item active">
 305               <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a>
 306             </li>
 307             <li class="nav-item">
 308               <a class="nav-link" href="#">Link</a>
 309             </li>
 310             <li class="nav-item">
 311               <a class="nav-link disabled" href="#">Disabled</a>
 312             </li>
 313             <li class="nav-item dropdown">
 314               <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 315               <div class="dropdown-menu" aria-labelledby="dropdown10">
 316                 <a class="dropdown-item" href="#">Action</a>
 317                 <a class="dropdown-item" href="#">Another action</a>
 318                 <a class="dropdown-item" href="#">Something else here</a>
 319               </div>
 320             </li>
 321           </ul>
 322         </div>
 323       </nav>
 324
 325       <main role="main">
 326         <div class="jumbotron">
 327           <div class="col-sm-8 mx-auto">
 328             <h1>Navbar examples</h1>
 329             <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
 330             <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
 331             <p>
 332               <a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
 333             </p>
 334           </div>
 335         </div>
 336       </main>
 337     </div>
 338
 339     <!-- Bootstrap core JavaScript
 340     ================================================== -->
 341     <!-- Placed at the end of the document so the pages load faster -->
 342     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 343     <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
 344     <script src="../../../../assets/js/vendor/popper.min.js"></script>
 345     <script src="../../../../dist/js/bootstrap.min.js"></script>
 346   </body>
 347 </html>