Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

Bootstrap

RDFFav

Bootstrap 4 Beta - Attendre la version 5 ou pas?

Bootstrap admet ne pas être parfait, mais assure qu’ils feront de leur mieux pour garder cette fois toutes les classes, les fonctionnalités et les url.Bootstrap

Bootstrap v4.0.0-beta

2 ans depuis la version Alpha!

Bootstrap a sauvé les meubles de son retard sur le dos des concepteurs. D’ailleurs, essayer de poser vos questions sur GitHub ou stackoverflow.com! Ne soyez pas trop critique ni trop pointue! Quand on a l’habitude d’une technologie, on capitalise dessus, c’est normal! Mais on le disait aussi, éviter de développer avec Bootstrap pour l’instant. Et de fait, il faut réécrire la plupart des codes. On parle de 6 versions alpha! Est-ce que cette nouvelle version Beta et l’annoncée version 5 seront encore différentes pour une énième fois? On a même tourné en rond en modifiant des mnémoniques pour revenir ensuite à la première idée (badge, label et retour au badge)! Je peux bien croire que la technologie change, mais harmonisé la sémantique pour une meilleure compréhension? Peut-être passer à autre chose, comme Fundation qui n’a pas perdu de temps pendant ce temps? Allant même jusqu’à réinventer les grilles avec son nouveau XY grid!

Enfin, la bonne nouvelle est que cette nouvelle version du 10 aout 2017 vient aussi avec une refonte du site de Bootstrap. On parle tout de même de 67 000 lignes ajoutées et 82 000 lignes supprimées au plus que populaire cadriciel. Ça semble par contre enfin sérieux, quoique j’ai déjà noté une erreur. Mais rien à voir avec l’improvisation de dernière minute avec la version alpha. Une véritable documentation à jour avec cette fois des exemples fonctionnelle. Rien ne garantit que la version 5 n’arrivera pas dans 2 ans mais Bootstrap admet ne pas être parfait et assure surtout qu’ils feront de leur mieux pour garder toutes les classes, les fonctionnalités et les URL de la documentation telles qu’elles apparaissent maintenant dans cette version. Certaines fonctionnalités pourront toujours être ajoutées, mais avec la promesse de ne plus rien retirer.

Outre les changements majeurs déjà apportés par la version alpha, comme le passage à Sass, les grilles Flex, le nouveau « cards », le retrait du .dl-horizontal et du blockquote par défaut, l’ajout du point d’arrêt 576px de la grille, le nouveau btn-secondary au lieu du .btn-default, l’ajout du .form-control-* au lieu du .input-* pour les formulaires, le retrait du support IE8 et IE9 (rien de moins), la réécriture du JavaScript en ES6 et l’utilisation de l’unité de mesure « rem », HTML5 oblige. Je note le retrait de Normalize.css pour Reboot et surtout du script Tether (infobulles) au profit de Popper.js. Avec encore une fois plusieurs changements de classe.

Changements des noms de classes de la version alpha à la version beta
On « display » au lien de cacher

Je n’utilise pas beaucoup les classes gadgets de bootstrap, comme les cards. J’utilise plutôt Bootstrap pour son caractère à normaliser l’ergonomie. Mais aussi pour ses outils adaptatifs comme les grilles. Si les composantes ergonomiques ne changent pas vraiment, le nom de classe des outils adaptatif n’arrête pas de changer alors qu’ils parsèment mes codes d’un bout à l’autre. Des classes de la version 3 et alpha sont disparues. Notamment les .hidden-*-down et .hidden-*-show utilisées pour afficher ou non des éléments selon la dimension de l’écran. Au profit du très sémantique .d-*-none et .d-*-block, par exemple .d-none.d-md-block.d-xl-none! C’est à dire pas d’affichage mobile, ni extra-large, uniquement un affichage pour la largeur moyenne. Ouf, tous mes codes doivent être revus en profondeur, par pur idéologie!

Si c’est pour le mieux tant mieux, on finit toujours par s’y faire. Or donc, cette même idéologie qui privilégie l’usage du très sémantique strong au détriment du court et tout aussi touchant b, qui retire .next pour .carousel-item-next, retrait du .table-condensed au profit de .table-sm, nous propose aujourd’hui le petit d (display) au lieu du long hidden. Non seulement le mot change, mais carrément la méthode, quoique je trouve plus logique cette nouvelle façon de faire, la sémantique en prend pour son rhume. À en perdre son latin ;- ) On cachait avec la version alpha, avec la version beta, on display : bloc ou on display : none. En d’autres mots, on vire à l’envers la façon de gérer et de penser une structure adaptative à la Bootstrap.

Attention Transformer hidden-xs-down pour .d-none .d-sm-block converti en même temps un l’élément « en ligne » (inline) en block! Ce qui peut défigurer votre mise en page et même la structure de la page HTML. Pour convertir un élément « inline » (inline), utilisez plutôt .d-sm-inline et inline-block pour un élément inline-block.

