Uso molto spesso il componente modal di Bootstrap, soprattutto per visualizzare loading-dialog nel caso di operazioni AJAX.

Ad esempio:

function myFunc() {
    $.ajax({
        // OPZIONI
        beforeSend: function (xhr) {
            $('#modal_wait').modal('show');
        }
    }).done(function (res) {
        $('#modal_wait').modal('hide');
    }).fail(function (err) {
        $('#modal_wait').modal('hide');
        alert("ERRORE: " + err);
    });
}

Il componente pagination, non è nuovo di Bootstrap 4.

Però, almeno al momento, in questa versione non risulta molto responsive.

Possiamo ovviare aggiungendo una classe al componente.

Sto migrando un sito da Bootstrap 3 a Bootstrap 4, che fornisce anche una pagina apposita per facilitare la migrazione.

Ci sono comunque alcune cose un pò oscure.

Una di queste riguarda le classi visible e hidden, che in sostanza si occupano di rendere visibile / nascondere dei componenti solo a determinate risoluzioni.

Parliamo di Twitter Bootstrap 3; e specifico che questo è solo uno dei tanti servizi del genere.

Al contrario di tutti gli altri che ho provato, questo permette di scegliere i colori dei bottoni.

Ed è questa la cosa che mi è piacuita di più (mettere il nome o il testo non è molto difficile e non ci vuole un generatore automatico).

Come sostitute dei fastidiosi pupup, ormai le finestre modali la fanno da padrone.

Spesso mi è capitato di dover stampre solo il suo contenuto, tralasciando tutto il resto della pagina.

Ma le finestre modali, in verità, sono solo una parte della pagina che viene visualizzata allo scatenarsi di un evento; quindi, in realtà, state sempre dentro alla stessa pagina, e non viene aperta una vera e propria finestra come nel caso dei popup.

Come fare quindi a stamparne il suo contenuto?

Vediamo un esempio con Twitter Bootstrap.