Advertisement
fcamuso

Bootstrap - lezione 2

Jul 4th, 2023
900
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.86 KB | None | 0 0
  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.  
  18.   <button class="btn btn-primary ms-4"> Bottone normale</button>
  19.   <button class="btn btn-primary btn-lg"> Bottone GRANDE</button>
  20.   <button id="btn" class="btn btn-primary btn-sm"> Bottone piccolo</button>
  21.   <br><br>
  22.  
  23.   <!-- via attributi  -->
  24.   <span id="span">
  25.     <button id="bottone_con_stato" class="btn btn-primary btn-lg" disabled> Bottone disabilitato</button>
  26.   </span>
  27.  
  28.   <!-- gruppi -->
  29.   <div class="btn-group mx-auto">
  30.     <button type="button" class="btn btn-primary">sx</button>
  31.     <button type="button" class="btn btn-primary">centro</button>
  32.     <button type="button" class="btn btn-primary">dx</button>
  33.   </div>
  34.   <br><br>
  35.  
  36.   <p class="bg-body-secondary mx-auto w-25">
  37.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, officiis! Velit ut molestiae, asperiores dignissimos illum, dolorum magnam hic odit inventore eligendi temporibus recusandae sit illo ex. Blanditiis, nostrum quam?
  38.   </p>
  39.  
  40.   <p class="bg-danger mx-auto w-25">
  41.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, officiis! Velit ut molestiae, asperiores dignissimos illum, dolorum magnam hic odit inventore eligendi temporibus recusandae sit illo ex. Blanditiis, nostrum quam?
  42.   </p>
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.   <!-- <p><a href="#" class="link-primary">Primary link</a></p>
  53.  <p><a href="#" class="link-secondary">Secondary link</a></p>
  54.  <p><a href="#" class="link-success">Success link</a></p>
  55.  <p><a href="#" class="link-danger">Danger link</a></p>
  56.  <p><a href="#" class="link-warning">Warning link</a></p>
  57.  <p><a href="#" class="link-info">Info link</a></p>
  58.  <p><a href="#" class="link-light">Light link</a></p>
  59.  <p><a href="#" class="link-dark">Dark link</a></p>
  60.  <p><a href="#" class="link-body-emphasis">Emphasis link</a></p> -->
  61.  
  62.   <!-- Bootstrap JavaScript Libraries -->
  63.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  64.          integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
  65.          crossorigin="anonymous"></script>
  66.  
  67.   <script>
  68.     document.getElementById("span").addEventListener("click", function () {
  69.       const btn = document.getElementById("bottone_con_stato");
  70.       if (btn.getAttribute("disabled") === null)
  71.         btn.setAttribute("disabled", "disabled");
  72.       else
  73.         btn.removeAttribute("disabled");
  74.     });
  75.   </script>
  76.  
  77. </body>
  78.  
  79. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement