È possibile fare in modo che tutte le pagine dell'applicazione condividano lo stesso aspetto andando a modificare il file: Il CSS e il JavaScript di Bootstrap sono già caricati dalle righe 9 e 10.
La riga 14 si occupa di inserire in quel punto i contenuti della singola pagina.
Potremmo allora andare a inserire in tutte le pagine una navbar e un footer importando i relativi partial:
Dobbiamo specificare che i partial sono nella cartella layouts perché dovendo apparire in tutte le pagine saranno richiamati da diversi controller, come ad esempio Home. Se non specificassimo la cartella, rails andrebbe a cercare il partial in views/home/navbar.
Crea allora questi partial inserendo il codice di una navbar e un footer a tuo piacere: Probabilmente anche tu noterai un disallineamento di questo tipo: ...è perché dobbiamo mettere il contenuto di ogni pagina in un container. Potremmo farlo nel layout dell'intera applicazione in questo modo, ed evitare di farlo in ogni pagina... ...ma se in qualche pagina volessimo inserire un container fluido che si adatti all'intera larghezza dello schermo, avremmo qualche problema. Meglio allora inserire il tipo di container scelto dentro a ogni singola vista, e al suo interno mettere i contenuti della pagina, come in questo esempio:
Nota: una pagina può contenere più container anche di tipi diversi... ad esempio uno fluido per il carousel, uno per le card con i prodotti, e così via. Inoltre puoi usare tutto quello che conosci della griglia di Bootstrap per disegnare layout con più colonne:
Le tre colonne di questo esempio sono ottenute inserendo tre partial "card" dentro a tre col, a loro volta contenute in una row: