twitter-bootstrap
Migrerar till Bootstrap 4

Introduktion

Anmärkningar

Kolumnlayoutändringar i rutnätssystem i Bootstrap 4

Det första kodblocket är skrivet i Bootstrap 3. I Bootstrap 3 finns det 4 typer av kolumnspecifikationer, nämligen col-md-* col-lg-* col-sm-* col-xs-* . En helt lyhörd layout kommer att se ut så här i 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>

I Bootstrap 4 har de lagt till ett nytt sm grid-nivå under 768px för mer granulär kontroll. Så Bootstrap 4 har col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* . Så vad som brukade vara .col-md-6 i v3 är nu .col-lg-6 i v4. Observera att -xs har tagits bort så .col-6 representerar 6 kolumnenheter vid den extra lilla (standard) brytpunkten.

Så om vi nu vill skriva samma exempel ovan i Bootstrap 4 så ser det ut så här:

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

Grid Layout Bootstrap 4

Webbläsarsupport ändras

I twitter-bootstrap 4 har stödet för IE8, IE9, and iOS 6 tappats. v4 är nu bara IE10+ and iOS 7+ . Använd v3 för webbplatser som behöver någon av dessa.

I twitter-bootstrap 4 har det officiella stödet för Android v5.0 Lollipop's Browser and WebView lagts till. Tidigare versioner av Android-webbläsaren och WebView kvarstår endast unofficially supported .

Ta bort klistermärken

Affix tas bort från Bootstrap 4.

Det rekommenderas att använda en position: sticky polyfyll istället.

Om du använde Affix för att tillämpa fler stilar som inte är positionerade kan det hända att polyfyllarna inte stöder ditt användningsfall. Ett alternativ för sådana användningsområden är ScrollPos-Styler-biblioteket från tredje part.

Enligt Bootstrap Documentation

Tappade Affix jQuery-plugin. Vi rekommenderar att du använder en position: klibbig polyfyll istället. Se HTML5-posten för detaljer och specifika rekommendationer om polyfyllning.

Om du använde Affix för att tillämpa fler stilar som inte är positionerade kan det hända att polyfyllarna inte stöder ditt användningsfall. Ett alternativ för sådana användningsområden är ScrollPos-Styler-biblioteket från tredje part.

Om någon migrerar från Bootstrap v3 till Bootstrap v4 återges fallback-metoden nedan--

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

Den nya Bootstrap 4 Navbar-komponenten förbättras jämfört med sin Bootstrap 3.x-föregångare. I Bootstrap 4 svarar Navbar som standard och använder flexbox för att göra justeringen av Navbar-innehållet mycket enklare. Det är också en enkel fråga om att använda de nya navbar-toggleable-* att ändra Navbar-brytpunkten. Nu har Navbar-datorn 6 brytpunktsstorlekar eller "tillstånd" så att du enkelt kan ha ett av följande Navbar-alternativ.

• Navbarna kollapsar aldrig i den vertikala mobilvyn och är alltid horisontell.
• Navbarna kollapsas alltid i den vertikala vyn och växlas via hamburgaren.
• Navbarna kollapsar i vertikal vy vid en av de fyra svarande brytpunkterna .

Grundläggande 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>

Som du kan se från koden ovan har klassen för navbar-header tagits bort från Bootstrap 4, och container-fluid behövs inte längre för en Navbar i full bredd.

Ändra Navbar Breakpoint

navbar-toggleable-md klassen får ovannämnda Navbar att kollapsa vertikalt (och visa växlarikonen) vid medel (md) bristpunkt 992px. För att ändra detta till en annan brytpunkt måste vi bara byta ut navbar-toggleable-md med en av dessa ..

• navbar-toggleable = kollaps på xs bredder <576px
• navbar-toggleable-sm = kollaps på sm bredder <768px
• navbar-toggleable-lg = kollaps på lg <1200px

Bootstrap 4 Breakpoint Navbar Demo

Ändra navigeringsjustering

Flexbox gör det möjligt för oss att enkelt ändra justeringen av Navbar och dess innehåll (märke, länkar, formulär eller text). Standardvärdet i Navbar är vänsterjusterat. Naturligtvis finns det många andra justeringsscenarier ...

• Märke vänster (standard), länkar centrum & höger
• Varumärkescenter, länkar vänster och höger
• Märke vänster och länkar höger
• Märke, länkar och fyllningsbredd från inmatning
• Inget märke, länkar center & rätt
• Märke vänster, länkar höger inuti behållaren
• Motiverade länkar (fyllningsbredd) centrerade

Bootstrap 4 Navbar med centrerad varumärke och vänster / höger länkar

