Începe cu Boostrap 5

22 iulie, 2023

Dacă într-un articol anterior explicam ce este Bootstrap 5.3 și cum te poate ajuta să creezi site-uri rapide și receptive, în acest articol începem să construim simplu și rapid folosind șablonul de start.

Șablon de start pentru a începe cu Bootstrap

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Site cu Bootstrap</title>

    <!-- Includerea bibliotecii Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

    <!-- Opțional: Puteți adăuga propriul fișier CSS personalizat aici --> <!-- <link rel="stylesheet" href="css/style.css"> -->

  </head>
  <body>

    <!-- Corpul paginii --> 
    <h1>Hello, Bootstrap!</h1>
    <p>Acesta este un exemplu de pagină utilizând Bootstrap.</p>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script

    <!-- Opțional: Poți include Popper și JS-ul Bootstrap separat -->

   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>

 </body> 
</html>

Poți copia acest cod într-un fișier „index.html” separat și să începi să adăugi propriul conținut sau să utilizezi componente Bootstrap pentru a construi pagina. Acest șablon utilizează Bootstrap versiunea 5.3.0.

Dacă nu intenționezi să utilizezi meniuri derulante, popovers sau sfaturi cu instrumente, economisești câțiva kiloocteți neincluzând Popper.

Sperăm că acest șablon te va ajuta să începi cu Bootstrap 5 și să te bucuri de beneficiile design-ului web responsiv și a componentelor ușor de utilizat!