twitter-bootstrap
Migration vers Bootstrap 4
Recherche…
Introduction
Bootstrap 4 est une réécriture majeure et de nombreuses modifications sont à prendre en compte lors de la mise à niveau depuis Bootstap 3. Voici les changements de noms de classes, des astuces et des exemples de migration de votre code Bootstrap 3.x vers Bootstrap 4.x.
Remarques
Ceci est juste un petit exemple des exemples plus détaillés à suivre.
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)
Bootstrap 3.x | Bootstrap 4 |
---|---|
.col- {t} - {u} | .col- {t} - {u} ( leave {t} blank for xs ) |
.col- {t} -offset- {u} | .offset- {t} - {u} ( leave {t} blank for xs ) |
.col- {t} -push- {u} | .push- {t} - {u} ( leave {t} blank for xs ) |
.col- {t} -pull- {u} | .pull- {t} - {u} ( leave {t} blank for xs ) |
.panneau | .carte |
.panel-rubrique | En-tête de carte |
titre .panel | Titre de la carte |
.panel-body | bloc-carte |
.panel-footer | .card-footer |
.panel-primaire | .card-primary.card-inverse |
.panel-succès | .card-success.card-inverse |
.panel-info | .card-info.card-inverse |
.panel-warning | .card-warning.card-inverse |
.panel-danger | .card-danger.card-inverse |
.bien | .card.card-block |
.la vignette | .card.card-block |
.list-inline> li | .list-inline-item |
.dropdown-menu> li | .dropdown-item |
.nav navbar> li | .nav-item |
.nav navbar> li> a | .nav-link |
.navbar-right | .ml-auto |
.navbar-btn | .nav-item |
.navbar-fixe-top | .fixed-top |
.nav empilé | .flex-colonne |
.btn-default | .btn-secondaire |
.img-responsive | .img-fluide |
.img-circle | cercle circulaire |
.img-arrondi | .rounded |
.form-horizontal | (enlevé) |
.radio | .form-check |
.checkbox | .form-check |
.input-lg | .form-control-lg |
.input-sm | .form-control-sm |
.control-label | Etiquette de contrôle .form |
.table-condensé | .table-sm |
.pagination> li | .page-item |
.pagination> li> un | .page-link |
.article | .carousel-item |
.text-help | .form-control-feedback |
.pull-droit | .Flotter à droite |
.pull-left | .float-left |
.center-bloc | .mx-auto |
.collapse.in | .collapse.show |
.hidden-sm | .hidden-md-down |
.hidden-md | .hidden-lg-down |
.hidden-xs | .hidden-xs-down |
.visible-xs | .hidden-sm-up |
.visible-sm | .hidden-xs-down.hidden-md-up |
.visible-md | .hidden-sm-down.hidden-lg-up |
.visible-lg | .hidden-md-down.hidden-xl-up |
.étiquette | .badge |
.badge | .badge.badge-pill |
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 endisplay:inline
-
mx-auto
remplace lecenter-block
central par l'display:block
centraldisplay:block
éléments dedisplay:block
-
offset-*
oumx-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>
É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>