Template:Bootstrap/man
![](http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/220px-Bootstrap_logo.svg.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Teknopedia_itwiki_-_Portale_Antico_Egitto%2C_unresponsive_mobile%2C_partial%2C_2022.png/220px-Teknopedia_itwiki_-_Portale_Antico_Egitto%2C_unresponsive_mobile%2C_partial%2C_2022.png)
Il template {{Bootstrap}} è un template sperimentale che carica una versione minimale del framework Bootstrap in una pagina di Teknopedia in lingua italiana. In questo modo puoi implementare un design responsivo.
FAQ
[modifica wikitesto]- 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 Teknopedia e le pagine dei progetti di Teknopedia (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 Teknopedia (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
[modifica wikitesto]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>
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
[modifica wikitesto]- 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
ecol
abbiano la rispettiva chiusura - assicurarsi che i blocchi
row
abbiano direttamente all'interno solocol
e null'altro - assicurarsi che tutti i blocchi
col
siano direttamente dentro unarow
- non indentare il codice
- → questo perché in MediaWiki lo spazio ad inizio riga ha un significato speciale
Altre regole nella documentazione ufficiale di Bootstrap:
Esempio semplice (con struttura visibile)
[modifica wikitesto]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:
{{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:
{{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
[modifica wikitesto]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}}
- → ad esempio
Se desideri un esempio pronto senza struttura visibile, vedi:
Esempio semplice (senza struttura visibile)
[modifica wikitesto]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:
{{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:
{{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:
Funzionamento tecnico
[modifica wikitesto]Il template si occupa semplicemente di caricare questo foglio di stile nella pagina scelta:
Il foglio di stile è stato importato da questo progetto simile:
Alcune discussioni tecniche correlate: