3E Sia: Esercizio iterazione tra CSS e Bootstrap 5
3E Sia: Esercizio iterazione tra CSS e Bootstrap 5
Aprire il sito responsive-web-site al link: https://drive.google.com/drive/folders/19mglfzynIpQOXnsEG9PV4E86OH7__XwJ?usp=sharing con Microsoft Espression Web, inserire in una pagina a scelta un modulo bootstrap 5.0.
La pagina deve contenere pertanto il vostro CSS personalizzato e un modulo con Bootstrap 5.
Esercizio da consegnare il 17 marzo 2022
esempio:
Link utili per l'esercizio:
https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
https://italia.github.io/bootstrap-italia/docs/utilities/colori/#colore-di-sfondo
Nella pagina Web responsive gestita con il CSS dovete aggiungere nella head il meta name viewport e le librerie Bootstrap 5 e JS
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Nel body e precisamente nel main e non nel container aggiungere:
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Modulo Bootstrap 5</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
Bootstrap Italia eredita gli stessi meccanismi per la gestione dei colori di Bootstrap 4.6.1, dove i colori del tema sono descritti attraverso una variabile Sass nominata $theme-colors.
La principale novità introdotta da Bootstrap Italia è una serie di varianti della tonalità primaria primary basate sullo spazio colore HSB (coincidente con il modello HSV).
Questo permette di avere a disposizione 16 diverse varianti “monocromatiche” (in quanto hue e, in gran parte anche saturation rimangono invariate) che, essendo aggiunte alla lista di $theme-colors, sono disponibili per tutti quei componenti ed utilità che ne fanno uso, come ad esempio .text- e .bg-*.
Puoi trovare maggiori informazioni sulla palette di colori a disposizione alla pagina Colori Custom.
Colore del testo
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-muted
.text-white
<p class="p-3 mb-2 text-primary">.text-primary</p>
<p class="p-3 mb-2 text-secondary">.text-secondary</p>
<p class="p-3 mb-2 text-success">.text-success</p>
<p class="p-3 mb-2 text-danger">.text-danger</p>
<p class="p-3 mb-2 text-warning">.text-warning</p>
<p class="p-3 mb-2 text-muted">.text-muted</p>
<p class="p-3 mb-2 text-white bg-dark">.text-white</p>Colore di sfondo
Allo stesso modo di quanto avviene per il testo, le classi bg-* permettono di colorare lo sfondo di un elemento; le classi per gli sfondi non hanno alcun impatto sulla proprietà color, per cui in alcuni casi sarà necessario affiancarle alle classi .text-*.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-white">.bg-warning</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
Commenti
Posta un commento