06 Ottobre 2016

Questa è una piccola guida visiva per esaminare le principali differenze e le novità introdotte nell'ultima release del famoso framework creato da da Mark Otto e Jacob Thornton.

Ecco cosa è cambiato:

La griglia

Oltre ai 4 tipi di griglia già esistenti in Bootstrap 3 (‘xs’, ’sm’, ‘md’ e ‘lg’), è stato introdotto un nuovo grid tier "xl", facendo salire a 5 il numero dei breakpoints.
L'aggiunta di questo nuovo "livello" di griglia e il nuovo sistema di griglia con 5 breakpoints consentono di lavorare più facilmente al layout di dispositivi con schermo più piccolo di 544 px.


Bootstrap 4 Grid Demo

xl
lg
md
sm


xl-2 lg-3 md-4 sm-6
xl-2 lg-3 md-4 sm-6
xl-2 lg-3 md-4 sm-6
xl-2 lg-3 md-4 sm-6
xl-2 lg-3 md-4 sm-6
xl-2 lg-3 md-4 sm-6

xl-3 lg-6 md-4 sm-12
xl-3 lg-6 md-4 sm-12
xl-3 lg-6 md-4 sm-12
xl-3 lg-6 md-4 sm-12

1
2
3
4
1
2
3
4
1
2
3
4
5

I "Panels" sono diventati "Cards"

Le classi .panel e .well che erano presenti nelle versioni precedenti di Bootstrap sono state rimpiazzate da un nuovo tipo di component, le Card.
Le Bootstrap 4 Cards possono essere:
- singole
- raggruppate
- della stessa altezza (inoltre grazie al flexbox mode ora è molto più facile creare card-groups della stessa altezza)

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


Sempre per quanto riguarda le Card sono state introdotte alcune classi che consentono di cambiare rapidamente il background-color e il border-color (i colori più scuri richiedono l'uso della classe .card-inverse).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Buttons

I buttons, come nella versione precedente, mantengono un design flat anche se più sottile.
E se i colori di sfondo sono troppo pesanti? Non c'è problema, possiamo assegnargli la nuova classe .btn-outline-*



Utility Classes

Una delle nuove features più potente è l'aggiunta del responsive floats che consente di assegnare ad un elemento la proprità float basandosi sui grid tier.
Per esempio se assegnamo ad un elemento la classe pull-md-right, questo avrà il valore CSS float: right; solo sulla griglia di tipo md , cioè solo sugli schermi di medie dimensioni.

pull-md-right


Per posizionare il testo in modo responsive sono state introdotte le classi text alignment. Molto utili per il posizionamento degli elementi sono anche le classi spacing che utilizzano il margin e il padding.

Per ora Bootstrap 4 è ancora in alpha, per vedere la documentazione completa basta andare sulla pagina http://v4-alpha.getbootstrap.com/getting-started/introduction/