Certes, la logique voudrait que la migration ait été effectuée vers Bootstrap 3 avant d’entamer une migration vers la version 4 sortie en 2019, le poids de l’inertie ou d’autres considérations peuvent obliger les organisations à passer d’une version 2 directement à une version 4.
Par exemple, une mise à jour de Moodle vers la version 3.5.n dont les thèmes sont désormais sous Bootstrap 4, implique cette gymnastique périlleuse. Bien évidemment, j’y ai été confronté lors de l’une de mes activités.
Pour m’aider dans cette tâche, j’ai tout d’abord réalisé un tableau de synthèse des différentes modifications que je partage dans ce billet.
|
Bootstrap 2.x |
Bootstrap 4.x |
|
.badge |
.badge.badge-pill |
|
.btn |
.btn .btn-default |
|
.btn-large |
.btn-lg |
|
.btn-small |
.btn-sm |
|
.btn-mini |
.btn-xs |
|
.btn-default |
.btn-secondary |
|
.center-block |
.mx-auto.d-block |
|
.checkbox |
.form-check |
|
.span* |
.col-md-* |
|
.col-*-offset-* |
.offset-* |
|
.col-*-pull-* |
.order-*-1 |
|
.col-*-push-* |
.order-*-2 |
|
.container-fluid |
.container |
|
.control-label |
.col-form-label |
|
.dropdown-menu > li |
.dropdown-item |
|
.form-horizontal |
(removed) |
|
.help-block |
.form-text |
|
.hidden-desktop |
.d-lg-none |
|
.hidden-tablet |
.d-md-none |
|
.hidden-phone |
.d-sm-none |
|
.hidden-xs |
.d-none |
|
.icon-* |
.glyphicon .glyphicon-* |
|
.img-circle |
.rounded-circle |
|
.img-responsive |
.img-fluid |
|
.img-rounded |
.rounded |
|
.thumbnail |
.img-thumbnail |
|
.add-on |
.input-group-addon |
|
.input-append |
.input-group |
|
.input-prepend |
.input-group |
|
.input-lg |
.form-control-lg |
|
.input-sm |
.form-control-sm |
|
.item |
.carousel-item |
|
.hero-unit |
.jumbotron |
|
.label |
.badge |
|
.list-inline > li |
.list-inline-item |
|
.brand |
.navbar-brand |
|
.navbar .nav |
.nav .navbar-nav |
|
.nav navbar > li |
.nav-item |
|
.nav navbar > li > a |
.nav-link |
|
.nav-stacked |
.flex-column |
|
.btn-navbar |
.nav-item |
|
.navbar-fixed-top |
.fixed-top |
|
.navbar-right |
.ml-auto |
|
.pagination > li |
.page-item |
|
.pagination > li > a |
.page-link |
|
.panel |
.card |
|
.panel-body |
.card-body |
|
.panel-danger |
.card.bg-danger.text-white |
|
.panel-footer |
.card-footer |
|
.panel-heading |
.card-header |
|
.panel-info |
.card.text-white.bg-info |
|
.panel-primary |
.card.bg-primary.text-white |
|
.panel-success |
.card.bg-success.text-white |
|
.panel-title |
.card-title |
|
.panel-warning |
.card.bg-warning |
|
.pull-left |
.float-left |
|
.pull-right |
.float-right |
|
.offset* |
.col-md-offset-* |
|
.radio |
.form-check |
|
.row-fluid |
.row |
|
.table-condensed |
.table-sm |
|
.thumbnail |
.card.card-body |
|
.visible-desktop |
.d-none.d-lg-block.d-xl-none |
|
.visible-tablet |
.d-none.d-md-block.d-lg-none |
|
.visible-phone |
.d-none.d-sm-block.d-md-none |
|
.visible-xs |
.d-block.d-sm-none |
|
.well |
.card.card-body |