Capitolo 5 - Stringa contenenti le classi non identica

[NersOfficial]

Durante i test dei codici ho riscontrato un ulteriore errore che coinvolge la costante denominata in modo errato nel listato 5.3 ( qui per sapere di più ).

Il contenuto di questa è diverso tra il listato 5.3 e 5.5, nello specifico la prima contiene meno classi rispetto alla seconda.

Ecco il codice della costante nello specifico:

Listato 5.3

>> const itemClasses = "list-group-item border rounded-1 my-1";

Listato 5.5

>> const todoClasses = "d-flex align-items-center list-group-item my-1 border rounded-1"; 

Escludendo il nome, la seconda contiene più classi rispetto alla prima. Controllando nel testo (sia cartaceo che digitale), le classi d-flex align-items-center non sono specificate e quindi manca una loro spiegazione (come fatto nelle altre classi boostrap incontrate in precedenza) e nel Listato 5.5 non è evidenziata come modifica (in grassetto come fatto per ogni modifica).

[lifeisfoo]

C'è stato sicuramente qualche problema durante l'impaginazione è il grassetto è andato perduto. La spiegazione, invece, ho proprio dimenticato di inserirla: la trovi di seguito con anche delle immagini che spero rendano tutto più chiaro.

La classe d-flex aggiunta la proprietà display: flexbox all'elemento, e permette quindi di posizionare correttamente gli altri elementi al suo interno.

Se non avessimo usato anche la classe align-items-center, gli elementi all'interno del contenitore con classe d-flex si sarebbero posizionati in modo non allineato rispetto all'asse delle y. Nota come la checkbox è leggermente più in alto rispetto al testo.

Queste sono le varie possibile configurazioni verticali, il quarto esempio è quello con align-items-center.

Infine, se non avessimo usato la classe d-flex, gli elementi si sarebbero posizioni in modo non visivamente ordinato, come già abbiato detto prima.

Spero che la spiegazione sia stata chiara.

Grazie @NersOfficial per la segnalazione 👍