Comment intégrer Bootstrap dans une page HTML - Letecode

Comment intégrer Bootstrap dans une page HTML

Bootstrap est une collection d'outils utiles à la création du design de sites et d'applications web

Jean Claude Mbiya
Jean Claude Mise à jour : 21 décembre 2022 6565

Pour tout debutant en programmation web, après avoir passer par la manipulation des balises HTML et de styliser avec css, le défit est énorme dans la mise en place d’un site web responsive (site web réactif).

Dans cet article nous allons parler de ce que est Bootstrap, son importance et comment l’intégrer.

C’est quoi Bootstrap ?

Bootstrap est une boîte à outils ( Framework en anglais) open source pour le développement avec HTML, CSS et JS. Prototypez rapidement vos idées ou créez l’intégralité de votre application avec des variables et mixins Sass, un système de grille réactif, de nombreux composants préconstruits et des plugins puissants construits sur jQuery. lire plus ici.

Son importance

responsive design

Il permet de créer des sites web réactifs (responsive), des sites qui s’adapte sur toute taille des écrans (Ordinateur, tablette et mobile), avec un meilleur design et plus rapidement.

Le fait d’avoir un design adaptable à différents écrans permet à vos visiteurs de mieux se gérer et de lire plus facilement sur votre site. Autrement dit, avec un design réactif, votre utilisateur peut mieux accéder aux différents boutons de votre page, et cela vous intéresse. Vous sortez tous les deux gagnants.

Même dans le cas d’un magasin, il doit être facile et simple pour l’utilisateur d’effectuer un achat sans problème. Combien de fois en profitons-nous pour acheter un canapé avec un iPad ou un mobile? Si l’utilisateur constate que votre magasin n’est pas réactif, il disparaîtra instantanément et vous perdrez donc des ventes.

Il est important de savoir qu’une conception réactive est conçue pour s’adapter à des écrans plus petits que ceux d’un ordinateur. C’est pourquoi les éléments très importants qui occupent un espace considérable sur un écran d’ordinateur, tels que le menu et le logo, devraient être plus petits mais tout aussi importants sur l’écran d’un autre appareil.

Comment intégrer ?

La partie qu’on attendais tous☺️

Pour utiliser Bootstrap, tout d’abord vous devez bien organiser votre projet dans des dossier bien clairs et simples à accéder.

téléchargement de bootstrap
  • Décompressez le fichier bootstrap-4.4.1-dist.zip que vous aurez téléchargé dans un dossier sur votre ordinateur.
  • Dans le fichier téléchargé vous trouverez deux dossiers js et css contenant réspectivement les fichiers de style css et ceux de javascript.
  • Créer un dossier Site n’importe où sur votre ordinateur et mettez les deux dossiers à l’intérieur. vous devriez avoir cette aperçu :
contenu du dossier Site
contenu des dossiers css et js
  • Et voilà ajoutez maintenant votre page html : index.html dans votre dossier site.
fichier html ajouté

Place au code, préparez bien vos doigts, nous allons écrire quelques lignes des codes html pour faire un site responsive.

Ajout de css

ajouter cette ligne dans la balise <head> de votre site

essayons maintenant d’insérer un composant sur notre page

Nous allons ajouter un bouton avec bootstrap et un bouton sans bootstrap

code
résultat

Vous aurez remarqué que bootstrap repère les classes que vous donnez à vos balises afin de les donner des propriétés.

vous trouverez plusieurs autres composants dans la documentation officiel de bootstrap comme :

Comment utiliser le Javascript ( bootstrap.js ) ?

Pour utiliser certains composants bootstrap (carrousel, dropdown, modal,…) , vous serez obligé d’importez également le fichier bootstrap.js de bootstrap, et vous aurez tout de même pas réussi de faire fonctionnez votre composant. vous vous demanderez sûrement le pourquoi !

Pour tout savoir, Bootstrap est un framework qui est basé sur jQuery. donc beaucoup des composants fonctionne que si vous importez la librairie jQuery.

Télécharger le fichier sur ce lien et mettez dans le dossier JS de votre dossier site. Télécharger ici la dernière version

vous aurez donc ceci comme fichiers

fichiers jQuery ajouté

Ajoutez maintenant ces deux lignes avant la fermeture de votre balise body

ajoutez avant </body>

Vous pouvez maintenant ajoutez tout les composants bootstrap que vous voulez.

 

Merci, bon codage. 

N'oubliez pas de poser vos questions ou de demander des nouvelles articles.

source : Comment intégrer Bootstrap dans une page HTML

3
Jean Claude Mbiya
Jean Claude Mbiya

Développeur Web full stack, Développeur Android (Certifié Google AAD) Formateur dans les domaines du numérique, Créateur letecode.com 👨‍💻. Je suis un grand passionné des nouvelles technologies et j'adore partager ce que j'apprend.

0 commentaire(s)

Laissez votre commentaire à @johnmbiya

ou pour laisser un commentaire