twitter-bootstrap
Migrazione a Bootstrap 4

introduzione

Osservazioni

Cambiamenti nel layout di colonne del sistema di griglia in Bootstrap 4

Il primo blocco di codice è scritto in Bootstrap 3. In Bootstrap 3 ci sono 4 tipi di specifiche di colonna, in particolare col-md-* col-lg-* col-sm-* col-xs-* . Un layout completamente reattivo sarà simile a questo in Bootstrap 3:

<div class="row">
    <div class="col-lg-4 col-md-8 col-sm-8 col-xs-8">
        contents
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        contents
    </div>
</div>

In Bootstrap 4, hanno aggiunto un nuovo livello di griglia sm sotto 768px per un controllo più granulare. Quindi Bootstrap 4 ha col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* . Quindi quello che era .col-md-6 in v3 ora è .col-lg-6 in v4. Si noti che il -xs è stato rimosso in modo che .col-6 rappresenti 6 unità di colonna nel punto di interruzione extra piccolo (predefinito).

Quindi, se ora vogliamo scrivere lo stesso esempio sopra in Bootstrap 4, sarebbe simile a questo:

<div class="row">
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8">
        contents
    </div>
    <div class="col-xl-8 col-lg-8 col-md-4 col-sm-4 col-4">
        contents
    </div>
</div>

Layout di griglia Bootstrap 4

Modifiche al supporto del browser

In twitter-bootstrap 4 il supporto per IE8, IE9, and iOS 6 è stato eliminato. v4 ora è solo IE10+ and iOS 7+ . Per i siti che necessitano di uno di questi, utilizzare v3.

In twitter-bootstrap 4 è stato aggiunto il supporto ufficiale per Android v5.0 Lollipop's Browser and WebView . Le versioni precedenti di Android Browser e WebView rimangono unofficially supported solo in modo unofficially supported .

Applica la rimozione della classe

Affix viene rimosso da Bootstrap 4.

Si consiglia di utilizzare una position: sticky polyfill position: sticky invece.

Se si utilizza Affix per applicare stili aggiuntivi non di posizione, i polyfill potrebbero non supportare il caso d'uso. Un'opzione per tali usi è la libreria ScrollPos-Styler di terze parti.

Secondo la documentazione di Bootstrap

Dropped il plugin jQuery di Affix. Raccomandiamo di usare una posizione: polyfill appiccicoso. Vedi la voce HTML5 per i dettagli e i consigli specifici sul polyfill.

Se si utilizza Affix per applicare stili aggiuntivi non di posizione, i polyfill potrebbero non supportare il caso d'uso. Un'opzione per tali usi è la libreria ScrollPos-Styler di terze parti.

Se qualcuno sta migrando da Bootstrap v3 a Bootstrap v4 l'approccio fallback è indicato di seguito:

HTML

<header>
    
</header>
<nav class="navbar navbar-light bg-faded" data-toggle="affix">
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        ☰
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

        <ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Menu
                </a>
                <div class="dropdown-menu" aria-labelledby="Preview">
                    <a class="dropdown-item" href="">Logout</a>

                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container" id="main">
    <h2>Hello Bootstrap 4.</h2>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-9">
            <p>3 wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore
                PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica Williamsburg
                sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
        </div>
        <div class="col-xs-6 col-md-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

header {
height: 220px;
background: #ccc;
}

JAVASCRIPT

$(document).ready(function() {

  var toggleAffix = function(affixElement, scrollElement, wrapper) {
  
    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;
    
    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
      
  };
  

  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');
    
    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });
    
    // init
    toggleAffix(ele, $(window), wrapper);
  });
  
});

Bootstrap 4 Navbar

Il nuovo componente di barra di avvio di Bootstrap 4 è stato migliorato rispetto al suo predecessore Bootstrap 3.x. In Bootstrap 4, Navbar è reattivo per impostazione predefinita e utilizza la tecnologia Flexbox per semplificare l'allineamento dei contenuti di Navbar. È anche semplice utilizzare le nuove navbar-toggleable-* per modificare il punto di interruzione della Navbar. Ora il Navbar ha 6 dimensioni di breakpoint o "stati" in modo da poter facilmente avere una delle seguenti opzioni di Navbar.