<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 med märke vänster, Links Center och höger

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

Mer om Bootstrap 4 Navbar

Anpassa färg, justering eller höjd

Bootstrap 3 till Bootstrap 4 CSS-ändringar

Eftersom Bootstrap 4 är en viktig omskrivning har många av klassens namn på Bootstrap 3.x ändrats eller tagits bort. Omstruktureringen av komponenter som Navbar, och introduktionen av nya CSS-klasser och Flexbox-stöd innebär att uppgradering till 4.x inte är en enkel konverteringsprocess från 3.x.

Det finns dock några Bootstrap 3.x CSS-klasser som har en specifik Bootstrap 4-ersättning.

CSS-klassens namn / väljare ändras från Bootstrap 3.3.7 till 4 (alpha 6)

{t} - representerar en nivå eller brytpunkt (dvs. sm, md, lg osv.).
xs nivå är standard, och behöver inte anges: col-3 , col-6 , etc.

{u} - representerar en kol enhetsstorlek (dvs. 1-12)

Se även:
Bootstrap 3.x till 4 Migration Tool
Vad är nytt i Bootstrap 4

Bootstrap 4 Vertical Align

Att få element att centrera eller botten justera vertikalt har alltid varit en utmaning med CSS och Bootstrap. Den önskade vertikala inriktningen kan vara i en överordnad behållare eller relativt till intilliggande element.

Nu när Bootstrap 4 är flexbox som standard finns det många olika tillvägagångssätt för vertikal justering med hjälp av: Auto-marginaler , Flexbox Utilities eller Display Utilities tillsammans med Vertical Align Utilities .

Först verkar Vertical Alignment Utilities vara ett uppenbart val, men dessa fungerar bara med inline- och tabellvisningselement. Här är några Bootstrap 4 vertikala justeringsalternativ och scenarier ...

1 - Vertikalt centrum med automatisk marginal:

Ett sätt att centrera vertikalt är att använda my-auto . Detta kommer att centrera elementet i sin behållare. Till exempel gör h-100 raden i full höjd och my-auto kommer vertikalt att centrera kolonnen 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>

Vertical Center Använda Auto marginaler Demo

my-auto representerar marginaler på den vertikala y-axeln och motsvarar:

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

2 - Vertical Center med Flexbox:

Eftersom Bootstrap 4 .row nu display:flex du helt enkelt använda align-self-center valfri kolumn för att vertikalt centrera den ...

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

eller använd align-items-center på hela .row att vertikalt center col-* alla col-* i raden ...

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

Vertikal centrum Demo för olika höjdkolumner

3 - Vertikal centrum med hjälp av skärmverktyg:

Bootstrap 4 har visningsverktyg som kan användas för display:table , display:table-cell , display:inline osv. Dessa kan användas med vertikala justeringsverktyg för att anpassa inline, inline-block eller tabellcellelement.

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

Vertikal centrum med hjälp av Display Utils- demo

Bootstrap 4 Centering

Hur man centrerar ett element, kolumn eller innehåll i en kolumn fungerar annorlunda i Bootstrap 4.

Horisontellt centrum

• text-center används fortfarande för display:inline
• mx-auto ersätter center-block till display:block
• offset-* eller mx-auto kan användas för att centrera rutnätkolumner

mx-auto (auto x-axelmarginaler) kommer att centrera display:block eller display:flex som har en definierad bredd , ( % , vw , px , etc ..). Flexbox används som standard på rutnätkolumner, så det finns också olika flexboxcentreringsmetoder.

Centrera text eller inlineelement: 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>

Centerdisplay display:block eller 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>

Centrera kolumner med offset: offset-*

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

Kolumner kan också centreras med: mx-auto

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

Demo Bootstrap 4 Horizontal Centering

Vertikalt centrum

För vertikal centrering i Bootstrap 4 (y-axeln), se dokumenten på: Bootstrap 4 Vertical Align

Bootstrap 4 Column Order

Att ändra ordning (eller position) var möjligt i Bootstrap 3 med hjälp av push pull-klasserna. I Bootstrap 4 fungerar fortfarande push pull- klasserna och dessutom kan flexboxordning användas.

I Bootstrap 4 är push pull- klasserna nu push-{viewport}-{units} och pull-{viewport}-{units} och xs- infixet har tagits bort. Tänk på detta exempel som ändrar kolumnordningen till 1-3-2-layout på xs och 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

Eftersom den nya versionen 4 är flexbox är ett annat alternativ att använda flexbox-verktygsklasserna för att ändra kolumnernas ordning. Nu med full bredd, 12 enhetskolor col-*-12 kolumner kan vändas med flexboxbeställning .

<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 beställningsdemo