TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Démarrer avec Bootstrap

43

Il y a une décennie, avoir un site Web était un rêve et n’était possible que pour les geeks de la technologie. De nos jours, tout homme ordinaire peut créer un site ou un blog grâce à la popularité des outils de création de sites gratuits et des frameworks d’interface utilisateur. Comme l’industrie de la construction de sites est de nature très compétitive, chaque entreprise doit se concentrer sur une offre meilleure que les autres pour attirer les utilisateurs finaux. Bootstrap est l’un des frameworks les plus populaires et nous expliquerons comment commencer à apprendre Bootstrap pour créer vos sites Web.

Il existe trois types d’outils permettant aux utilisateurs et aux développeurs de démarrer avec leur site Web :

  • Systèmes de gestion de contenu open source auto-hébergés comme WordPress.org, Drupal et Joomla.
  • Plateformes hébergées gratuites comme WordPress.com, Weebly et Wix.
  • Infrastructures d’interface utilisateur (UI) indépendantes telles que Bootstrap et Google Material Design.

La portée des plates-formes auto-hébergées est vaste et ne convient pas à la plupart des utilisateurs finaux n’ayant pas le temps d’investir. Les plates-formes hébergées gratuites sont faciles à utiliser mais ont de lourdes dépendances qui limiteront vos capacités uniquement à cette plate-forme. La dernière option est d’avoir un mélange d’auto-hébergement, de développement et la liberté de réutiliser les blocs d’éléments frontaux. Dans cet article, explorons plus en détail comment démarrer avec le framework frontend Bootstrap.

Démarrer avec Bootstrap

Apprendre Bootstrap

Qu’est-ce que Bootstrap ?

Bootstrap est l’un des frameworks d’interface utilisateur les plus populaires disponibles à ce stade. Il s’agit d’un framework frontal créé avec HTML, CSS et JavaScript sans l’implication de scripts côté serveur comme PHP. Il a été initialement développé par Twitter sous le nom de "Twitter Blueprint" pour améliorer la visibilité cohérente sur plusieurs appareils et outils. Plus tard, il a été renommé Bootstrap et publié en tant que projet open source en août 2011.

Bootstrap est l’un des projets populaires disponibles sur GitHub avec plus de 100 000 étoiles. Les dernières informations sur les versions et mises à jour de Bootstrap sont disponibles sur le site officiel getbootstrap.com. La popularité de Bootstrap augmente au fil du temps avec la première approche mobile et la conversion facile des thèmes Bootstrap en thèmes de gestion de contenu populaires comme WordPress. Il existe également des constructeurs de sites Bootstrap populaires comme Mobirise pour démarrer votre site Web sans compétences en codage.

Versions d’amorçage

Le tableau ci-dessous montre la mise à jour de la version de Bootstrap, elle est en V4 alpha 6 lorsque cet article a été écrit.

Version Date Changements majeurs
Version 1 19 août 2011 Open source
Version 2 31 janv. 2012 Mise à jour majeure avec une grille de 12 colonnes et des glyphes.
Version 3 19 août 2013 Design plat et approche mobile first.
Version 4 19 août 2015 Mise à jour majeure des classes CSS, utilisation de Sass et suppression des Glyphicons, suppression de tether.js et ajout de popper.js.
Version 5 05 mai 2021 Sans jQuery, icônes Bootstrap, nouveau logo et prise en charge RTL.

Utilisation générale

Pour le moment, la version stable est Bootstrap 5.01 et vous devez migrer vers la dernière version si vous utilisez des versions antérieures 3 ou 4. Donc, si vous développez un site qui sera publié bientôt, idéalement, vous devriez utiliser la version 5.01 qui est stable. Les utilisateurs finaux peuvent télécharger directement les fichiers CSS/JS précompilés et les utiliser sur votre site. Téléchargez la version 3.4.1 ici, la V4.6 ici et la V5.01 ici. Si vous développez des projets pour des clients ou pour vous-mêmes, vous pouvez télécharger le code source complet avec les fichiers Sass depuis GitHub.

Remarque: l’ installation de Bootstrap sur votre PC Windows ou macOS est une tâche compliquée car elle comporte de nombreuses dépendances. En bref, vous devriez avoir Node.js et NPM installés sur votre ordinateur avec Grunt pour la compilation. En outre, vous pouvez utiliser Harp.js pour générer des fichiers de site statiques à l’aide de partiels ou d’inclusions.

Licence

Les fichiers Bootstrap sont distribués sous licence MIT avec une seule exigence car les informations de copyright doivent être conservées dans tous les fichiers sources Bootstrap.

Conservez la licence et l’avis de droit d’auteur inclus dans les fichiers CSS et JavaScript de Bootstrap lorsque vous les utilisez dans vos travaux.

Vous pouvez afficher l’intégralité de la licence dans GitHub.

Démarrage de votre site

Vous avez deux façons de commencer à créer votre site avec Bootstrap. L’une consiste à télécharger et à héberger des fichiers CSS et JS sur votre serveur d’hébergement et l’autre à utiliser des liens CDN. Nous vous recommandons de créer un modèle de démarrage, puis de commencer à utiliser tous les composants Bootstrap dans un modèle de démarrage. Vous pouvez obtenir plus de détails dans la section des modèles de démarrage Bootstrap 5.

Vous trouverez ci-dessous les liens CDN à utiliser sur votre site :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

Assurez-vous d’utiliser Popper puis le fichier Bootstrap JS dans l’ordre, sinon vous pouvez utiliser un seul fichier de script groupé qui inclut le script Popper. De même, ajoutez toutes les feuilles de style CSS personnalisées après le CSS Bootstrap, afin qu’elles ne prennent pas le pas sur les définitions du framework. Bootstrap 5 utilise border-box pour la propriété de dimensionnement de la boîte qui peut affecter les mises en page. Vous pouvez changer cela en content-box si nécessaire uniquement pour les éléments particuliers en déclarant CSS inline.


Apprendre Bootstrap 5 (Index )


Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails