Lezione 9: Pagina interna

Offset tabelle:

Nelle precedenti lezioni, abbiamo visto come definire gli elementi nella classica struttura riga-colonne. In particolare, è molto importante ricordare che in Bootstrap una riga si compone di 12 colonne. Al momento della creazione di un testo, come quello di questa lezione, vogliamo che il tutto sia contenuto all'interno di un classico div col-X-12.

Il motivo è semplice, ricordando quanto visto nella seconda lezione inseriamo una stuttura larga quanto il nostro container per mantenere il nostro contenuto. Ma cosa succede se non vogliamo che il testo sia largo quanto l'intera struttura? Intuitivamente ci sarà sufficiente diminuire il numero di colonne. Basterà?

Come detto, la struttura della pagina in Bootstrap è rigida, per cui è sempre necessario inserire il giusto numero di colonne per ottenere la giusta visualizzazione. Inizializzando una struttura composta da 9 colonne, il 'costuttore' della pagina interpreta il tutto come "inizializza a partire dal bordo sinistro 9 colonne". A questo punto, le ulteriori classi che andremo ad istanziare come text-center andranno ad influenzare il solo contenuto delle colonne e non le colonne stesse.

In nostro supporto, abbiamo due alternative: l'utilizzo del comando offset o l'utilizzo di due formule CSS.

Nel primo caso, ci sarà sufficiente aggiungere il tag corrispettivo del tipo col-X-offset-N dove X rappresenta la grandezza del display ed N il numero di colonne che vogliamo aggiungere come offset. Se ad esempio inseriamo una colonna col-xs-6 il corrispettivo offset che dovremmo introdurre si ricaverà semplicemente dalle rimanenti colonne diviso 2. Quindi, in questo caso avremo (12-6)/2 = 3.

Resta comunque un problema con questa soluzione, infatti non ci è possibile applicarla con un numero di colonne dispari! Quindi tornando al nostro esercizio, abbiamo bisogno di applicare una soluzione che sia funzionale anche con un numero di colonne dispari. Quindi, definiamo una nuova classe col-center a cui associamo due regole CSS:

.col-center{
    float: none;
    margin: 0 auto;
}

Slide ad elemento verticale:

In questa sezione vedremo come implementare gli ultimi due elementi della nostra pagina mancanti. In dettagli, vedremo come importare ed utilizzare delle semplici funzione Javascript per lo scrolling verticale all'interno delle pagine. All'interno della demo ne abbiamo 2 esempi: il primo dalla navbar ci permette di raggiungere la sezione delle featurette, ed una seconda che dal footer ci permette di tornare in alto.

Normalmente, l'inserimento di un link alla sezione, ci permette di raggiungerla in maniera istantanea. Questa funzionalità, l'hai già utilizzata in modo trasparente su base giornaliera; in particolare, l'abbiamo utilizzata molto anche durante queste lezioni per i rimandi automatici alla documentazione attraverso link diretti. Questo è possibile mediante l'applicazione di specifici ID agli elementi della pagina che vengono richiamati attraverso l'url seguito dal simbolo #ID.

Ritornando alla settima lezione, avevamo inizializzato la sezione generica con id featurettes. Se provi ad accedere alla pagina della demo ed aggiungi in coda all'url #featurettes, verrai automaticamente indirizzato alla sezione delle featurettes!

A questo punto, vogliamo introdurre le funzioni Javascript che ci permettono di eseguire uno scrolling automatico all'interno della pagina invece di visualizzare istantaneamente la sezione. Per farlo, sarà sufficiente importare direttamente nel codice o attraverso un file esterno la seguenti funzioni:

<!-- Script page-scrolling -->
<script type="text/javascript">
    var nav_height = $('.navbar-fixed-top').height();
    $('body').css('padding-top',nav_height );       
            
    $(document).ready(function() {
        // navigazione con click	
        $('.scroll-link').on('click', function(event){
            event.preventDefault();
            var sectionID = $(this).attr("data-id");
            scrollToID('#' + sectionID, 750);
        });
        // scroll in alto
        $('.scroll-top').on('click', function(event) {
            event.preventDefault();
            $('html, body').animate({scrollTop:0}, 'slow'); 		
        });
        // mobile nav toggle
        $('#nav-toggle').on('click', function (event) {
            event.preventDefault();
            $('#main-nav').toggleClass("open");
        });
        });
        
        // funzione di scroll
        function scrollToID(id, speed){
            var offSet = 50;
            var targetOffset = $(id).offset().top - offSet;
            var mainNav = $('#main-nav');
            $('html,body').animate({scrollTop:targetOffset}, speed);
            if (mainNav.hasClass("open")) {
                mainNav.css("height", "1px").removeClass("in").addClass("collapse");
                mainNav.removeClass("open");
            }
        }
        if (typeof console === "undefined") {
            console = {
                log: function() { }
            };
        }
</script>

Per permettere il movimento utilizzando le funzioni che abbiamo importato dobbiamo aggungere le nuovi classi e l'attributo aggiuntivo che preleviamo direttamente dal codice. Quindi, implementiamo lo scroll verticale dalla navbar attraverso questo link:

<a href="#" class="scroll-link" data-id="featurettes">Scroll verticale</a>