twitter-bootstrap
Migration vers Bootstrap 4

Introduction

Remarques

Modification de la disposition des colonnes du système de grille dans Bootstrap 4

Le premier bloc de code est écrit dans Bootstrap 3. Dans Bootstrap 3, il existe 4 types de spécifications de colonne, à savoir col-md-* col-lg-* col-sm-* col-xs-* . Une disposition entièrement réactive ressemblera à ceci dans 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>

Dans Bootstrap 4, ils ont ajouté un nouveau niveau de grille inférieure à 768 pixels pour un contrôle plus précis. Donc, Bootstrap 4 a col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* . Donc, ce qui était .col-md-6 en v3 est maintenant .col-lg-6 en v4. Notez que l'infixe -xs a été supprimé et que .col-6 représente 6 unités de colonne au point d'arrêt supplémentaire (par défaut).

Donc, si nous voulons maintenant écrire le même exemple dans Bootstrap 4, cela ressemblerait à ceci:

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

Mise en page de grille Bootstrap 4

Modification du support du navigateur

Dans twitter-bootstrap 4, le support pour IE8, IE9, and iOS 6 a été supprimé. v4 est maintenant seulement IE10+ and iOS 7+ . Pour les sites qui en ont besoin, utilisez v3.

Dans twitter-bootstrap 4, le support officiel Android v5.0 Lollipop's Browser and WebView d' Android v5.0 Lollipop's Browser and WebView a été ajouté. Les versions antérieures du navigateur Android et de WebView restent uniquement unofficially supported .

Suppression de classe

Affixe est retiré de Bootstrap 4.

Il est recommandé d'utiliser une position: sticky polyfill position: sticky place.

Si vous utilisiez Affix pour appliquer des styles supplémentaires, les polyfills pourraient ne pas prendre en charge votre cas d'utilisation. Une option pour de telles utilisations est la bibliothèque ScrollPos-Styler tierce.

Selon la documentation Bootstrap

Suppression du plug-in Affix jQuery. Nous vous recommandons d'utiliser une position: polyfill collant à la place. Voir le HTML5 S'il vous plaît entrer pour plus de détails et des recommandations spécifiques polyfill.

Si vous utilisiez Affix pour appliquer des styles supplémentaires, les polyfills pourraient ne pas prendre en charge votre cas d'utilisation. Une option pour de telles utilisations est la bibliothèque ScrollPos-Styler tierce.

Si quelqu'un passe de Bootstrap v3 à Bootstrap v4 l'approche de secours est donnée ci-dessous--

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

Le nouveau composant Navar Bootstrap 4 est amélioré par rapport à son prédécesseur Bootstrap 3.x. Dans Bootstrap 4, la Navbar est réactive par défaut et utilise la flexbox pour faciliter l’alignement du contenu Navbar . Il navbar-toggleable-* également d'utiliser les nouvelles navbar-toggleable-* pour modifier le point d'arrêt Navbar. Maintenant, la barre de navigation a 6 tailles ou «états» de points d'arrêt, de sorte que vous pouvez facilement avoir l'une des options de barre de navigation suivantes.

• La barre de navigation ne se réduit jamais dans la vue mobile verticale et est toujours horizontale.
• La barre de navigation est toujours repliée dans la vue verticale et basculée via le hamburger.
• La barre de navigation se réduit en vue verticale à l' un des 4 points d'arrêt sensibles .

Bootstrap de base 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>

Comme vous pouvez le voir à partir du code ci-dessus, la classe d' navbar-header a été supprimée de Bootstrap 4 et le container-fluid n'est plus requis pour une barre de navigation pleine largeur.

Changer le point d'arrêt de la barre de navigation

La navbar-toggleable-md fait que la navbar-toggleable-md navigation ci-dessus s'effondre verticalement (et affiche l'icône du bascule) au point d'arrêt moyen (md) de 992px. Pour changer cela à un point d'arrêt différent, il suffit de remplacer navbar-toggleable-md par l'un de ceux-ci.

• navbar-toggleable = réduire sur des largeurs xs <576px
• navbar-toggleable-sm = réduire sur des largeurs de sm <768px
• navbar-toggleable-lg = réduire sur des largeurs de lg <1200px

Démo Bootstrap 4 Breakpoint Navbar

Modification de l'alignement de la barre de navigation

Flexbox nous permet de modifier facilement l'alignement de la barre de navigation et de son contenu (marque, liens, formulaires ou texte). Le contenu de la barre de navigation par défaut est aligné. Bien sûr, il existe de nombreux autres scénarios d'alignement ...

• Marque à gauche (par défaut), centre des liens et à droite
• Centre de marques, liens gauche et droit
• Marque à gauche et liens à droite
• Marque, liens et entrée de formulaire de largeur de remplissage
• Aucune marque, centre de liens et droite
• Marque à gauche, liens à l'intérieur du conteneur
• Liens justifiés (largeur de remplissage) centrés

Bootstrap 4 Navbar avec marque centrée et liens gauche / droite

<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 avec Brand Left, Links Center et 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>

Démonstrations d'alignement Navbar: http://www.codeply.com/go/qhaBrcWp3v

