Table des matières
Toutes les technologies web très populaires, pour garder leur modernité, être toujours appréciées par leurs utilisateurs et en conquérir d’autres, doivent sans cesse s’adapter au monde du web qui évolue à vitesse grand V.
C’est ce que fait régulièrement Bootstrap pour continuer par être la figure de proue des libraires front-end.
Et pour encore distancer un peu plus ses concurrents, le 16 juin passé une nouvelle version a été mise à disposition des utilisateurs.
Il s’agit de la toute première version alpha de Bootstrap 5 annoncée depuis des mois.
Cette nouvelle version a subit beaucoup d’amélioration et intègre de nouvelles et intéressantes fonctionnalités.
Découvrez dans les lignes qui suivent, ce que propose Bootstrap dans sa cinquième version.
JQuery désormais aux oubliettes, et plus de prise en charge d’Internet Explorer.
L’obligation de lier la bibliothèque jQuery à un projet avant que certains composants Bootstrap ne soient fonctionnels exaspérait les utilisateurs.
De plus, les pages se chargeaient lentement, dû à ces nombreux scripts JavaScript.
Pour rendre les projets conçus avec Bootstrap plus légers en terme de chargement de page et de taille de fichier, l’équipe de maintenance travaillait ardemment pour rendre leur bibliothèque non dépendante de JQuery.
Et c’est chose faite dans la nouvelle version Bootstrap 5.
Le script JavaScript de Bootstrap a été énormément amélioré pour pouvoir supporter cette transition.
Désormais c’est une ligne de code en moins, vu que l’on a plus besoin de faire appel à jQuery dans un projet web.
Quant à l’appel des fichiers Bootstrap, il reste le même.
Vous avez le choix entre une intégration manuelle des fichiers Bootstrap 5 dans vos projets web ou soit un appel des fichiers depuis les serveurs de Bootstrap.
La dernière appellation permet de rendre plus légère une application web, mais les éléments Bootstrap intégrés n’apparaissent pas si l’application est accédée hors connexion.
Voici en exemple comment faire appel aux fichiers Bootstrap depuis leurs serveurs.
<!-- Appel du fichier CSS de Bootstrap 5 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <!-- Appel de l'extension Popper.js --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <!-- Appel du fichier JavaScript de Bootstrap 5 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
Vous avez forcément remarqué la présence de l’attribut integrity dans les balises script avec des valeurs incernables.
Il vous permet de récupérer les fichiers appelés sans qu’ils ne subissent une modification ou une attaque.
L’appel du plugin popper.js aussi s’avère très important pour le fonctionnement des composants dropdowns, tooltips et popover.
Il n’y a pas que jQuery qui a été abandonné, désormais bootstrap ne prendra plus en charge le navigateur Internet Explorer.
Cette désicion leur a permit d’apporter certaines améliorations dans la nouvelle version.
Notamment l’ajout des propriétés personnalisées à certains composants. Et l’equipe promet d’ajouter dans les prochaines versions ces propriétés personnalisées à d’autres composants.
Les composants de formulaire mis à jour
Un projet web avec un formulaire bootstrap bien réalisé est toujours attrayant.
Car les composants Bootstrap ont de superbes designs, et d’extraordinaires comportements lors d’un clic, et de surcroît sont responsives.
Bref les formulaires ont des comportements et des styles de validation natifs.
Le composant input group ainsi que les autres éléments ont tous été consolidé, ils ont été repensé et ont un nouvel attrait.
La prise en charge de plusieurs états des zones de texte est assurée.
Pour unifier le style et le comportement des éléments du formulaire, les éléments checkbox, radiobutton, select et etc ont tous été personnalisé.
Vous avez la possibilité de créer des mises en page horizontales ou à base de grille complexe avec les formulaires.
Pour bien profiter du fonctionnement des inputs, profiter des fonctionnalités de contrôle intégrées, la sélection des chiffres et autre fonctionnalité, veiller à attribuer l’attribut Type approprié aux champs.
Par exemple ajouter l’attribut email à un champ qui recevra une adresse mail ou encore l’attribut number à un champ qui est censé recevoir des informations numériques.
Cliquez ici pour voir la documentation sur le formulaire de Bootstrap 5 et découvrir tous les changements apportés.
Le Système de Grille aussi est amélioré.
Pour ne pas compliquer la tâche au utilisateurs lors de l’intégration de la grille dans leur projet, on leur propose dans cette version le système de grille auquel ils sont familiers.
C’est à dire que la grille proposée dans cette version alpha de Bootstrap 5 conserve la majeure partie de celle de Bootstrap 4.
L’équipe a ajouté de nouveaux éléments à cette dernière.
Comme nouveau éléments:
Le niveau xxl s’ajoute aux précédents. Les classes gouttières “.gutter” ont été remplacés par “.g”.
Le niveau xxl correspond aux écrans supérieurs ou égaux à 1400 px.
La gouttière qu’est-ce que c’est?
Ce sont les espaces entre les contenus des colonnes créées par la marge interne horizontale.
Vous pouvez modifier les gouttières comme bon vous semble. Vous pouvez soit choisir de modifier la gouttière horizontale à l’aide de gx- ou modifier la gouttière verticale à l’aide de gy-, ou tout modifier simplement avec la classe g-.
Et si vous ne voulez aucune gouttière, il suffire d’utiliser la classe g-0.
Des options de présentation des formulaires ont été remplacés par le nouveau système de grille.
Pour plus d’amples informations sur la nouvelle grille aller sur cette page.
Autres modifications apportées dans la nouvelle version
Il n’y a pas que le formulaire et la grille qui ont été amélioré. Il y eu d’autres améliorations.
Le logo de Bootstrap a subit quelques modifications. C’est lui qui est l’image la une de cet article.
Personnellement j’apprécie ce nouveau logo, et vous, donnez-moi votre avis dans les commentaires.
Pour la documentation, Bootstrap s’offre les services d’Hugo et abandonne le générateur Jekyll. Car ce dernier est lent et nécessite l’installation de Ruby.
Alors qu’Hugo ne dépend d’aucun logiciel avant de s’exécuter.
Une nouvelle utilitaire API est intégré dans la nouvelle version.
La palette de couleurs aussi a été élargie.
Si vous désirez voir toutes les fonctionnalités intégrées dans la version alpha de Bootstrap 5, découvrir les éléments de la version 4 qui ont été améliorés dans cette nouvelle version, cliquer ici.