Bootstrap
Per ottenere siti responsive, in modo veloce
BOOTSTRAP
Per creare dei box allineati l’istruzione CSS è float :left unito all’uso delle media queryBootstrap consente di ottenere siti con questa caratteristica.
Bootstrap divide lo schermo in 12 colonne attraverso istruzioni del tipo
<div class="container">
<div class="row">
<div class=" col-md-6 col-sm-12">
…codice html
</div>
</div>
</div>
Si definisce quante colonne utilizzare nei diversi device:
col-md-6: 2 colonne per pc ≥768px
col-sm-12: 1 colonna per device small (smartphone) ≥576px
In questo modo due box orizzontali in un pc, diventano verticali in uno smartphone
Ecco la classificazione
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra | small | <576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra | xl | ≥1200px |
| Extra | xxl | ≥1400px |
Ma bootstrap non è solo questo, consente anche di avere del codice pronto per
- menu
- form
- modali
- tabelle
Per poterlo usare si devono scaricare due file :
• bootstrap.css . Che contiene la definizione delle classi CSS
• Bootstrap.js contiene il codice javascript
Poi collegarli al file in uso
Per questo nella sezione <head>
bootstrap 5
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
Nella versione CDN. Nel file: https://getbootstrap.com
Tutti i dettagli, che richiederebbero libro dedicato
Noterete poi che sono disponibile 3 versioni Bootstrap 3 e Bootstrap 4 e ultimo nato Bootstrap 5
La differenza principale fra la versione 3 e 4, è l’uso di flex box.
Bootstrap 5 usa flex e non richiede jquery
Grazie a flex box i box diventano di dimensione flessibile.
Ecco un esempio di flex box
display:flex;
flex-direction: column-reverse;
