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

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.

• Rendez vous sur le site officiel de bootstrap et télécharger la dernière version du framework (4.4.1 au moment de la redaction de cet article)

• 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 :

• Et voilà ajoutez maintenant votre page html : index.html dans votre dossier site.

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

Ajout de css

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

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

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 :

• carrousel ( slides )
• Formulaires
• Modal ( boîtes de dialog )
• et bien plus …..

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

Ajoutez maintenant ces deux lignes avant la fermeture de votre balise 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