C'è chi purtroppo non si accontenta mai di nulla, e deve rompere fino all'inverosimile.
E così mi è capitato di dover impostare delle dimensioni fisse ad una colonna della grdi di Bootstrap 4.
In sostanza, partendo da qui:
<div class="container-fluid">
<div class="row">
<div class="col-md-11"></div>
<div class="col-md-1 sx_striscia"></div>
</div>
</div>
Per un progetto ho usato il modal di Bootstrap 4 come loading page.
Ovviamente avevo la necessità di visualizzarlo full screen.
Vi posto il codice HTML e CSS che ho usato.
La documentazione di Bootstrap è ottima, tranne in alcuni punti.
Uno di questi è il vertical align; anche se ci sono delle classi preposte, non sono di facile lettura.
Oggi vi propongo un mio esempio che sto usando in produzione; ovviamente possono esserci altri modi.
L'attributo required di HTML 5 ci ha levato un sacco di rogne nella validazione dei form.
Lo impostate e lui farà tutto da solo, bloccando il form e visualizzando un messaggio.
Il messaggio è praticamente automatico e preimpostato, e penso che la lingua dipenda dal pc sui gira il browser.
Il modal di Bootstrap 4 crea un'area grigia, con classe CSS modal-backdrop, che dovrebbe aiutare l'utente indicandogli l'area in cui cliccare per uscire.
In un sito mi è stato chiesto di rimuovere l'area grigia.
Il modal di Bootstrap 4 è un componente a dir poco usato.
Solo che di default, l'effetto fade è solo dal top.
Io avevo bisogno di visualizzarlo dal lato; nel mio caso il destro, ma visualizzarlo dal lato sinistro richiede poche modifiche.
La navbar di Bootstrap ci arriva praticamente completa di tutto.
Anche dei sottomenu volendo; basta copiare gli esempi dalla documentazione.
In pratica ho la necssità di impostare che i div / la pagina sia sempre al 100% della finestra.
Voi direte, bastano queste regole CSS:
html, body, main {
height:100%;
min-height: 100%;
}Guardando alla documentazione, la navbar di Bootstrap 4 ha già una classe CSS per allineare gli elementi.
A me non ha funzionato, non so perchè; però ho risolto in altra maniera.
De default il tag img di HTML non ha la possibilità di impostare una immagine di default.
Se usiamo un linguaggio lato server, possiamo controllare l'esistenza di una immagine, ed in caso specificarne una.
Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza
Creative Commons Attribution-Noncommercial-Share Alike 2.5.
.