twitter-bootstrap
Migration zu Bootstrap 4

Einführung

Bemerkungen

Spaltenlayoutänderungen des Rastersystems in Bootstrap 4

Der erste Codeblock ist in Bootstrap 3 geschrieben. In Bootstrap 3 gibt es vier Arten von Spaltenspezifikationen, nämlich col-md-* col-lg-* col-sm-* col-xs-* . Ein vollständig ansprechendes Layout sieht in Bootstrap 3 folgendermaßen aus:

<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 wurde eine neue Sm-Grid-Stufe unterhalb von 768px für eine detailliertere Steuerung hinzugefügt. Bootstrap 4 hat also col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* . Was früher .col-md-6 in v3 war, ist jetzt .col-lg-6 in v4. Beachten Sie, dass das -xs Infix entfernt wurde, sodass .col-6 6 Spalteneinheiten am besonders kleinen (Standard) Haltepunkt darstellt.

Wenn wir nun dasselbe obige Beispiel in Bootstrap 4 schreiben möchten, würde es so aussehen:

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

Gitterlayout Bootstrap 4

Änderungen der Browserunterstützung

In twitter-bootstrap 4 wurde die Unterstützung für IE8, IE9, and iOS 6 . v4 ist jetzt nur noch IE10+ and iOS 7+ . Verwenden Sie für Sites, die diese benötigen, Version 3.

In twitter-bootstrap 4 wurde die offizielle Unterstützung für Android v5.0 Lollipop's Browser and WebView für Android v5.0 Lollipop's Browser and WebView hinzugefügt. Frühere Versionen von Android Browser und WebView werden nur unofficially supported .

Entfernen Sie die Klassen

Affix wird aus Bootstrap 4 entfernt.

Es wird empfohlen, eine position: sticky stattdessen position: sticky Polyfill.

Wenn Sie Affix zum Anwenden zusätzlicher, nicht positionierter Stile verwendet haben, unterstützen die Polyfills möglicherweise Ihren Anwendungsfall nicht. Eine Option für solche Anwendungen ist die ScrollPos-Styler-Bibliothek eines Drittanbieters.

Gemäß der Bootstrap-Dokumentation

Das Affix-Plugin für jQuery wurde gelöscht. Wir empfehlen die Verwendung einer Position: stattdessen klebrige Polyfill. Weitere Informationen und spezifische Empfehlungen für Polyfill finden Sie im HTML5-Eintrag "Please".

Wenn Sie Affix zum Anwenden zusätzlicher, nicht positionierter Stile verwendet haben, unterstützen die Polyfills möglicherweise Ihren Anwendungsfall nicht. Eine Option für solche Anwendungen ist die ScrollPos-Styler-Bibliothek eines Drittanbieters.

Wenn jemand von Bootstrap v3 zu Bootstrap v4 migriert, wird der Fallback-Ansatz unten angegeben:

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

Die neue Bootstrap 4 Navbar-Komponente wurde gegenüber ihrem Vorgänger Bootstrap 3.x verbessert. In Bootstrap 4 reagiert die Navbar standardmäßig und verwendet Flexbox , um die Ausrichtung von Navbar-Inhalten wesentlich zu vereinfachen. Es ist auch eine einfache Sache, die neuen navbar-toggleable-* Klassen zu verwenden, um den Navbar-Haltepunkt zu ändern. Die Navbar verfügt jetzt über 6 Haltepunktgrößen oder "Zustände", so dass Sie problemlos eine der folgenden Navbar-Optionen verwenden können.

• Die Navbar bricht niemals in die vertikale mobile Ansicht ein und ist immer horizontal.
• Die Navbar ist immer in die vertikale Ansicht eingeblendet und wird über den Hamburger umgeschaltet.
• Die Navbar wird an einem der 4 reagierenden Haltepunkte in die vertikale Ansicht eingeblendet.

Grundlegende Bootstrap 4-Navigationsleiste

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

Wie Sie dem obigen Code navbar-header die navbar-header Klasse aus Bootstrap 4 entfernt, und die container-fluid wird für eine Navbar mit voller Breite nicht mehr benötigt.

Ändern des Navbar-Haltepunkts

Die navbar-toggleable-md Klasse lässt die obige Navbar vertikal (und zeigt das Toggle-Symbol) am mittleren Haltepunkt (md) von 992px an. Um dies auf einen anderen Haltepunkt zu ändern, müssen Sie einfach navbar-toggleable-md mit einem dieser navbar-toggleable-md .

• navbar-toggleable = Zusammenbruch bei xs Breite <576px
• navbar-toggleable-sm = Zusammenbruch bei sm Breiten <768px
• navbar-toggleable-lg = Zusammenbruch bei lg Breiten <1200px

Bootstrap 4 Breakpoint Navbar Demo

Ändern der Navbar-Ausrichtung

Mit Flexbox können wir die Ausrichtung der Navbar und deren Inhalt (Marke, Links, Formulare oder Text) einfach ändern. Der Standardinhalt der Navbar ist linksbündig. Natürlich gibt es viele andere Ausrichtungsszenarien ...

• Marke links (Standard), Links Mitte & Rechts
• Markencenter, Links links und rechts
• Marke links und Links rechts
• Eingabe von Marke, Links und Füllbreite
• Keine Marke, Linkscenter & rechts
• Marke links, Links rechts im Container
• Justierte Links (Füllbreite) zentriert

Bootstrap 4-Navbar mit zentrierter Marke und 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 mit Brand Left, Links Center und Right

<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-Alignment-Demos: http://www.codeply.com/go/qhaBrcWp3v

