Advertisement
fcamuso

Bootstrap - lezione 1

Jul 2nd, 2023
890
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.84 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <!-- -------------------------------------------------------------------------------------- -->
  8.  
  9.     <!-- Bootstrap CSS v5.3.0 -->
  10.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  11.  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  12.  crossorigin="anonymous">
  13.  
  14.     <title>Con Bootstrap</title>
  15.  
  16.     <style>
  17.      
  18.     </style>
  19.   </head>
  20.  
  21.   <body>
  22.  
  23.   <div data-bs-theme="light">
  24.     <button type="button" class="btn btn-primary">Primary</button>
  25.     <button type="button" class="btn btn-secondary">Secondary</button>
  26.     <button type="button" class="btn btn-success">Success</button>
  27.     <button type="button" class="btn btn-transparent">Transparent</button>
  28.     <button type="button" class="btn btn-danger">Danger</button>
  29.     <button type="button" class="btn btn-warning">Warning</button>
  30.     <button type="button" class="btn btn-info">Info</button>
  31.     <button type="button" class="btn btn-light">Light</button>
  32.     <button type="button" class="btn btn-dark">Dark</button>
  33.   </div>
  34.  
  35.   <br><br>
  36.  
  37.     <button type="button" class="btn btn-outline-primary">Primary</button>
  38.     <button type="button" class="btn btn-outline-secondary">Secondary</button>
  39.     <button type="button" class="btn btn-outline-success">Success</button>
  40.     <button type="button" class="btn btn-outline-transparent">Transparent</button>
  41.     <button type="button" class="btn btn-outline-danger">Danger</button>
  42.     <button type="button" class="btn bg-primary border-danger text-success">Warning</button>
  43.     <button type="button" class="btn btn-outline-info">Info</button>
  44.     <button type="button" class="btn btn-outline-light">Light</button>
  45.     <button type="button" class="btn btn-outline-dark">Dark</button>
  46.    
  47.     <br><br>
  48.    
  49.     <button type="button" class="btn btn-link">Link</button>
  50.  
  51.     <br><br>
  52.    
  53.     <!--
  54.      bg-xxxx = background
  55.      border-xxxx = bordi
  56.      text-xxxx = colore testo
  57.    -->
  58.  
  59.     <h1 style="max-width: 300px;" class="bg-body-secondary text-primary
  60.               border-danger border
  61.               border-top-0 border-bottom-0">
  62.       Hello World
  63.     </h1>
  64.  
  65.     <small>piccolo hello world</small>
  66.    
  67.     <div class="text-bg-danger">
  68.       NOTARE ANCHE IL RESET DEI CSS (ad esempio azzeramento margini)
  69.     </div>
  70.    
  71.    
  72.    
  73.    <!-- Bootstrap JavaScript Libraries -->
  74.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  75.          integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
  76.          crossorigin="anonymous"></script>
  77.   </body>
  78. </html>
  79.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement