Template:Bootstrap/man

Benvenuti nel template Bootstrap!

Esempio di un portale problematico su mobile (2022)

Il template {{Bootstrap}} è un template sperimentale che carica una versione minimale del framework Bootstrap in una pagina di Wikipedia in lingua italiana. In questo modo puoi implementare un design responsivo.

FAQ

Quando utilizzare una tabella?

Se ti serve presentare dei dati in una struttura tabulare, ti serve una tabella. Vedi Aiuto:Tabella.

Quando utilizzare Bootstrap?

Se desideri progettare un layout adatto a più dispositivi, con attenzione verso i dispositivi con schermo a larghezza ridotta, puoi usare il template {{Bootstrap}} e bisognerebbe astenersi dall'usare una tabella.

Dove utilizzare Bootstrap?

Questo template è stato pensato per iniziare a discutere l'introduzione di un design responsivo soprattutto per i portali di Wikipedia e le pagine dei progetti di Wikipedia (pagine che al 2022 sono ancora rigidamente orientate al desktop) per prendere strutture rigide realizzate tramite tabelle e convertirle in vari layout decisamente (più) flessibili. Tuttavia non è consigliabile al momento utilizzare Bootstrap nelle voci di Wikipedia (cioè è meglio evitare l'uso nel namespace principale) perché prima è necessario raccogliere un po' di pareri. Ogni commento nella pagina di discussione è molto apprezzato.

Uso base

Per un uso base questo è il codice:

{{Bootstrap}}
<div class="row">
<div class="col-md">Colonna automatica</div>
<div class="col-md">Colonna automatica</div>
<div class="col-md">Colonna automatica</div>
</div>

Risultato di esempio

Colonna automatica

Colonna automatica

Colonna automatica

In questo modo si ottiene:

• un layout ottimizzato per schermo medio/grande (avrà tutto in orizzontale)
• un layout ottimizzato per schermi piccoli (avrà tutto in verticale)

Regole base

• assicurarsi che nella pagina ci sia il template {{Bootstrap}}

→ ne basta uno ma va bene in qualsiasi punto e qualsiasi numero di volte

• assicurarsi che nella pagina tutti i blocchi row e col abbiano la rispettiva chiusura
• assicurarsi che i blocchi row abbiano direttamente all'interno solo col e null'altro
• assicurarsi che tutti i blocchi col siano direttamente dentro una row
• non indentare il codice

→ questo perché in MediaWiki lo spazio ad inizio riga ha un significato speciale

Altre regole nella documentazione ufficiale di Bootstrap:

• https://getbootstrap.com/docs/4.3/layout/grid/

Esempio semplice (con struttura visibile)

Ecco un esempio con struttura ben visibile da poter testare sia su desktop che dalla versione mobile su uno smartphone per godere delle differenze:

Colonna di larghezza 3.

Colonna di larghezza 2.

Colonna di larghezza 2.

Colonna larga 1.

Colonna larga 1.

Colonna di larghezza 3.

Colonna di larghezza 6.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin consequat ante nec pulvinar. Nam ut quam quis nunc dictum consequat. Fusce eget sem sed tortor vehicula tristique sed sit amet velit. Duis et eros vitae diam pulvinar elementum. Donec et efficitur lorem. Aliquam vel tincidunt orci. Phasellus eget diam malesuada, rhoncus sem quis, pharetra elit. Morbi vel augue eu ipsum tincidunt aliquam. Fusce ut est eu elit varius varius faucibus a elit. In nulla orci, scelerisque ut magna vel, lacinia bibendum erat. Aenean convallis suscipit nisi, vel dictum magna cursus sit amet. Curabitur vitae lacus enim.

Colonna di larghezza 6.

Suspendisse ultrices, tortor quis viverra condimentum, justo nulla imperdiet sapien, et semper nisi ex at felis. Phasellus neque nulla, tempus in bibendum eget, venenatis in massa. Aliquam erat volutpat. Ut consequat, arcu eu aliquet euismod, ex mi mattis arcu, at efficitur ante metus vel sapien. Donec non faucibus turpis. Donec tellus magna, auctor nec neque vel, commodo mollis sapien. Aliquam nec lacus non augue iaculis facilisis. Fusce eu enim eu sapien egestas tincidunt id non libero. Nullam et justo sed justo commodo gravida quis quis dui. Nulla eget laoreet massa, vel lacinia nisi. Ut a mattis tortor, sed tincidunt diam. Phasellus efficitur mi consectetur, rhoncus odio vitae, rutrum eros. Cras a orci nunc. Fusce eleifend vehicula turpis, venenatis pellentesque lorem finibus ut. Nulla ultricies turpis in felis vulputate lobortis. Fusce in euismod tellus.

Colonna di larghezza 12.

Duis justo dui, porta accumsan cursus a, viverra id urna. Aenean sit amet leo egestas, dictum felis a, molestie ipsum. Maecenas nec eros sit amet elit semper volutpat. Fusce sed tincidunt lacus. Phasellus dui diam, tristique quis laoreet a, convallis sit amet augue. Vestibulum vitae sodales mauris. Nullam nec rhoncus lacus. Etiam nisl orci, vulputate id dapibus sagittis, volutpat et lorem. Proin vitae eleifend eros. Vestibulum ac semper nulla. Integer luctus porttitor diam, vel porta purus elementum ut.

Per ottenere esattamente il risultato in alto vedi il seguente codice:

Codice di esempio originale

{{Bootstrap}}
{{Materialize colors}}
<div class="container">
<div class="row">
<div class="col-md-3 red lighten-4">
Colonna di larghezza 3.
</div>
<div class="col-md-2 pink lighten-4">
Colonna di larghezza 2.
</div>
<div class="col-md-2 yellow accent-2">
Colonna di larghezza 2.
</div>
<div class="col-md-1 indigo lighten-4">
Colonna larga 1.
</div>
<div class="col-md-1 pink">
Colonna larga 1.
</div>
<div class="col-md-3 blue lighten-4">
Colonna di larghezza 3.
</div>
<div class="col-md-6 red">
Colonna di larghezza 6.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin consequat ante nec pulvinar. Nam ut quam quis nunc dictum consequat. Fusce eget sem sed tortor vehicula tristique sed sit amet velit. Duis et eros vitae diam pulvinar elementum. Donec et efficitur lorem. Aliquam vel tincidunt orci. Phasellus eget diam malesuada, rhoncus sem quis, pharetra elit. Morbi vel augue eu ipsum tincidunt aliquam. Fusce ut est eu elit varius varius faucibus a elit. In nulla orci, scelerisque ut magna vel, lacinia bibendum erat. Aenean convallis suscipit nisi, vel dictum magna cursus sit amet. Curabitur vitae lacus enim.
</div>
<div class="col-md-6 green">
Colonna di larghezza 6.

Suspendisse ultrices, tortor quis viverra condimentum, justo nulla imperdiet sapien, et semper nisi ex at felis. Phasellus neque nulla, tempus in bibendum eget, venenatis in massa. Aliquam erat volutpat. Ut consequat, arcu eu aliquet euismod, ex mi mattis arcu, at efficitur ante metus vel sapien. Donec non faucibus turpis. Donec tellus magna, auctor nec neque vel, commodo mollis sapien. Aliquam nec lacus non augue iaculis facilisis. Fusce eu enim eu sapien egestas tincidunt id non libero. Nullam et justo sed justo commodo gravida quis quis dui. Nulla eget laoreet massa, vel lacinia nisi. Ut a mattis tortor, sed tincidunt diam. Phasellus efficitur mi consectetur, rhoncus odio vitae, rutrum eros. Cras a orci nunc. Fusce eleifend vehicula turpis, venenatis pellentesque lorem finibus ut. Nulla ultricies turpis in felis vulputate lobortis. Fusce in euismod tellus.
</div>
<div class="col-md-12 deep-purple lighten-4">
Colonna di larghezza 12.

Duis justo dui, porta accumsan cursus a, viverra id urna. Aenean sit amet leo egestas, dictum felis a, molestie ipsum. Maecenas nec eros sit amet elit semper volutpat. Fusce sed tincidunt lacus. Phasellus dui diam, tristique quis laoreet a, convallis sit amet augue. Vestibulum vitae sodales mauris. Nullam nec rhoncus lacus. Etiam nisl orci, vulputate id dapibus sagittis, volutpat et lorem. Proin vitae eleifend eros. Vestibulum ac semper nulla. Integer luctus porttitor diam, vel porta purus elementum ut.
</div>
</div><!-- end row -->
</div><!-- end container -->

Per vedere il codice pulito (senza i colori) vedi quest'altro codice:

Codice di esempio pulito (senza colori)

{{Bootstrap}}
<div class="row">
<div class="col-md-3">
Colonna di larghezza 3.
</div>
<div class="col-md-2">
Colonna di larghezza 2.
</div>
<div class="col-md-2">
Colonna di larghezza 2.
</div>
<div class="col-md-1">
Colonna larga 1.
</div>
<div class="col-md-1">
Colonna larga 1.
</div>
<div class="col-md-3">
Colonna di larghezza 3.
</div>
<div class="col-md-6">
Colonna di larghezza 6.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin consequat ante nec pulvinar. Nam ut quam quis nunc dictum consequat. Fusce eget sem sed tortor vehicula tristique sed sit amet velit. Duis et eros vitae diam pulvinar elementum. Donec et efficitur lorem. Aliquam vel tincidunt orci. Phasellus eget diam malesuada, rhoncus sem quis, pharetra elit. Morbi vel augue eu ipsum tincidunt aliquam. Fusce ut est eu elit varius varius faucibus a elit. In nulla orci, scelerisque ut magna vel, lacinia bibendum erat. Aenean convallis suscipit nisi, vel dictum magna cursus sit amet. Curabitur vitae lacus enim.
</div>
<div class="col-md-6">
Colonna di larghezza 6.

Suspendisse ultrices, tortor quis viverra condimentum, justo nulla imperdiet sapien, et semper nisi ex at felis. Phasellus neque nulla, tempus in bibendum eget, venenatis in massa. Aliquam erat volutpat. Ut consequat, arcu eu aliquet euismod, ex mi mattis arcu, at efficitur ante metus vel sapien. Donec non faucibus turpis. Donec tellus magna, auctor nec neque vel, commodo mollis sapien. Aliquam nec lacus non augue iaculis facilisis. Fusce eu enim eu sapien egestas tincidunt id non libero. Nullam et justo sed justo commodo gravida quis quis dui. Nulla eget laoreet massa, vel lacinia nisi. Ut a mattis tortor, sed tincidunt diam. Phasellus efficitur mi consectetur, rhoncus odio vitae, rutrum eros. Cras a orci nunc. Fusce eleifend vehicula turpis, venenatis pellentesque lorem finibus ut. Nulla ultricies turpis in felis vulputate lobortis. Fusce in euismod tellus.
</div>
<div class="col-md-12">
Colonna di larghezza 12.

Duis justo dui, porta accumsan cursus a, viverra id urna. Aenean sit amet leo egestas, dictum felis a, molestie ipsum. Maecenas nec eros sit amet elit semper volutpat. Fusce sed tincidunt lacus. Phasellus dui diam, tristique quis laoreet a, convallis sit amet augue. Vestibulum vitae sodales mauris. Nullam nec rhoncus lacus. Etiam nisl orci, vulputate id dapibus sagittis, volutpat et lorem. Proin vitae eleifend eros. Vestibulum ac semper nulla. Integer luctus porttitor diam, vel porta purus elementum ut.
</div>
</div><!-- end row -->

Spiegazione

Le parti importantanti dell'esempio in alto (non legate ai colori) sono:

• comprendere il design responsivo

→ il layout è differente fra schermi medio/grandi (tablet/desktop) e schermi piccoli (smartphone)

→ in questo esempio su schermo piccolo tutte le colonne collassano una sotto l'altra

• comprendere l'uso del codice col-md-*

→ il codice col-md-3 crea una colonna larga 3

→ il codice col-md-6 crea una colonna larga 6

→ il codice col-md-12 crea una colonna larga 12

• comprendere cosa significa dire "larga 3" etc.

→ ogni colonna ha una dimensione da 1 a 12 (1: molto piccola, 12: occupa l'intera riga)

→ se la somma delle colonne supera 12, le altre colonne proseguono automaticamente a capo

• comprendere la struttura HTML

→ le "righe" hanno classe CSS row e contengono tutte le "colonne"

→ le "colonne" hanno classe CSS che inizia con col

Note

• per comodità le aree del primo esempio sono state colorate ma non si è obbligati a farlo

  → ad esempio pink lighten-4 applica semplicemente un colore rosa molto chiaro

  → per approfondire i colori vedi il template {{Materialize colors}}

Se desideri un esempio pronto senza struttura visibile, vedi:

• #Esempio semplice (senza struttura visibile)

Esempio semplice (senza struttura visibile)

Ecco un esempio senza la struttura in evidenza, i cui testi interni sono perfettamente allineati con i testi della pagina all'esterno:

Colonna di larghezza 6.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin consequat ante nec pulvinar. Nam ut quam quis nunc dictum consequat. Fusce eget sem sed tortor vehicula tristique sed sit amet velit. Duis et eros vitae diam pulvinar elementum. Donec et efficitur lorem. Aliquam vel tincidunt orci. Phasellus eget diam malesuada, rhoncus sem quis, pharetra elit. Morbi vel augue eu ipsum tincidunt aliquam. Fusce ut est eu elit varius varius faucibus a elit. In nulla orci, scelerisque ut magna vel, lacinia bibendum erat. Aenean convallis suscipit nisi, vel dictum magna cursus sit amet. Curabitur vitae lacus enim.

Colonna di larghezza 6.

Suspendisse ultrices, tortor quis viverra condimentum, justo nulla imperdiet sapien, et semper nisi ex at felis. Phasellus neque nulla, tempus in bibendum eget, venenatis in massa. Aliquam erat volutpat. Ut consequat, arcu eu aliquet euismod, ex mi mattis arcu, at efficitur ante metus vel sapien. Donec non faucibus turpis. Donec tellus magna, auctor nec neque vel, commodo mollis sapien. Aliquam nec lacus non augue iaculis facilisis. Fusce eu enim eu sapien egestas tincidunt id non libero. Nullam et justo sed justo commodo gravida quis quis dui. Nulla eget laoreet massa, vel lacinia nisi. Ut a mattis tortor, sed tincidunt diam. Phasellus efficitur mi consectetur, rhoncus odio vitae, rutrum eros. Cras a orci nunc. Fusce eleifend vehicula turpis, venenatis pellentesque lorem finibus ut. Nulla ultricies turpis in felis vulputate lobortis. Fusce in euismod tellus.

Colonna di larghezza 12.

Duis justo dui, porta accumsan cursus a, viverra id urna. Aenean sit amet leo egestas, dictum felis a, molestie ipsum. Maecenas nec eros sit amet elit semper volutpat. Fusce sed tincidunt lacus. Phasellus dui diam, tristique quis laoreet a, convallis sit amet augue. Vestibulum vitae sodales mauris. Nullam nec rhoncus lacus. Etiam nisl orci, vulputate id dapibus sagittis, volutpat et lorem. Proin vitae eleifend eros. Vestibulum ac semper nulla. Integer luctus porttitor diam, vel porta purus elementum ut.

L'esempio appena citato è generato con il seguente codice:

Codice di esempio originale

{{Bootstrap}}
{{Materialize colors}}
<div class="row">
<div class="col-md-6 red-text">
Colonna di larghezza 6.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin consequat ante nec pulvinar. Nam ut quam quis nunc dictum consequat. Fusce eget sem sed tortor vehicula tristique sed sit amet velit. Duis et eros vitae diam pulvinar elementum. Donec et efficitur lorem. Aliquam vel tincidunt orci. Phasellus eget diam malesuada, rhoncus sem quis, pharetra elit. Morbi vel augue eu ipsum tincidunt aliquam. Fusce ut est eu elit varius varius faucibus a elit. In nulla orci, scelerisque ut magna vel, lacinia bibendum erat. Aenean convallis suscipit nisi, vel dictum magna cursus sit amet. Curabitur vitae lacus enim.
</div>
<div class="col-md-6 green-text">
Colonna di larghezza 6.

Suspendisse ultrices, tortor quis viverra condimentum, justo nulla imperdiet sapien, et semper nisi ex at felis. Phasellus neque nulla, tempus in bibendum eget, venenatis in massa. Aliquam erat volutpat. Ut consequat, arcu eu aliquet euismod, ex mi mattis arcu, at efficitur ante metus vel sapien. Donec non faucibus turpis. Donec tellus magna, auctor nec neque vel, commodo mollis sapien. Aliquam nec lacus non augue iaculis facilisis. Fusce eu enim eu sapien egestas tincidunt id non libero. Nullam et justo sed justo commodo gravida quis quis dui. Nulla eget laoreet massa, vel lacinia nisi. Ut a mattis tortor, sed tincidunt diam. Phasellus efficitur mi consectetur, rhoncus odio vitae, rutrum eros. Cras a orci nunc. Fusce eleifend vehicula turpis, venenatis pellentesque lorem finibus ut. Nulla ultricies turpis in felis vulputate lobortis. Fusce in euismod tellus.
</div>
<div class="col-md-12 purple-text">
Colonna di larghezza 12.

Duis justo dui, porta accumsan cursus a, viverra id urna. Aenean sit amet leo egestas, dictum felis a, molestie ipsum. Maecenas nec eros sit amet elit semper volutpat. Fusce sed tincidunt lacus. Phasellus dui diam, tristique quis laoreet a, convallis sit amet augue. Vestibulum vitae sodales mauris. Nullam nec rhoncus lacus. Etiam nisl orci, vulputate id dapibus sagittis, volutpat et lorem. Proin vitae eleifend eros. Vestibulum ac semper nulla. Integer luctus porttitor diam, vel porta purus elementum ut.
</div>
</div><!-- end row -->

Per testare solo la struttura senza alcun colore puoi visualizzare questo codice:

Codice di esempio pulito (senza colori)

{{Bootstrap}}
<div class="row">
<div class="col-md-6">
Colonna di larghezza 6.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin consequat ante nec pulvinar. Nam ut quam quis nunc dictum consequat. Fusce eget sem sed tortor vehicula tristique sed sit amet velit. Duis et eros vitae diam pulvinar elementum. Donec et efficitur lorem. Aliquam vel tincidunt orci. Phasellus eget diam malesuada, rhoncus sem quis, pharetra elit. Morbi vel augue eu ipsum tincidunt aliquam. Fusce ut est eu elit varius varius faucibus a elit. In nulla orci, scelerisque ut magna vel, lacinia bibendum erat. Aenean convallis suscipit nisi, vel dictum magna cursus sit amet. Curabitur vitae lacus enim.
</div>
<div class="col-md-6">
Colonna di larghezza 6.

Suspendisse ultrices, tortor quis viverra condimentum, justo nulla imperdiet sapien, et semper nisi ex at felis. Phasellus neque nulla, tempus in bibendum eget, venenatis in massa. Aliquam erat volutpat. Ut consequat, arcu eu aliquet euismod, ex mi mattis arcu, at efficitur ante metus vel sapien. Donec non faucibus turpis. Donec tellus magna, auctor nec neque vel, commodo mollis sapien. Aliquam nec lacus non augue iaculis facilisis. Fusce eu enim eu sapien egestas tincidunt id non libero. Nullam et justo sed justo commodo gravida quis quis dui. Nulla eget laoreet massa, vel lacinia nisi. Ut a mattis tortor, sed tincidunt diam. Phasellus efficitur mi consectetur, rhoncus odio vitae, rutrum eros. Cras a orci nunc. Fusce eleifend vehicula turpis, venenatis pellentesque lorem finibus ut. Nulla ultricies turpis in felis vulputate lobortis. Fusce in euismod tellus.
</div>
<div class="col-md-12">
Colonna di larghezza 12.

Duis justo dui, porta accumsan cursus a, viverra id urna. Aenean sit amet leo egestas, dictum felis a, molestie ipsum. Maecenas nec eros sit amet elit semper volutpat. Fusce sed tincidunt lacus. Phasellus dui diam, tristique quis laoreet a, convallis sit amet augue. Vestibulum vitae sodales mauris. Nullam nec rhoncus lacus. Etiam nisl orci, vulputate id dapibus sagittis, volutpat et lorem. Proin vitae eleifend eros. Vestibulum ac semper nulla. Integer luctus porttitor diam, vel porta purus elementum ut.
</div>
</div><!-- end row -->

Se desideri invece avere le aree della struttura ben visibili, torna a:

• #Esempio semplice (con struttura visibile)

Funzionamento tecnico

Il template si occupa semplicemente di caricare questo foglio di stile nella pagina scelta:

• Template:Bootstrap/bootstrap-grid-minimal.css

Il foglio di stile è stato importato da questo progetto simile:

• mw:User:TheDJ/bootstrap

Alcune discussioni tecniche correlate:

• phabricator:T90687

Pagine correlate

• Template:Materialize colors