Démarrer avec Bootstrap

Travailler avec des pages Web nécessite bien plus que de simplement connaître les langues que nous devons utiliser, il y a une série de jalons que nous devons respecter pour développer un produit avec un résultat exceptionnel. L'un de ces jalons est la conception et la disposition des éléments qui seront affichés à l'écran.

Imaginons que nous devons concevoir une page Web, si nous partons de zéro, nous devons prendre en compte à quoi doivent ressembler le menu, les tableaux, les boutons, des choses aussi simples que les icônes que nous allons placer sur certains boutons d'action, etc.

Comme nous pouvons le voir, c'est un travail difficile, surtout si nous voulons qu'il soit optimal et attrayant, nous devons également être détaillés pour donner une touche personnelle au site, maintenant, et si nous ne sommes pas des concepteurs ? C'est la grande question, il y a des développeurs qui ferment les yeux quand il s'agit de bon goût et de design, et ces types de profils sont inhibés pour faire des apparitions Web de qualité. Ou si nous avons bon goût mais peu de temps pour concevoir ?

Pour résoudre ces deux grandes exigences, nous avons Amorcer qui n'est rien de plus qu'un Cadre CSS cela nous permet d'obtenir l'aspect de base de notre page à la fois sans avoir à souffrir du design, mais à part cela, cela nous aide également avec des effets de base et une manière très particulière de structurer le contenu que nous allons présenter.

Avantages du bootstrapNous savons déjà que Amorcer c'est un Cadre CSS et cela nous aide à établir les aspects de base de notre site Web, mais en plus de cela, il présente certains avantages en termes d'utilisation, nous allons voir ci-dessous quelques-unes des choses positives qu'il nous apporte Amorcer:

1. RéutiliserAvec Amorcer Nous avons de nombreux composants fabriqués par défaut, afin que nous puissions les utiliser sans modifications dans diverses parties de notre site Web, réduisant ainsi le temps et la quantité de code que nous utilisons. Cela favorise également le développement modulaire de nos applications.

2. CohérenceGrâce au fait que nous avons de nombreux composants fabriqués de manière générique, le code est cohérent, c'est-à-dire qu'il gère des structures très similaires, donc lors de sa lecture ou de la maintenance de l'application, nous saurons déjà beaucoup plus comment cela fonctionne.

3. Conception flexibleLa conception mobile est très importante et Amorcer le prend en compte dès le début, nous avons la flexibilité que notre site s'adapte automatiquement à diverses résolutions et dispositions d'écran, nous évitant ainsi beaucoup de travail de concevoir des vues mobiles à partir de zéro.

4. CommunautéUn autre aspect à prendre en compte est la documentation, quand on utilise un framework tiers il est très important d'avoir vers qui se tourner quand on a des doutes et en ce sens Amorcer Il n'a pas de comparaison, car nous pouvons obtenir presque n'importe quelle réponse à nos doutes sans trop d'effort.

Inconvénients de BootstrapBien que presque tout soit bon, nous devons également parler des inconvénients ou des aspects moins bons auxquels nous sommes confrontés lorsque nous utilisons ce Cadre CSSVoyons ci-dessous quelques-unes de ses faiblesses.

1. Peu originaleSi nous ne prenons pas un peu de temps pour faire notre design, nous pouvons rester aussi peu originaux si nous utilisons Amorcer sans plus, bien que ce cadre soit conçu pour cela, du fait de la grande adoption qu'il a eu, nous devons travailler un peu plus pour ne pas ressembler à la copie de la copie.

2. Courbe d'apprentissageComme tout, il faut passer par une courbe d'apprentissage si on veut en tirer le meilleur parti, le problème c'est que si on veut passer de l'aspect basique à l'avancé, le choc est un peu fort.

3. Mauvaise compatibilité entre les versionsLorsqu'il y a un changement de version, la version précédente perd beaucoup de validité et si nous voulons la mettre à jour cela nous coûtera cher, surtout si nous avons apporté des modifications importantes pour que notre site soit différent.

InstallationUne fois que nous savons ce que c'est Amorcer, et les avantages et les inconvénients de son utilisation dans nos projets, nous devons passer à la partie pratique du tutoriel, maintenant nous allons apprendre d'où nous pouvons obtenir ce framework et comment nous pouvons l'inclure dans notre projet.

