twitter-bootstrap
Migracja do Bootstrap 4

Wprowadzenie

Uwagi

Zmiany układu kolumn w systemie siatki w Bootstrap 4

Pierwszy blok kodu jest napisany w Bootstrap 3. W Bootstrap 3 istnieją 4 typy specyfikacji kolumn, a mianowicie col-md-* col-lg-* col-sm-* col-xs-* . W pełni responsywny układ będzie wyglądał tak w 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>

W Bootstrap 4 dodali nową warstwę siatki sm poniżej 768px, aby uzyskać bardziej szczegółową kontrolę. Bootstrap 4 ma więc col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* . Więc to, co kiedyś było .col-md-6 w v3, teraz jest .col-lg-6 w v4. Zauważ, że -xs została usunięta, więc .col-6 reprezentuje 6 jednostek kolumny w bardzo małym (domyślnym) punkcie przerwania.

Jeśli więc chcemy teraz napisać ten sam powyższy przykład w Bootstrap 4, wyglądałoby to tak:

<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 układu siatki 4

Zmiany w obsłudze przeglądarki

W twitter-bootstrap 4 obsługa IE8, IE9, and iOS 6 została odrzucona. IE10+ and iOS 7+ to teraz tylko IE10+ and iOS 7+ . W przypadku witryn wymagających któregokolwiek z nich użyj v3.

W twitter-bootstrap 4 dodano oficjalną obsługę Android v5.0 Lollipop's Browser and WebView dla systemu Android v5.0 Lollipop's Browser and WebView . Wcześniejsze wersje przeglądarki Android i WebView są unofficially supported tylko unofficially supported .

Usunięcie klasy afiksu

Afiks został usunięty z Bootstrap 4.

Zamiast tego zaleca się stosowanie position: sticky polifill.

Jeśli używałeś Afiksa do zastosowania dodatkowych stylów niepozycjonujących, wypełnienia mogą nie obsługiwać twojego przypadku użycia. Jedną z takich opcji jest biblioteka ScrollPos-Styler innej firmy.

Według dokumentacji Bootstrap

Usunięto wtyczkę Affix jQuery. Zamiast tego zalecamy stosowanie pozycji: lepki polifill. Zobacz HTML5 Proszę wpisać szczegóły i szczegółowe zalecenia dotyczące wypełniania.

Jeśli używałeś Afiksa do zastosowania dodatkowych stylów niepozycjonujących, wypełnienia mogą nie obsługiwać twojego przypadku użycia. Jedną z takich opcji jest biblioteka ScrollPos-Styler innej firmy.

Jeśli ktoś migruje z Bootstrap v3 do Bootstrap v4 podejście awaryjne podano poniżej:

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);
  });
  
});

Pasek startowy 4

Nowy składnik paska nawigacyjnego Bootstrap 4 został ulepszony w stosunku do swojego poprzednika Bootstrap 3.x. W Bootstrap 4 pasek nawigacyjny domyślnie reaguje i wykorzystuje Flexbox, aby znacznie ułatwić wyrównanie zawartości paska nawigacyjnego. Jest to również prosta kwestia użycia nowych klas przełączanych navbar-toggleable-* do zmiany punktu przerwania navbar-toggleable-* nawigacyjnego. Teraz pasek nawigacyjny ma 6 rozmiarów punktów przerwania lub „stanów”, dzięki czemu można łatwo mieć jedną z następujących opcji paska nawigacyjnego.

• Pasek nawigacyjny nigdy nie zapada się w pionowym widoku mobilnym i zawsze jest poziomy.
• Pasek nawigacyjny jest zawsze zwinięty w widoku pionowym i przełączany za pośrednictwem hamburgera.
• Pasek nawigacyjny zwija się do widoku pionowego w jednym z 4 reagujących punktów przerwania .

Pasek startowy Basic Bootstrap 4

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

Jak widać z kodu powyżej klasa navbar-header została usunięta z Bootstrap 4, a container-fluid nie jest już wymagany dla paska nawigacyjnego o pełnej szerokości.

Zmiana punktu przerwania paska nawigacyjnego

Klasa navbar-toggleable-md powoduje, że powyższy pasek nawigacyjny zwija się w pionie (i pokazuje ikonę przełącznika) przy średnim (md) punkcie przerwania 992px. Aby zmienić to na inny punkt przerwania, wystarczy zamienić navbar-toggleable-md jeden z nich ..

• navbar-toggleable = zwiń na szerokości xs <576px
• navbar-toggleable-sm = zwiń na szerokości sm <768px
• navbar-toggleable-lg = zwiń na szerokości lg <1200px

Bootstrap 4 Breakpoint Navbar Demo

Zmiana wyrównania paska nawigacyjnego

Flexbox umożliwia nam łatwą zmianę wyrównania paska nawigacyjnego i jego zawartości (marki, linków, formularzy lub tekstu). Domyślna zawartość paska nawigacyjnego jest wyrównana do lewej. Oczywiście istnieje wiele innych scenariuszy wyrównania ...

• Marka lewa (domyślnie), linki środkowa i prawa
• Centrum marki, linki po lewej i prawej stronie
• Marka po lewej i linki po prawej
• Marka, linki i szerokość formularza
• Brak marki, centrum linków i prawo
• Marka po lewej, linki bezpośrednio w pojemniku
• Wyjustowane linki (szerokość wypełnienia) wyśrodkowane

Pasek startowy 4 Pasek nawigacyjny z wyśrodkowaną marką oraz lewy / prawy link

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