Plus sur la barre de navigation Bootstrap 4

Personnalisation de la couleur, de l'alignement ou de la hauteur

Bootstrap 3 à Bootstrap 4 Changements CSS

Comme Bootstrap 4 est une réécriture majeure , de nombreux noms de classes Bootstrap 3.x ont été modifiés ou supprimés. La restructuration de composants tels que la Navbar et l’introduction de nouvelles classes CSS et la prise en charge de Flexbox signifient que la mise à niveau vers 4.x n’est pas un processus de conversion simple à partir de la version 3.x.

Cependant, il existe des classes CSS Bootstrap 3.x qui ont un remplacement Bootstrap 4 spécifique.

Le nom / sélecteur de classe CSS passe de Bootstrap 3.3.7 à 4 (alpha 6)

{t} - représente un niveau ou un point d'arrêt (par exemple: sm, md, lg, etc.).
xs tier est la valeur par défaut et ne doit pas être spécifiée: col-3 , col-6 , etc.

{u} - représente une taille d' unité col (ex: 1-12)

Regarde aussi:
Outil de migration Bootstrap 3.x vers 4
Quoi de neuf dans Bootstrap 4

Bootstrap 4 Alignement vertical

Éléments Obtenir centre ou Aligner en bas a verticalement toujours été un défi avec CSS et Bootstrap. L'alignement vertical souhaité peut se situer dans un conteneur parent ou par rapport à des éléments adjacents.

Maintenant que Bootstrap 4 est flexbox par défaut, il existe de nombreuses approches de l'alignement vertical utilisant les marges automatiques , les utilitaires Flexbox ou les utilitaires d'affichage ainsi que les utilitaires d'alignement vertical .

Au début, les utilitaires d'alignement vertical sembleraient un choix évident, mais ils ne fonctionnent qu'avec des éléments d'affichage en ligne et de tableau. Voici quelques options et scénarios d'alignement vertical Bootstrap 4 ...

1 - Centre vertical utilisant les marges automatiques:

L'un des moyens de centrer verticalement consiste à utiliser my-auto . Cela permettra de centrer l'élément dans son conteneur. Par exemple, h-100 fait que la ligne est à sa hauteur et my-auto centre verticalement la colonne 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>

Centre vertical utilisant la démo des marges automatiques

my-auto représente les marges sur l'axe des y vertical et est équivalent à:

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

2 - Centre vertical avec Flexbox:

Puisque Bootstrap 4 .row est maintenant display:flex vous pouvez simplement utiliser align-self-center sur n'importe quelle colonne pour le centrer verticalement ...

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

ou, utilisez align-items-center sur tout le .row pour .row verticalement tous les col-* de la ligne ...

       <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 de colonnes verticales de hauteur différente

3 - Centre vertical utilisant des utilitaires d'affichage:

Bootstrap 4 a utils d'affichage qui peuvent être utilisés pour l' display:table , display:table-cell , display:inline , etc .. Ils peuvent être utilisés avec les utils d'alignement vertical pour aligner roues alignées, inline-block ou des éléments cellulaires de la table.

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

Centre vertical utilisant la démo de l' affichage Utils

Bootstrap 4 Centrage

Comment centrer un élément, une colonne ou un contenu dans une colonne fonctionne différemment dans Bootstrap 4.

Centre horizontal

• text-center est toujours utilisé pour l' display:inline éléments en display:inline
• mx-auto remplace le center-block central par l' display:block central display:block éléments de display:block
• offset-* ou mx-auto peut être utilisé pour centrer les colonnes de la grille

mx-auto (marges auto-axe x) centrera l' display:block ou display:flex éléments display:flex d'une largeur définie ( % , vw , px , etc.). Flexbox est utilisé par défaut sur les colonnes de la grille, il existe donc également différentes méthodes de centrage flexbox.

Centrer le texte ou les éléments en ligne: 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 central display:block ou 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>

Centrer les colonnes à l'aide de décalages: offset-*

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

Les colonnes peuvent également être centrées avec: mx-auto

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

Démo Bootstrap 4 Centrage horizontal

Centre vertical

Pour le centrage vertical dans Bootstrap 4 (axe des ordonnées), consultez la documentation sur: Bootstrap 4 Vertical Align

Bootstrap 4 Column Order

Changer l'ordre (ou la position) était possible dans Bootstrap 3 en utilisant les classes push pull. Dans Bootstrap 4, les classes push-pull fonctionnent toujours et, en outre, l’ ordre des boîtes flexibles peut être utilisé.

Dans Bootstrap 4, les classes push- pull sont maintenant push-{viewport}-{units} et pull-{viewport}-{units} et le xs- infix a été supprimé. Considérez cet exemple qui modifie l'ordre des colonnes à 1-3-2 disposition sur xs et 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>

Démo Bootstrap 4 Push Pull

Étant donné que la nouvelle version 4 est flexbox, une autre option consiste à utiliser les classes de l’ utilitaire Flexbox pour modifier l’ordre des colonnes. Maintenant toute la largeur, 12 unité col-*-12 colonnes peuvent être inversées en utilisant la commande de 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>

Démo de commande Flexbox