twitter-bootstrap
Migreren naar Bootstrap 4

Invoering

Opmerkingen

Kolomopmaakwijzigingen van rastersysteem in Bootstrap 4

Het eerste codeblok is geschreven in Bootstrap 3. In Bootstrap 3 zijn er 4 soorten col-md-* col-lg-* col-sm-* col-xs-* , namelijk col-md-* col-lg-* col-sm-* col-xs-* . Een volledig responsieve lay-out ziet er als volgt uit 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 hebben ze een nieuwe sm-rasterlaag onder 768px toegevoegd voor meer gedetailleerde controle. Bootstrap 4 heeft dus col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* . Dus wat vroeger .col-md-6 in v3 was, is nu .col-lg-6 in v4. Merk op dat het infix -xs is verwijderd, zodat .col-6 6 .col-6 vertegenwoordigt bij het extra kleine (standaard) breekpunt.

Dus als we nu hetzelfde bovenstaande voorbeeld in Bootstrap 4 willen schrijven, zou het er zo uitzien:

<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>

Bootstrap met rasterlay-out 4

Browserondersteuning verandert

In twitter-bootstrap 4 is de ondersteuning voor IE8, IE9, and iOS 6 vervallen. v4 is nu alleen IE10+ and iOS 7+ . Gebruik v3 voor sites die een van beide nodig hebben.

In twitter-bootstrap 4 is de officiële ondersteuning voor Android v5.0 Lollipop's Browser and WebView van Android v5.0 Lollipop's Browser and WebView toegevoegd. Eerdere versies van Android Browser en WebView worden alleen unofficially supported .

Affix klasse verwijdering

Affix is verwijderd uit Bootstrap 4.

Het wordt aanbevolen om een position: sticky te gebruiken position: sticky polyfill in plaats daarvan.

Als u Affix gebruikte om aanvullende, niet-positiestijlen toe te passen, ondersteunen de polyfills mogelijk uw gebruikssituatie niet. Een optie voor dergelijk gebruik is de ScrollPos-Styler-bibliotheek van derden.

Volgens Bootstrap-documentatie

De Affix jQuery-plug-in laten vallen. We raden het gebruik van een positie aan: in plaats daarvan plakkerige polyfill. Zie HTML5 Please entry voor details en specifieke aanbevelingen voor polyfill.

Als u Affix gebruikte om aanvullende, niet-positiestijlen toe te passen, ondersteunen de polyfills mogelijk uw use case niet. Een optie voor dergelijk gebruik is de ScrollPos-Styler-bibliotheek van derden.

Als iemand migreert van Bootstrap v3 naar Bootstrap v4 de terugvalbenadering hieronder gegeven--

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

De nieuwe Bootstrap 4 Navbar Component is verbeterd ten opzichte van zijn Bootstrap 3.x voorganger. In Bootstrap 4 reageert de Navbar standaard en maakt gebruik van flexbox om het uitlijnen van Navbar-inhoud veel eenvoudiger te maken. Het is ook een eenvoudige kwestie van het gebruik van de nieuwe klassen navbar-toggleable-* om het breekpunt van de Navbar te wijzigen. Nu heeft de Navbar 6 breekpuntgroottes of "toestanden", zodat u eenvoudig een van de volgende Navbar-opties kunt gebruiken.

• De Navbar valt nooit in de verticale mobiele weergave en is altijd horizontaal.
• De navigatiebalk wordt altijd samengevouwen in de verticale weergave en via de hamburger geschakeld.
• De Navbar klapt in verticale weergave in op een van de 4 responsieve breekpunten .

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>

Zoals u kunt zien in de bovenstaande code, is de klasse Navbar navbar-header verwijderd uit Bootstrap 4 en is de container-fluid niet langer vereist voor een Navbar over de volledige breedte.

Het breekpunt van de Navbar wijzigen

Met de klasse navbar-toggleable-md klapt de bovenstaande Navbar verticaal in (en toont het toggler-pictogram) bij het gemiddelde (md) breekpunt van 992px. Om dit naar een ander breekpunt te veranderen, moeten we navbar-toggleable-md door een van deze ..

• navbar-toggleable = samenvouwen op xs breedtes <576px
• navbar-toggleable-sm = instorten op sm breedtes <768px
• navbar-toggleable-lg = samenvouwen op lg breedtes <1200 px

Bootstrap 4 Breakpoint Navbar-demo

De uitlijning van de navigatiebalk wijzigen

Met Flexbox kunnen we de uitlijning van de Navbar en de inhoud ervan (merk, links, formulieren of tekst) eenvoudig wijzigen. De standaard Navbar-inhoud wordt links uitgelijnd. Natuurlijk zijn er veel andere uitlijningsscenario's ...

• Merk links (standaard), links midden en rechts
• Merkcentrum, links links en rechts
• Merk links en links rechts
• Merk, links en vulbreedte formulierinvoer
• Geen merk, links midden & rechts
• Merk links, links rechts in container
• Uitgevulde links (vulbreedte) gecentreerd

Bootstrap 4 Navbar met gecentreerd merk en links / rechts links

<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 met merk links, links midden en rechts

<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>

