PlaceOweb Dotclear

Explication illustrée de change entre BS3 et BS4 : Bootstrap 4: What’s New - A Visual Guide to The Next Bootstrap

Les points de coupure bascule des tailles d'écran : BS4 - Responsive breakpoints

// xs - Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// sm - Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// md - Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// lg - Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// xl - Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootsrap par l'exemple

Bootstrap pour simplifier le CSS ! (Bootstrap 3)

• Créer des lignes et des colonnes
• Mélanger les classes
  • .col-xs-* < 768 px Petit écran (smartphone)
  • .col-sm-* > 768 px Ecran réduit (tablette)
  • .col-md-* > 992 px Ecran moyen (desktop)
  • .col-lg-* > 1200 px Grand écran (desktop)
• Utilitaires pour les Medias Queries

 <div class="visible-lg"><h4>Vous êtes actuellement sur un grand écran<h4></div> 
 <div class="visible-md"><h4>Vous êtes actuellement sur un écran moyen<h4></div> 
 <div class="visible-sm"><h4>Vous êtes actuellement sur une tablette<h4></div> 
 <div class="visible-xs"><h4>Vous êtes actuellement sur un smartphone<h4></div>

   <div class="row">
     <div style="border:none" class="col-lg-12">
       <div class="col-xs-6 col-md-3"> <span class="visible-lg">3 colonnes sur grand écran<h4><span class="label label-default">.col-md-3</span></h4></span> <span class="visible-md">3 colonnes sur écran moyen<h4><span class="label label-default">.col-md-3</span></h4></span> <span class="visible-sm">6 colonnes sur tablette<h4><span class="label label-default">.col-xs-6</span></h4></span> <span class="visible-xs">6 colonnes sur smartphone<h4><span class="label label-default">.col-xs-6</span></h4></span></div>
       <div class="col-xs-6 col-md-3"> <span class="visible-lg">3 colonnes sur grand écran<h4><span class="label label-default">.col-md-3</span></h4></span> <span class="visible-md">3 colonnes sur écran moyen<h4><span class="label label-default">.col-md-3</span></h4></span> <span class="visible-sm">6 colonnes sur tablette<h4><span class="label label-default">.col-xs-6</span></h4></span> <span class="visible-xs">6 colonnes sur smartphone<h4><span class="label label-default">.col-xs-6</span></h4></span></div>
       <div class="col-xs-6 col-md-3"> <span class="visible-lg">3 colonnes sur grand écran<h4><span class="label label-default">.col-md-3</span></h4></span> <span class="visible-md">3 colonnes sur écran moyen<h4><span class="label label-default">.col-md-3</span></h4></span> <span class="visible-sm">6 colonnes sur tablette<h4><span class="label label-default">.col-xs-6</span></h4></span> <span class="visible-xs">6 colonnes sur smartphone<h4><span class="label label-default">.col-xs-6</span></h4></span></div>
       <div class="col-xs-6 col-md-3"> <span class="visible-lg">3 colonnes sur grand écran<h4><span class="label label-default">.col-md-3</span></h4></span> <span class="visible-md">3 colonnes sur écran moyen<h4><span class="label label-default">.col-md-3</span></h4></span> <span class="visible-sm">6 colonnes sur tablette<h4><span class="label label-default">.col-xs-6</span></h4></span> <span class="visible-xs">6 colonnes sur smartphone<h4><span class="label label-default">.col-xs-6</span></h4></span></div>
     </div>
   </div>

Migrating to v4 (Alpha)

Les vielles classes n'existent plus : .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block

Elles sont remplacées par : .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down

Migrating to v4 (Beta)

Missing visible-** and hidden-** in Bootstrap v4 - Update for Bootstrap 4 Beta En version 4 Beta, les classes de remplacement Beta ne sont plus accessibles : hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down

Donc la visibilité .visible-* et cachette .hidden-* sont remplacées par display :

Voir le @deprecated Alpha Responsive utilities

Bootsrap, extensions et alternatives

materialize css bootstrap

Bootstrap vs Materialize detailed comparison as of 2017 - Slant

Material Design for Bootstrap 4 - the most popular & free UI KIT - Material Design for Bootstrap

https://github.com/mdbootstrap/bootstrap-material-design

MDB CDN version

MDB CSS:

https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css

MDB JS:

https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js

Material design theme for Bootstrap 3 and 4 GitHub - FezVrasta/bootstrap-material-design: Material design theme for Bootstrap 3 and 4 Introduction · Bootstrap Material Design

Bootstrap vs Materialize 2017 Comparison

Material Design