Si vous n'avez jamais entendu parler de Bootstrap, un framework développé par Twitter pour créer de superbes sites web, vous y manquez! Bootstrap permet de concevoir un site Web assez rapidement et facilement sans avoir beaucoup de connaissances en CSS (feuilles de style en cascade). Si vous débutez dans la programmation Web, vous n'avez pas besoin de connaître CSS pour apprendre à utiliser Bootstrap. tout ce dont vous avez besoin est un document HTML unique. Nous allons examiner Bootstrap pour vous expliquer en quoi cela consiste, comment cela fonctionne et si c'est une bonne option pour chaque site Web que vous créez.
Insertion de l'API d'amorçage dans votre fichier HTML
Vous avez quelques options pour insérer Bootstrap dans votre fichier de projet principal. La première option consiste à insérer tous les fichiers Bootstrap nécessaires dans votre projet. Vous pouvez le faire en téléchargeant le package et en le téléchargeant dans votre dossier de projet. Vous devrez bien entendu lier le fichier CSS Bootstrap principal à votre document. Le site officiel de Bootstrap propose un guide étape par étape expliquant comment procéder.
L'autre option consiste à ignorer le téléchargement du package et à utiliser un réseau de distribution de contenu (CDN). Un CDN vous permet de lier les fichiers Bootstrap principaux à votre document HTML sans jamais le télécharger. Bien entendu, cela n'est pas toujours une bonne chose pour les sites Web professionnels, car je ne serais pas trop pressé de laisser mon entreprise ou la page de mon portefeuille au destin si ce serveur venait à ne plus fonctionner. Il est préférable d’avoir les fichiers dans votre projet, mais pour les besoins de l’apprentissage, le CDN fera très bien l'affaire.
Pour insérer Bootstrap dans votre document HTML, il vous suffit de placer le code suivant dans le
balise dans votre document HTML:Une fois que ces liens sont insérés dans cette balise head, vous devriez être prêt à utiliser les classes Bootstrap. Votre document devrait ressembler à ceci:
Bootstrap Et Classes
Les éléments Bootstrap sont divisés en classes, qui ne sont qu'un groupe de CSS pré-écrites que vous pouvez insérer dans votre balisage. Insérer des classes dans votre balisage est facile, il vous suffit de connaître le nom de la classe que vous voulez utiliser, puis de l'appliquer à l'un de vos éléments HTML à l'aide de la valeur class = "classname", comme indiqué dans un article précédent.
La partie difficile consiste à comprendre comment tout cela fonctionne ensemble pour créer quelque chose de beau. Vous pouvez consulter toutes les différentes classes disponibles dans Bootstrap directement à partir de la documentation officielle. Maintenant, maîtriser Bootstrap est une autre histoire. Ce n'est pas quelque chose que nous ou n'importe qui d'autre pouvons vous apprendre. Vous pouvez visionner les didacticiels après les didacticiels, mais pour bien utiliser le framework, vous devez effectuer beaucoup d'essais et d'erreurs. Et, cela nécessite que vous travailliez dans vos propres projets.
Dans cet esprit, je vous implore de démarrer votre propre projet HTML sur votre ordinateur avec Atom ou un autre éditeur de texte, de passer en revue les classes HTML et CSS, puis de commencer à vous amuser avec Bootstrap. Et si vous connaissez suffisamment de balisage, créez peut-être même votre propre site Web de portefeuille comme exercice test.
Bootstrap est-il une option viable pour tous les sites Web?
Bootstrap est un excellent framework, mais est-ce une option viable pour chaque site web que vous créez? Cela dépend vraiment du développeur ainsi que des exigences du projet. Dans de nombreux environnements professionnels, vous n'avez pas vraiment le choix des technologies que vous utilisez, cela dépendra en grande partie du chef de projet. Si ledit gestionnaire de projet choisit d'utiliser Bootstrap, vous allez également le combiner avec une tonne de CSS personnalisé. C’est ce qui rend généralement votre site Web unique et différent des autres sites Web utilisant Bootstrap.
Personnellement, je ne considère pas Bootstrap comme une excellente option pour tous les sites Web. Bien sûr, cela peut aider et fournir quelques raccourcis, mais j'ai finalement découvert que la conception à partir de zéro avec CSS était la meilleure solution, en grande partie à cause du contrôle que vous avez sur elle. Mais encore une fois, si vous débutez dans la programmation Web, utiliser Bootstrap n’est pas une mauvaise chose, mais ne vous fiez pas à cela pour votre carrière.
Il est à noter que si vous êtes un développeur débutant, vous ne devez pas utiliser Bootstrap pour tous les projets de votre portefeuille. Il se peut que vous maîtrisiez bien l'API, mais que vous ne sachiez pas tout à fait comment utiliser CSS. Cela dit, il est bon d’avoir un bon mélange des deux sur votre portefeuille (ou même exclusivement en CSS, car il est facile de récupérer Bootstrap).
Fermeture
C'est tout ce que Bootstrap est en un mot. Comme je l'ai mentionné précédemment, je vous encourage à démarrer votre propre projet HTML et à ajouter certaines des classes aux éléments pour commencer à jouer avec le framework. Vous pouvez trouver tous les différents composants que propose Bootstrap avec des explications et des exemples de code ici.
Bootstrap est vraiment un outil soigné, mais souvenez-vous de ne pas vous fier à lui seul! Il est bon de le connaître et de s'y retrouver, mais vous devez également vous plonger dans CSS pour vraiment comprendre ce qui se passe dans les coulisses. Non seulement cela, mais une solide connaissance en CSS complimente beaucoup Bootstrap, vous permettant de créer de véritables sites Web uniques et magnifiques avec votre propre personnalisation.