Navbar Uitlijningsdemo's: http://www.codeply.com/go/qhaBrcWp3v

Meer over de Bootstrap 4 Navbar

Kleur, uitlijning of hoogte aanpassen

Bootstrap 3 tot Bootstrap 4 CSS-wijzigingen

Aangezien Bootstrap 4 een belangrijke herschrijving is, zijn veel van de Bootstrap 3.x-klassenamen gewijzigd of verwijderd. De herstructurering van componenten zoals de Navbar en de introductie van nieuwe CSS-klassen en Flexbox-ondersteuning betekent dat upgraden naar 4.x geen eenvoudig conversieproces is vanaf 3.x.

Er zijn echter enkele Bootstrap 3.x CSS-klassen die een specifieke Bootstrap 4-vervanging hebben.

CSS-klassenaam / selector verandert van Bootstrap 3.3.7 in 4 (alfa 6)

{t} - vertegenwoordigt een laag of breekpunt (dat wil zeggen: sm, md, lg, enz ..).
xs tier is de standaardwaarde en hoeft niet te worden opgegeven: col-3 , col-6 , enz ..

{u} - staat voor een col-eenheid (dwz: 1-12)

Zie ook:
Bootstrap 3.x naar 4 migratieprogramma
Wat is er nieuw in Bootstrap 4

Bootstrap 4 Verticaal uitlijnen

Elementen verticaal centreren of onderaan uitlijnen is altijd een uitdaging geweest met CSS en Bootstrap. De gewenste verticale uitlijning kan binnen een oudercontainer zijn, of ten opzichte van aangrenzende elementen.

Nu Bootstrap 4 standaard flexbox is , zijn er veel verschillende benaderingen voor verticale uitlijning met: Auto-marges , Flexbox Utilities of de Display Utilities samen met Vertical Align Utilities .

Aanvankelijk leek de Vertical Alignment Utilities een voor de hand liggende keuze, maar deze werken alleen met inline- en tabelweergave-elementen. Hier zijn enkele Bootstrap 4 verticale uitlijningsopties en scenario's ...

1 - Verticaal centreren met automatische marges:

Een manier om verticaal te centreren is om my-auto . Hiermee wordt het element in de container gecentreerd. Bijvoorbeeld, h-100 maakt de rij op volledige hoogte en my-auto zal de col-sm-12 verticaal centreren.

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

Verticaal midden met behulp van Auto Marges Demo

my-auto vertegenwoordigt marges op de verticale y-as en is gelijk aan:

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

2 - Verticaal midden met Flexbox:

Aangezien Bootstrap 4 .row nu wordt display:flex kunt u eenvoudig align-self-center op elke kolom gebruiken om deze verticaal te centreren ...

       <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>

of gebruik align-items-center op de hele .row om alle col-* in de rij verticaal te centreren ...

       <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>

Vertical Center verschillende hoogte Columns Demo

3 - Verticaal centreren met gebruik van display-hulpprogramma's:

Bootstrap 4 heeft beeldscherm utils die kunnen worden gebruikt voor display:table , display:table-cell , display:inline , etc .. Deze kunnen worden gebruikt met de verticale uitlijning utils tot align inline, inline-blok of tabelcel elementen.

<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>

Verticaal centreren met behulp van Display Demo

Bootstrap 4 Centreren

Het centreren van een element, kolom of inhoud in een kolom werkt anders in Bootstrap 4.

Horizontaal midden

• text-center wordt nog steeds gebruikt voor display:inline elementen
• mx-auto vervangt center-block naar display:block
• offset-* of mx-auto kunnen worden gebruikt om offset-* te centreren

mx-auto (automatische x-asmarges) centreert display:block of display:flex elementen met een gedefinieerde breedte , ( % , vw , px , enz ...). Flexbox wordt standaard gebruikt op rasterkolommen, dus er zijn ook verschillende flexboxcentreringsmethoden.

Centreer tekst of inline elementen: 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 of 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>

Kolommen centreren met offsets: offset-*

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

Kolommen kunnen ook worden gecentreerd met: mx-auto

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

Demo Bootstrap 4 Horizontaal centreren

Verticaal midden

Voor verticale centrering in Bootstrap 4 (y-as), zie de documentatie over: Bootstrap 4 Verticaal uitlijnen

Bootstrap 4 kolomvolgorde

Het wijzigen van de volgorde (of positie) was mogelijk in Bootstrap 3 met behulp van de push pull-klassen. In Bootstrap 4 werken de push-pull- klassen nog steeds en kan bovendien een flexbox-bestelling worden gebruikt.

In Bootstrap 4 zijn de push pull- klassen nu push-{viewport}-{units} en pull-{viewport}-{units} en de xs- infix is verwijderd. Beschouw dit voorbeeld dat de kolomvolgorde wijzigt in de indeling 1-3-2 op xs en 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

Aangezien de nieuwe versie 4 flexbox is, is een andere optie om de flexbox-hulpprogramma's te gebruiken om de volgorde van kolommen te wijzigen. Nu volledige breedte, 12 eenheid col-*-12 kolommen kunnen worden omgekeerd met behulp van flexbox bestellen.

<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 Bestel Demo