API tools faq
paste
Advertisement
fcamuso

Bootstrap - lezione 6

fcamuso
Jul 14th, 2023
1,117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.05 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <title>Title</title>
  6.   <!-- Required meta tags -->
  7.   <meta charset="utf-8">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9.  
  10.   <!-- Bootstrap CSS v5.3.0 -->
  11.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  12.        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  13.        crossorigin="anonymous">
  14. </head>
  15.  
  16. <body>
  17.   <!-- per centrare il menu con margini -->
  18.   <!-- <div class="container"> -->
  19.  
  20.     <nav class=" fixed-bottom navbar navbar-expand-lg bg-dark border-bottom border-bottom-dark" data-bs-theme="dark" >
  21.       <!-- <a class="navbar-brand" href="#">
  22.        <img src="torta.svg" width="50">
  23.        <span class="text-success fw-bolder">Pie Paradise</span>
  24.      </a> -->
  25.       <!-- <span class="navbar-brand text-success fw-bolder">Pie Paradise</span> -->
  26.       <img class="navbar-brand" src="torta.svg" width="50">
  27.    
  28.    
  29.       <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navBar">
  30.         <span class="navbar-toggler-icon"></span>
  31.       </button>
  32.       <div class="collapse navbar-collapse" id="navBar">
  33.          <ul class="navbar-nav">
  34.           <li class="nav-item"> <a href="#" class="nav-link">Home</a>  </li>
  35.           <li class="nav-item"> <a href="#" class="nav-link">File</a>         </li>
  36.           <li class="nav-item dropdown">
  37.             <a role="button" data-bs-toggle="dropdown"
  38.               href="yt_05_menu.html" class="nav-link">Modifica</a>
  39.    
  40.             <ul class="dropdown-menu">
  41.               <li><a class="dropdown-item" href="#">Copia</a></li>
  42.               <li><a class="dropdown-item" href="#">Incolla</a></li>
  43.               <li><hr class="dropdown-divider"></li>
  44.               <li><a class="dropdown-item" href="#">Elimina</a></li>
  45.             </ul>
  46.    
  47.           </li>
  48.           <li class="nav-item"> <a href="#" class="nav-link">Strumenti</a>    </li>
  49.           <li class="nav-item"> <a href="#" class="nav-link">Contatti</a>     </li>
  50.         </ul>
  51.       </div>
  52.       <form class="d-md-inline-flex me-2">
  53.         <input class="form-control me-2" type="search" placeholder="Cerca" >
  54.         <button class="btn btn-outline-success" type="submit">Cerca</button>
  55.       </form>    
  56.     </nav>
  57.  
  58.     <nav class="navbar bg-body-tertiary fixed-top">
  59.  
  60.       <div class="container-fluid">
  61.  
  62.         <a class="navbar-brand" href="#">Offcanvas navbar</a>
  63.  
  64.         <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
  65.           <span class="navbar-toggler-icon"></span>
  66.         </button>
  67.  
  68.         <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
  69.           <div class="offcanvas-header">
  70.             <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
  71.             <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  72.           </div>
  73.           <div class="offcanvas-body">
  74.            
  75.             <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
  76.               <li class="nav-item">
  77.                 <a class="nav-link active" aria-current="page" href="#">Home</a>
  78.               </li>
  79.               <li class="nav-item">
  80.                 <a class="nav-link" href="#">Link</a>
  81.               </li>
  82.               <li class="nav-item dropdown">
  83.                 <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  84.                   Dropdown
  85.                 </a>
  86.                 <ul class="dropdown-menu">
  87.                   <li><a class="dropdown-item" href="#">Action</a></li>
  88.                   <li><a class="dropdown-item" href="#">Another action</a></li>
  89.                   <li>
  90.                     <hr class="dropdown-divider">
  91.                   </li>
  92.                   <li><a class="dropdown-item" href="#">Something else here</a></li>
  93.                 </ul>
  94.               </li>
  95.             </ul>
  96.             <form class="d-flex mt-3" role="search">
  97.               <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  98.               <button class="btn btn-outline-success" type="submit">Search</button>
  99.             </form>
  100.           </div>
  101.         </div>
  102.       </div>
  103.     </nav>
  104.  
  105.   <!-- per centrare il menu con margini -->
  106.   <!-- </div> -->
  107.  
  108.  
  109.   <!-- Bootstrap JavaScript Libraries -->
  110.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  111.          integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
  112.          crossorigin="anonymous"></script>
  113.  
  114.   <script>
  115.    
  116.     const pagina = document.URL.substring(document.URL.lastIndexOf('/')+1);
  117.     const link_da_attivare = document.querySelector("a[href='"+pagina+"']");
  118.     link_da_attivare.classList.add("active");
  119.  
  120.   </script
  121.  
  122. </body>
  123.  
  124. </html>
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!