Obtenir BootstrapLa première chose que nous devons faire est d'obtenir les fichiers nécessaires pour inclure Amorcer dans notre projet, c'est pourquoi nous devons visiter leur site Web getbootstrap.com et télécharger les fichiers nécessaires, ou bien utiliser un CDN pour éviter d'héberger les fichiers sur notre serveur et réduire l'utilisation de notre bande passante.
Quelle que soit l'option, nous devons être sur une page similaire à la suivante si nous cliquons sur le bouton de téléchargement initial lors de la visite de la page du framework :

AGRANDIR

Pour faciliter le travail, supposons que nous ayons téléchargé le projet, il se présente dans un fichier compressé que nous devons extraire dans un emplacement que nous pouvons utiliser et qui devrait ressembler à ce qui suit :

Comme nous pouvons le voir, dans notre projet, il doit y avoir trois dossiers, un pour le CSS, un autre pour les sources qui sont utilisées et enfin un pour le JS nécessaire. Avec cela, nous avons déjà disponible Amorcer, qui n'est rien de plus que de copier le projet dans notre dossier de ressources.

Démarrer avec BootstrapPuisque nous avons toutes les ressources en notre possession, nous devons l'inclure dans notre conception, pour cela nous pouvons créer un fichier HTML et là faire les inclusions nécessaires, on peut le voir plus en détail dans le code suivant :

 Installer Bootstrap 

Comme nous pouvons le voir, la seule chose que nous avons faite a été d'inclure trois fichiers, en particulier deux .css et un .js, c'est ce dont nous avons besoin pour commencer à utiliser toute la structure, si nous ouvrons maintenant notre fichier avec un navigateur, nous verrons en quoi la police des lettres est différente de ce que nous verrions normalement avec une étiquette H1:

La grille BootstrapPour réaliser l'organisation de nos conceptions, Amorcer utiliser une grille ou la grille, il est composé de 12 colonnes, donc tout ce que nous voyons sur notre écran doit être organisé de cette manière, ce qui permet d'obtenir que la page puisse être structurée de manière à pouvoir utiliser les outils qui nous sont proposés d'une manière très transparente.

Bien sûr c'est un processus d'adaptation, mais l'important est que l'on puisse faire des colonnes qui en regroupent plusieurs, ainsi que lorsque l'on travaille avec les tableaux de HTML que nous pouvons faire des colonnes avec plusieurs jointures avec la propriété span. Pour créer un site Web qui utilise cette structure, nous n'avons qu'à disposer des éléments suivants :

Un div avec la classe récipient, à l'intérieur de ce un div avec la classe ligne, et enfin à l'intérieur d'un ou plusieurs div avec la classe choux, voyons dans le code suivant un exemple de page avec 3 colonnes, pour cela chaque colonne doit grouper 4 pour additionner un total de 12 ce que nous avons expliqué est la valeur par défaut de Amorcer.

 Colonnes dans Bootstrap
Exemple d'utilisation des colonnes dans le bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilite mon in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Entier aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam juste ex, demande d'efficacité, placerat sit amet purus. Cras id semper felis. Soyez ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Entier eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilite mon in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Entier aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam juste ex, demande d'efficacité, placerat sit amet purus. Cras id semper felis. Soyez ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Entier eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilite mon in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Entier aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam juste ex, demande d'efficacité, placerat sit amet purus. Cras id semper felis. Soyez ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Entier eu eleifend mauris.

Cela se traduit par une page où les trois div internes sont sur une seule ligne divisée en trois colonnes égales, comme nous pouvons le voir dans l'image suivante :

AGRANDIR

Cette structure, bien qu'elle paraisse un peu carrée, est très flexible, puisqu'il suffit de faire une sorte de jeu avec les conteneurs et leurs colonnes, pour obtenir les résultats que l'on souhaite. Avec cela, nous terminons ce tutoriel, nous avons effectivement fait nos premiers pas avec Amorcer et maintenant nous pouvons commencer à profiter de ses avantages plus directement sur nos projets ou applications Web.