• Il Navbar non collassa mai nella vista mobile verticale ed è sempre orizzontale.
• La barra di navigazione è sempre collassata nella vista verticale e attivata tramite l'hamburger.
• Il Navbar collassa in visualizzazione verticale in uno dei 4 punti di interruzione reattivi .

Basic Bootstrap 4 Navbar

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

Come puoi vedere dal codice sopra la classe di navbar-header è stata rimossa da Bootstrap 4 e il container-fluid non è più necessario per un Navbar a larghezza piena.

Modifica del punto di interruzione della navbar

La classe navbar-toggleable-md fa collassare verticalmente la barra di navigazione sopra (e mostra l'icona di toggler) al punto di interruzione medio (md) di 992px. Per cambiare questo in un punto di interruzione diverso, dovremmo solo scambiare navbar-toggleable-md con uno di questi ..

• navbar-toggleable = compressione su larghezza xs <576 px
• navbar-toggleable-sm = compressione al sm larghezze <768px
• navbar-toggleable-lg = compressione su larghezza lg <1200px

Demo di Navbar Breakpoint 4 Breakpoint

Modifica dell'allineamento della barra di navigazione

Flexbox ci consente di modificare facilmente l'allineamento di Navbar e dei suoi contenuti (marchio, link, moduli o testo). Il contenuto predefinito di Navbar è allineato a sinistra. Naturalmente ci sono molti altri scenari di allineamento ...

• Marchio rimasto (predefinito), centro dei collegamenti e destra
• Centro marchi, collegamenti a sinistra ea destra
• Marchio a sinistra e collegamenti a destra
• Input di marca, link e larghezza di riempimento
• Nessuna marca, centro dei collegamenti e destra
• Marchio rimasto, collegamenti direttamente all'interno del contenitore
• Collegamenti giustificati (larghezza di riempimento) centrati

Bootstrap 4 barra di navigazione con marchio centrato e collegamenti sinistra / destra

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand d-flex mx-auto" href="#">Navbar 2</a>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Bootstrap 4 Navbar con Marchio sinistro, Centro collegamenti e Destra

<nav class="navbar navbar-light navbar-toggleable-sm bg-faded justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar3">
        <ul class="navbar-nav mx-auto w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

Demo di allineamento Navbar: http://www.codeply.com/go/qhaBrcWp3v

Altro su Bootstrap 4 Navbar

Personalizzazione del colore, allineamento o altezza

Bootstrap 3 to Bootstrap 4 Modifiche CSS

Poiché Bootstrap 4 è una riscrittura importante , molti dei nomi delle classi di Bootstrap 3.x sono stati modificati o rimossi. La ristrutturazione di componenti come il Navbar e l'introduzione di nuove classi CSS e supporto Flexbox significa che l'aggiornamento a 4.x non è un semplice processo di conversione da 3.x.

Tuttavia, esistono alcune classi CSS Bootstrap 3.x con una sostituzione Bootstrap 4 specifica.

Variazioni nome / classe selettore CSS da Bootstrap 3.3.7 a 4 (alpha 6)

{t} - rappresenta un livello o punto di interruzione (es .: sm, md, lg, ecc.).
xs tier è l'impostazione predefinita e non è necessario specificare: col-3 , col-6 , ecc.

{u} - rappresenta una dimensione unità di misura (es .: 1-12)

Vedi anche:
Bootstrap 3.x to 4 Strumento di migrazione
Novità di Bootstrap 4

Bootstrap 4 Vertical Align

Ottenere elementi al centro o in basso allineati verticalmente è sempre stata una sfida con CSS e Bootstrap. L'allineamento verticale desiderato può essere all'interno di un contenitore genitore, o relativo ad elementi adiacenti.

Ora che Bootstrap 4 è flexbox, di default ci sono molti approcci diversi per l'allineamento verticale usando: margini automatici , utilità Flexbox o le utilità di visualizzazione insieme alle utilità di allineamento verticale.

All'inizio, le utilità di allineamento verticale sembrerebbero una scelta ovvia, ma funzionano solo con elementi di visualizzazione inline e da tavolo. Ecco alcune opzioni e scenari di allineamento verticale di Bootstrap 4 ...

1 - Centro verticale che utilizza i margini automatici:

Un modo per centrare verticalmente è usare my-auto . Questo centrerà l'elemento all'interno del suo contenitore. Ad esempio, h-100 rende la riga a tutta altezza e my-auto centrerà verticalmente la col-sm-12 .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Centro verticale che utilizza la demo dei margini automatici

my-auto rappresenta i margini sull'asse y verticale ed è equivalente a:

margin-top: auto;
margin-bottom: auto;

2 - Centro verticale con Flexbox:

Dal momento che Bootstrap 4 .row è ora display:flex puoi semplicemente usare l' align-self-center su qualsiasi colonna per .row verticalmente ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

oppure, usa align-items-center sull'intero .row per centrare verticalmente allineare tutti i col-* nella riga ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Demo di colonne verticali con altezza differente

3 - Centro verticale che utilizza i visualizzatori:

Bootstrap 4 ha utilità di visualizzazione che possono essere utilizzate per la display:table , display:table-cell , display:inline , ecc. Questi possono essere usati con l' allineamento verticale util per allineare elementi inline, inline-block o table cell.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Centro verticale che utilizza la demo di Display Utils

Bootstrap 4 Centering

Come centrare un elemento, una colonna o un contenuto all'interno di una colonna funziona diversamente in Bootstrap 4.

Centro orizzontale

• text-center è ancora utilizzato per la display:inline elementi in display:inline
• mx-auto sostituisce center-block al centro display:block elementi
• offset-* o mx-auto può essere utilizzato per centrare le colonne della griglia

mx-auto (margini dell'asse x automatico) centrerà il display:block o display:flex elementi display:flex che hanno una larghezza definita , ( % , vw , px , ecc.). Flexbox è usato di default sulle colonne della griglia, quindi ci sono anche vari metodi di centraggio del flexbox.

Centro testo o elementi in linea: text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

display:block centrale display:block o display:flex : mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

Centra le colonne usando gli offset: offset-*

<div class="row">
    <div class="col-4 offset-4">
        <h6>I'm .col-4 centered (offset 4)
    </div>
</div>

Le colonne possono anche essere centrate con: mx-auto

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

Demo Bootstrap 4 Centering orizzontale

Centro verticale

Per il centraggio verticale in Bootstrap 4 (asse y), consultare i documenti su: Bootstrap 4 Vertical Align

Bootstrap 4 Column Order

Cambiare l'ordine (o posizione) era possibile in Bootstrap 3 usando le classi push pull. In Bootstrap 4, le classi push pull funzionano ancora e si può utilizzare anche l' ordine flexbox .

In Bootstrap 4, le classi push pull ora sono push-{viewport}-{units} e pull-{viewport}-{units} e xs- infix è stato rimosso. Considera questo esempio che modifica l'ordine delle colonne nel layout 1-3-2 su xs e sm :

<div class="row">
    <div class="col-3 col-md-6">
        1
    </div>
    <div class="col-3 col-md-6 push-6 push-md-0">
        2
    </div>
    <div class="col-6 col-md-12 pull-3 pull-md-0">
        3
    </div>
</div>

Bootstrap 4 Push Pull Demo

Poiché la nuova versione 4 è flexbox, un'altra opzione è quella di utilizzare le classi dell'utility flexbox per modificare l'ordine delle colonne. Ora a piena larghezza, 12 colonne col-*-12 possono essere invertite utilizzando l' ordine flexbox .

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Flexbox Ordering Demo