Mehr zur Bootstrap 4 Navbar

Anpassen von Farbe, Ausrichtung oder Höhe

Bootstrap 3 bis Bootstrap 4 CSS-Änderungen

Da es sich bei Bootstrap 4 um ein grundlegendes Umschreiben handelt, wurden viele der Bootstrap 3.x-Klassennamen geändert oder entfernt. Die Umstrukturierung von Komponenten wie der Navbar sowie die Einführung neuer CSS-Klassen und Flexbox-Unterstützung bedeuten, dass ein Upgrade auf 4.x kein einfacher Konvertierungsprozess von 3.x ist.

Es gibt jedoch einige Bootstrap 3.x-CSS-Klassen, für die ein bestimmter Bootstrap 4-Ersatz gilt.

CSS-Klassenname / -selektor ändert sich von Bootstrap 3.3.7 zu 4 (Alpha 6)

{t} - steht für eine Stufe oder einen Haltepunkt (z. B. sm, md, lg usw.).
xs tier ist die Standardeinstellung und muss nicht angegeben werden: col-3 , col-6 usw.

{u} - steht für eine Spaltengröße (dh: 1-12)

Siehe auch:
Bootstrap 3.x zu 4 Migrationstool
Was ist neu in Bootstrap 4?

Bootstrap 4 Vertikal ausrichten

Erste Elemente zur Mitte oder unten ausrichten vertikal ist immer eine Herausforderung , mit CSS und Bootstrap gewesen. Die gewünschte vertikale Ausrichtung kann sich in einem übergeordneten Container oder relativ zu benachbarten Elementen befinden.

Da Bootstrap 4 nun standardmäßig Flexbox ist , gibt es viele verschiedene Ansätze für die vertikale Ausrichtung: Auto-Ränder , Flexbox-Dienstprogramme oder die Anzeige-Dienstprogramme zusammen mit den Dienstprogrammen für die vertikale Ausrichtung .

Zunächst scheinen die Dienstprogramme für die vertikale Ausrichtung naheliegend zu sein, diese funktionieren jedoch nur mit Inline- und Tabellenanzeigeelementen. Hier sind einige vertikale Ausrichtungsoptionen und -szenarien von Bootstrap 4 ...

1 - Vertikales Zentrum mit automatischen Rändern:

Eine Möglichkeit, vertikal zu zentrieren, ist my-auto . Dadurch wird das Element in seinem Container zentriert. Mit h-100 wird beispielsweise die ganze Höhe der Zeile erreicht, und my-auto zentriert die col-sm-12 vertikal.

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

Vertikales Zentrum mit Auto Margins Demo

my-auto repräsentiert Ränder auf der vertikalen Y-Achse und entspricht:

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

2 - Vertikales Zentrum mit Flexbox:

Da Bootstrap 4 .row jetzt display:flex , können Sie einfach die Funktion zum align-self-center in jeder Spalte verwenden, um sie vertikal zu .row ...

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

oder verwenden Sie align-items-center für die gesamte .row , um alle col-* in der Zeile vertikal auszurichten ...

       <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 für vertikale Höhe mit unterschiedlichen Höhen

3 - Vertikales Zentrum mit Display Utils:

Bootstrap 4 verfügt über Anzeigeinstrumente , die für die display:table , display:table-cell , display:inline usw. Diese können mit den vertikalen Ausrichtungshilfsmitteln zum Ausrichten von Inline-, Inline-Block- oder Tabellenzellenelementen verwendet werden.

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

Vertikales Zentrum Verwenden von Display Utils Demo

Bootstrap 4 Zentrieren

Wie ein Element, eine Spalte oder ein Inhalt innerhalb einer Spalte zentriert wird, funktioniert in Bootstrap 4 anders.

Horizontales Zentrum

• text-center wird weiterhin für die display:inline Elemente
• mx-auto ersetzt den center-block in die Center- display:block
• offset-* oder mx-auto können Sie offset-*

mx-auto (automatische x-Achsen-Ränder) vw display:block oder display:flex Elemente mit einer definierten Breite ( % , vw , px usw.). Flexbox wird standardmäßig für Rastersäulen verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.

Text oder Inline-Elemente zentrieren: 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>

Zentrierte display:block oder 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>

Spalten mit offset-* : offset-*

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

Spalten können auch mit: mx-auto zentriert werden

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

Demo Bootstrap 4 Horizontales Zentrieren

Vertikales Zentrum

Informationen zur vertikalen Zentrierung in Bootstrap 4 (y-Achse) finden Sie in den folgenden Dokumenten: Bootstrap 4 Vertical Align

Bootstrap 4 Column Order

Das Ändern der Reihenfolge (oder Position) war in Bootstrap 3 mithilfe der Push-Pull-Klassen möglich. In Bootstrap 4 funktionieren die Push-Pull- Klassen weiterhin, und zusätzlich kann die Flexbox-Reihenfolge verwendet werden.

In Bootstrap 4 sind die Push- Pull- Klassen jetzt push-{viewport}-{units} und pull-{viewport}-{units} und der xs- Infix wurde entfernt. Betrachten Sie dieses Beispiel, in dem die Spaltenreihenfolge für xs und sm in das Layout 1-3-2 geändert wird:

<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

Da die neue Version 4 Flexbox ist, ist eine weitere Option , die Flexbox Utility - Klassen zu verwenden , um die Reihenfolge der Spalten zu ändern. Mit der Flexbox- Reihenfolge können nun col-*-12 Spalten mit Farbe col-*-12 umgedreht werden.

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