API tools faq
paste
Advertisement
NillGolv

Menu Navbar

NillGolv
Feb 28th, 2020
369
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.67 KB | None | 0 0
raw download clone embed print report
  1. Uso o wampserver, meus sistemas, funcionam corretamente e este exemplo não mostra os menus:  **Inicial** | **Manutenção** | **Sobre** | **Área restrita**
  2. [code]
  3. <!doctype html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.     <meta name="description" content="">
  9.     <meta name="author" content="">
  10.     <link rel="icon" href="../../../../favicon.ico">
  11.  
  12.     <title>Navbar Bootstrap</title>
  13.  
  14.     <!-- Principal CSS do Bootstrap -->
  15.     <link href="https://getbootstrap.com.br/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet">
  16.     <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome-all.js"></script>
  17.  
  18.     <!-- Estilos customizados para este template -->
  19.     <link href="album.css" rel="stylesheet">
  20.   </head>
  21.  
  22.   <body>
  23.  
  24.     <header>
  25.   <div class="collapse bg-dark" id="navbarHeader">
  26.     <div class="container">
  27.       <div class="row">
  28.         <div class="col-sm-8 col-md-7 py-4">
  29.           <h4 class="text-white">Sobre</h4>
  30.           <p class="text-muted">Adicione algumas informações aqui abaixo.</p>
  31.         </div>
  32.         <div class="col-sm-4 offset-md-1 py-4">
  33.           <h4 class="text-white">Contato</h4>
  34.           <ul class="list-unstyled">
  35.             <li><a href="#" class="text-white">Me siga no Twitter</a></li>
  36.             <li><a href="#" class="text-white">Curta no Facebook</a></li>
  37.             <li><a href="#" class="text-white">Me envie um e-mail</a></li>
  38.           </ul>
  39.         </div>
  40.       </div>
  41.     </div>
  42.   </div>
  43.   <div class="navbar navbar-dark bg-dark shadow-sm">
  44.     <div class="container d-flex justify-content-between">
  45.       <a href="#" class="navbar-brand d-flex align-items-center">
  46.         <strong> Navbar</strong>
  47.       </a>
  48.       <!-- div navbar-collapse -->
  49.       <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  50.       <ul class="navbar-nav mr-auto">
  51.         <li class="nav-item">
  52.             <a class="nav-link" href="#"><i class="fas fa-home"></i> Inicial |</a>
  53.         </li>
  54.         <li class="nav-item">
  55.             <a class="nav-link" href="#"><i class="fas fa-database"></i> Manutenção |</a>
  56.         </li>
  57.         <li class="nav-item">
  58.             <a class="nav-link" href="#"><i class="fas fa-list"></i> Sobre |</a>
  59.         </li>
  60.         <li class="nav-item">
  61.             <a class="nav-link" href="#"><i class="fas fa-lock"></i> Área restrita</a>
  62.         </li>
  63.       </ul>
  64.       </div><!-- fecha div navbar-collapse -->
  65.  
  66.       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
  67.         <span class="navbar-toggler-icon"></span>
  68.       </button>
  69.     </div>
  70.   </div>
  71. </header>
  72.  
  73.     <main role="main">
  74.  
  75.       <section class="jumbotron text-center">
  76.         <div class="container">
  77.           <h1 class="jumbotron-heading">Exemplo Navbar Menus Bootstrap</h1>
  78.           <p class="lead text-muted">Algo curto e direto, sobre a coleção abaixo (conteúdo, criador e etc). Faça com que seja curto e legal, mas não tão curto ao ponto de as pessoas pularem ele.</p>
  79.           <p>
  80.             <a href="#" class="btn btn-primary my-2">Call-to-action principal</a>
  81.             <a href="#" class="btn btn-secondary my-2">Call-to-action secundário</a>
  82.           </p>
  83.         </div>
  84.  
  85.       </section>
  86.       <div class="album py-5 bg-light">
  87.         <div class="container">
  88.  
  89.           <div class="row">
  90.  
  91.             <div class="col-md-4">
  92.               <div class="card mb-4 shadow-sm">
  93.                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
  94.                 <div class="card-body">
  95.                   <p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p>
  96.                   <div class="d-flex justify-content-between align-items-center">
  97.                     <div class="btn-group">
  98.                       <button type="button" class="btn btn-sm btn-outline-secondary">Ver</button>
  99.                       <button type="button" class="btn btn-sm btn-outline-secondary">Editar</button>
  100.                     </div>
  101.                     <small class="text-muted">9 mins</small>
  102.                   </div>
  103.                 </div>
  104.               </div>
  105.             </div>
  106.             <div class="col-md-4">
  107.               <div class="card mb-4 shadow-sm">
  108.                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
  109.                 <div class="card-body">
  110.                   <p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p>
  111.                   <div class="d-flex justify-content-between align-items-center">
  112.                     <div class="btn-group">
  113.                       <button type="button" class="btn btn-sm btn-outline-secondary">Ver</button>
  114.                       <button type="button" class="btn btn-sm btn-outline-secondary">Editar</button>
  115.                     </div>
  116.                     <small class="text-muted">9 mins</small>
  117.                   </div>
  118.                 </div>
  119.               </div>
  120.             </div>
  121.             <div class="col-md-4">
  122.               <div class="card mb-4 shadow-sm">
  123.                 <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
  124.                 <div class="card-body">
  125.                   <p class="card-text">Este é um card maior e que suporta texto abaixo, como uma introdução mais natural ao conteúdo adicional. No entanto, esse conteúdo é um pouco maior.</p>
  126.                   <div class="d-flex justify-content-between align-items-center">
  127.                     <div class="btn-group">
  128.                       <button type="button" class="btn btn-sm btn-outline-secondary">Ver</button>
  129.                       <button type="button" class="btn btn-sm btn-outline-secondary">Editar</button>
  130.                     </div>
  131.                     <small class="text-muted">9 mins</small>
  132.                   </div>
  133.                 </div>
  134.               </div>
  135.             </div>
  136.           </div>
  137.         </div>
  138.       </div>
  139.  
  140.     </main>
  141.  
  142.     <footer class="text-muted">
  143.       <div class="container">
  144.         <p class="float-right">
  145.           <a href="#">Voltar ao topo</a>
  146.         </p>
  147.         <p>Este exemplo de álbum é &copy; Bootstrap, mas, por favor, baixe e customize por conta própria.</p>
  148.         <p>Novo no Bootstrap? <a href="../../">Visite a página principal</a> ou leia nosso guia <a href="../../getting-started/">getting started</a>.</p>
  149.       </div>
  150.     </footer>
  151.  
  152.     <!-- Principal JavaScript do Bootstrap
  153.    ================================================== -->
  154.     <!-- Foi colocado no final para a página carregar mais rápido -->
  155.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  156.     <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
  157.     <script src="https://getbootstrap.com.br/docs/4.1/assets/js/vendor/popper.min.js"></script>
  158.     <script src="https://getbootstrap.com.br/docs/4.1/dist/js/bootstrap.min.js"></script>
  159.     <script src="https://getbootstrap.com.br/docs/4.1/assets/js/vendor/holder.min.js"></script>
  160.   </body>
  161. </html>
  162. [/code]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!