Pasek startowy 4 z paskiem nawigacyjnym z brandem po lewej, Links Center i po prawej

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

Demonstracje wyrównania paska nawigacyjnego: http://www.codeply.com/go/qhaBrcWp3v

Więcej informacji o pasku nawigacyjnym Bootstrap 4

Dostosowywanie koloru, wyrównania lub wysokości

Zmiany w Bootstrap 3 na Bootstrap 4 CSS

Ponieważ Bootstrap 4 jest poważnym przepisem, wiele nazw klas Bootstrap 3.x zostało zmienionych lub usuniętych. Restrukturyzacja komponentów, takich jak pasek nawigacyjny, oraz wprowadzenie nowych klas CSS i obsługi Flexbox oznacza, że aktualizacja do wersji 4.x nie jest prostym procesem konwersji z wersji 3.x.

Jednak istnieją pewne klasy CSS Bootstrap 3.x, które mają określoną zamiennik Bootstrap 4.

Zmiany nazwy / selektora klasy CSS z Bootstrap 3.3.7 na 4 (alfa 6)

{t} - reprezentuje poziom lub punkt przerwania (tj: sm, md, lg itp.).
warstwa xs jest domyślna i nie trzeba jej określać: col-3 , col-6 itp.

{u} - reprezentuje rozmiar jednostki col (tj. 1-12)

Zobacz także:
Bootstrap 3.x do 4 Narzędzie migracji
Co nowego w Bootstrap 4

Bootstrap 4 Vertical Align

Ustawienie elementów na środku lub do dołu w pionie zawsze było wyzwaniem w CSS i Bootstrap. Pożądane ustawienie w pionie może znajdować się w pojemniku nadrzędnym lub w stosunku do sąsiednich elementów.

Teraz, gdy Bootstrap 4 jest domyślnie Flexbox, istnieje wiele różnych podejść do wyrównania w pionie za pomocą: Auto-marginesów , Flexbox Utilities lub Display Utilities wraz z Vertical Align Utilities .

Na początku narzędzia do wyrównywania w pionie wydawałyby się oczywistym wyborem, ale działają one tylko z elementami wyświetlającymi w wierszu i tabeli. Oto niektóre opcje i scenariusze pionowego wyrównania Bootstrap 4 ...

1 - Środek pionowy przy użyciu automatycznych marginesów:

Jednym ze sposobów na wyśrodkowanie w pionie jest użycie my-auto . Spowoduje to wyśrodkowanie elementu w jego kontenerze. Na przykład h-100 powoduje, że rząd jest na pełnej wysokości, a my-auto pionowo wyśrodkuje 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>

Centrum w pionie z wykorzystaniem demonstracji automatycznych marginesów

my-auto reprezentuje marginesy na pionowej osi y i jest równoważny:

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

2 - Centrum pionowe z Flexbox:

Ponieważ Bootstrap 4 .row jest teraz display:flex , możesz po prostu użyć align-self-center na dowolnej kolumnie, aby wyśrodkować ją pionowo ...

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

lub użyj align-items-center na całym .row aby .row w pionie wyrównać wszystkie col-* w rzędzie ...

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

Demonstracja kolumn w pionie pośrodku o różnych wysokościach

3 - Środek pionowy za pomocą wyświetlaczy:

Bootstrap 4 ma narzędzia do wyświetlania, które mogą być używane do display:table , display:table-cell , display:inline itp. Można ich używać z narzędziami do wyrównywania w pionie, aby wyrównywać elementy śródliniowe, blokowe lub komórkowe.

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

Centrum w pionie za pomocą narzędzia Display Demo

Bootstrap 4 Centrowanie

Jak wyśrodkować element, kolumnę lub zawartość wewnątrz kolumny, działa inaczej w Bootstrap 4.

Centrum poziome

• text-center jest nadal używane do display:inline elementy display:inline
• mx-auto zastępuje display:block jednego center-block do display:block elementów display:block
• offset-* lub mx-auto mogą być użyte do wyśrodkowania kolumn siatki

mx-auto (automatyczne marginesy osi x) wyśrodkuje display:block lub display:flex elementy o określonej szerokości ( % , vw , px itp.). Flexbox jest domyślnie używany w kolumnach siatki, więc istnieją również różne metody centrowania Flexbox.

Wyśrodkuj tekst lub elementy śródliniowe: 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>

Środkowy display:block lub 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>

Wyśrodkuj kolumny za pomocą przesunięć: offset-*

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

Kolumny można również wyśrodkować za pomocą: mx-auto

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

Demo Bootstrap 4 Poziome centrowanie

Centrum pionowe

Aby wyśrodkować pionowe w Bootstrap 4 (oś y), zapoznaj się z dokumentacją: Bootstrap 4 Vertical Align

Bootstrap 4 Kolumna

Zmiana kolejności (lub pozycji) była możliwa w Bootstrap 3 za pomocą klas push pull. W Bootstrap 4 klasy push pull nadal działają, a dodatkowo można użyć kolejności Flexbox .

W Bootstrap 4 klasy push pull są teraz push-{viewport}-{units} i pull-{viewport}-{units} a xs- został usunięty. Rozważ ten przykład, który zmienia kolejność kolumn na układ 1-3-2 na xs i 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

Ponieważ nową wersją 4 jest Flexbox, inną opcją jest użycie klas narzędzi Flexbox do zmiany kolejności kolumn. Teraz pełna szerokość, 12 jednostek col-*-12 kolumn można odwrócić za pomocą funkcji 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>

Demo zamawiania Flexbox