Ou encore, finis le sémantique .center-block pour le nouveau .mx-auto. Bonne nouvelle, l’ajout de .float-left et .float-right effectivement plus harmionisé avec le CSS. Quoique je crois que c’était déjà comme ça avec la version alpha. Plus besoin du form-horizontal pour les formulaires, d’ailleurs c’est maintenant la grille avec le row qui doit être utilisé.

Voilà la liste des changements :

  • .badge-default pour .badge-dark
  • .bg-faded pour .bg-light
  • .bg-inverse pour .bg-dark
  • .card-block pour .card-body
  • .card-outline-primary pour .border-primary
  • .card-outline-secondary pour .border-secondary
  • .card-outline-success pour .border-success
  • .card-outline-info pour .border-info
  • .card-outline-warning pour .border-warning
  • .card-primary pour .bg-primary
  • .card-success pour .bg-success
  • .card-info pour .bg-info
  • .card-warning pour .bg-warning
  • .card-danger pour .bg-danger
  • .hidden-xs-down pour .d-none .d-sm-block (.d-sm-inline, .d-sm-inline-block)
  • .hidden-sm-down pour .d-none .d-md-block
  • .hidden-md-down pour .d-none .d-lg-block
  • .hidden-lg-down pour .d-none .d-xl-block
  • .hidden-xs-up pour .d-none
  • .hidden-sm-up pour .d-sm-none
  • .hidden-md-up pour .d-md-none
  • .hidden-lg-up pour .d-lg-none
  • .hidden-xl-up pour .d-xl-none
  • .navbar-toggleable-sm pour .navbar-expand-sm
  • .navbar-toggleable-md pour .navbar-expand-md
  • .navbar-toggleable-lg pour .navbar-expand-lg
  • .navbar-toggleable-xl pour .navbar-expand-xl
Nouvelles couleurs

Quant au changement de l’image, c’est à dire ce que l’internaute est en mesure de vraiment remarquer, je note deux nouvelles couleurs pour les thèmes : Light (claire) et Dark (foncée).

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Autres couleurs :

Blue
Indigo
Purple
Pink
Red
Orange
Yellow
Green
Teal
Cyan

Pas beaucoup de changement important pour l’internaute en fin de compte. Je note même encore l’usage du style des plus laid pour les boites à cocher et les boutons radio. Le mot le plus juste est sans doute celui anglais de « ugly »! Pour plus d’information concernant la migration, consulter « Migrating to v4 ».

Bootstrap CDN

Pour utiliser Bootstrap, vous pouvez télécharger les fichiers ou simplement inclure les fichiers CSS et JavaScript compilé de Bootstrap via le CDN de Bootstrap.

Fichier CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
JavaScript, Popper, et jQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Exemple de page
<!DOCTYPE html>
<html lang="fr-FR">
  <head>
    <!-- Balise méta requise -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Feuille de styles Bootstrap v4.0.0-beta -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <h1>Bonjour le monde!</h1>

    <!-- JavaScript optionnel -->
    <!-- jQuery en premier, suivi par Popper.js et du JavaScript de Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>
Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Bonjour. Je n'ai pas de commentaire particulier à faire sur cet article, si ce n'est dire qu'il est très intéressant, comme les autres d'ailleurs. Je voudrais vous remercier ici pour votre site qui est une véritable mine d'or d'infos et de conseils. On y trouve des informations dont la clarté se retrouve rarement ailleurs sur le web. J'ai toujours beaucoup de plaisir à vous lire et je voudrais vous encourager à continuer ce travail, qui n'en est peut-être pas un pour vous qui me semblez passionné. Je n'ai vraiment pas beaucoup de moyens mais j'aimerais vous faire un don d'un euro (symbolique), ce n'est pas grand chose je sais mais je suis plutôt pauvre et je ne peux pas faire plus. Aussi je voudrais vous demander si le formulaire de paiement par carte bancaire est sur. L'est-t-il ? Si il l'est je vous envoie mon euro. Merci encore pour votre participation. Cordialement Ritchi.
    64x64
    ritchi

    Date (GMT) : 2017-08-23 14:12:25 (UTC +0000)
    • Bonjour, C'est très gentils, en 20 ans vous êtes le premier à m'offrir un café (un euro) ; -) Alors oui, le formulaire PayPal devrait fonctionner. Brest, wow, j'adore brest et la bretagne. J'ai été au festival de l'Orient en 86, que de beau souvenir. J'avais l'autocollant Breizh Dizalc'h sur ma guitare ; -) Merci.
      64x64
      oznog
      http://www.trucsweb.com
      Date (GMT) : 2017-08-23 16:58:53 (UTC +0000)


    9/10 sur 1 revues.
           Visites : 2198 - Pages vues : 2248
    X

    Trucsweb.com Connexion

    X

    Trucsweb.com Mot de passe perdu

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte