Bienvenue dans cette unité, je vais présenter un nouvel outil appelé Bootstrap et je suis sur la page d'accueil bootstrap get bootstrap dotcom.
Et je veux juste prendre quelques minutes dans cette vidéo d'introduction pour expliquer ce que bootstrap est et pourquoi nous l'utilisons.
Et puis aussi pour vous montrer quelques exemples de sites qui utilisent bootstrap.
Commençons donc juste par la lecture du texte officiel bootstrap.
Bootstrap est le SS de TMLC le plus populaire dans le cadre javascript pour développer des premiers projets mobiles réactifs sur le Web.
Let's break que vers le bas un peu.
Bootstrap est extrêmement populaire.
En fait, c'est le référentiel le plus étoilé et bifurqué sur get hub ce qui signifie essentiellement qu'il a le plus de gens l'utilisant la plupart des gens préfèrent l'ajouter sur obtenir de l'aide et tout ce bootstrap est en fait un seul fichier de succès et un seul fichier de javascript .
Maintenant, il ya beaucoup de C S S et beaucoup de javascript dans ces fichiers, mais ils ne sont que deux fichiers et nous pouvons les inclure dans notre propre application.
Fondamentalement, nous prenons le code de quelqu'un d'autre et de Bootstrap nous avons ajouté dans notre propre application et il nous aide à faire de bons sites à la recherche qui sont réactifs et il nous aide à les rendre rapides sans avoir à écrire une tonne de notre propre code.
Il y a deux raisons principales que je vous montre dans ce cours.
Le premier est qu'il est très populaire.
Beaucoup d'endroits l'utiliser.
Beaucoup de sociétés beaucoup de développeurs l'utiliser et il est juste utile de savoir.
Mais la seconde est que cela va nous aider à rendre les sites Web attrayants assez rapidement dans ce cours.
Donc, quand nous apprenons de retour et de choses quand nous nous concentrons sur Node et exprimer et Mongo et la mangouste et le genou profond et tout ce complexe en arrière et la logique, nous pouvons toujours faire quelque chose qui semble bien sans avoir à consacrer une heure ou deux heures Vidéo pour styliser quelque chose que nous pouvons brancher bootstrap et nous pouvons faire les choses en 10 15 minutes et nous allons regarder assez bon.
La prochaine chose que je vais faire est de vous donner une visite rapide des quais, mais bootstrap a célèbre beaucoup de bonne documentation de bons exemples et ils utilisent réellement bootstrap sur ce site qui fait sens.
Alors commençons par cliquer sur C Ss et c'est ce que mentionné bootstrap est juste un seul fichier CSSA un fichier javascript unique à l'intérieur de ce fichier CSSA.
Il y a un tas de trucs que nous obtenons gratuitement.
Alors jetez un oeil à boutons.
Donc, si nous voulons faire un bouton et nous avons bootstrapped inclus dans notre application, nous pouvons ajouter cette classe à la classe est en fait Beati et PTEN par défaut et nous obtenons ces boutons.
Nous pouvons faire différentes couleurs.
Jetons un coup d'oeil aux formulaires.
Nous obtenons de bonnes contributions ici.
Et il est également très important de noter que tout est réactive sur le site afin que vous puissiez voir que nous obtenons des choses qui répondent à la largeur de l'écran.
Nous avons aussi différents types de formulaires.
Vous pouvez combiner les différentes pièces.
Donc, ici, ils utilisent un bouton avec un formulaire.
Donc, c'est comme Lego pièces bootstrap et beaucoup de façons, il a juste été de pièces Lego que vous pouvez mettre en place et ajouter à votre site comme bon vous semble.
Nous allons examiner la plupart de ces composantes.
La plupart de ces gros morceaux une fois que nous commençons à travailler avec lui et à écrire le code bootstrap nous-mêmes.
Donc, pour l'instant nous allons aller de l'avant et quand vous montrer l'onglet suivant qui est composants composants contiennent quelques-uns des plus gros morceaux de bootstrap que nous pouvons utiliser et qui comprend des choses comme nav bars.
Et c'est probablement l'un des aspects les plus populaires de bootstrap que beaucoup et beaucoup de sites utilisent comme vous pouvez le voir avec un peu de code.
Il ressemble beaucoup, mais je vous assure que c'est beaucoup moins que ce serait si nous écrivons une barre NAV à partir de zéro.
Et cela vient avec la forme de drop downs et il ya plusieurs types de barres de différentes couleurs certains qui sont fixés au haut de la page certains qui défilent.
Il ya d'autres composants comme le Jumbotron qui est un moyen de présenter un certain contenu sur votre site Web des barres de progression.
Et ceux-ci viennent tous avec bootstrap.
Donc, vous vous demandez peut-être maintenant si bootstrap vient à tous ces morceaux et ils sont déjà pré style ce que chaque site qui utilise bootstrap avait l'air le même.
Et la réponse est oui et non.
Cela dépend de la façon dont le site utilise bootstrap.
Je dirais qu'une entreprise ou un projet qui utilise bootstrap bien, il est difficile de dire qu'ils utilisent réellement bootstrap parce qu'ils utilisent ces composants principaux et puis vous pouvez entrer et écrire vos propres styles sur le dessus.
Changer les couleurs changer les polices de changer certains des effets de vol stationnaire.
Vous n'avez pas à utiliser exactement les mêmes couleurs et tout ce qui vient avec bootstrap, mais cela ne signifie pas qu'il ya quelque chose d'intrinsèquement mauvais à l'aide de la construit dans les styles Bootstrap soit.
Et nous allons certainement faire les deux.
Donc, quand nous faisons un site et un focus n'est pas vraiment sur le front end, nous voulons juste faire quelque chose qui semble présentable rapidement.
Fondamentalement prototype front end utilisera bootstrap et nous ne modifiera pas vraiment de nombreuses pièces.
Mais alors, si nous travaillons sur quelque chose d'un peu plus grand quelque chose que nous ne voulons pas ressembler à nous utilisons bootstrap sans changer quoi que ce soit du tout alors nous allons entrer et ajouter quelques-uns de nos propres styles essentiellement ajouter une couche de peinture au pistolet Sur le dessus de bootstrap.
La prochaine chose que je veux faire est de vous montrer quelques-uns des sites qui sont construits avec bootstrap et voyage Buddh a effectivement un site Web officiel où ils mettent en valeur certains de ces sites.
Si vous cliquez sur Expo, je l'ai déjà ouvert.
Vous pouvez voir qu'ils mettent en valeur belle et inspirante utilise un bootstrap afin que nous puissions ouvrir certains de ceux-ci pour les ouvrir et de nouveaux onglets.
Et ce ne sont que les plus récents.
Il y a des centaines sur ce site.
Vous pouvez voir des tonnes et des tonnes d'entre eux et vous pouvez garder le défilement et le défilement et puis nous pouvons aller à quelques plus vieux et il ya tellement de différents sites qui l'utilisent.
Et ils ne sont pas vraiment tous les mêmes.
Oui, peut-être beaucoup d'entre eux ont une barre de navigation.
Peut-être beaucoup d'entre eux ont cette disposition d'image en grand écran, mais c'est plus d'une tendance de conception que quelque chose qui bootstrapped lui purement responsable.
Prenons donc un coup d'oeil à certains d'entre eux.
Celui-ci est créatif Tim qui est une entreprise qui fait des modèles de site Web en fait.
Et vous pouvez voir que nous avons cette belle grille d'images.
Il est très réactif.
Si je rétrécis ça, nous avons notre petit bar de navigation ici.
Il s'agit donc d'un composant bootstrap de la façon dont tout est disposé dans cette grille.
Bootstrap en est partiellement responsable, mais vous pouvez également voir qu'ils n'utilisent pas les boutons Bootstrap intégrés par défaut.
Ils les ont changés.
Les choses semblent différentes.
Donc je pense que c'est une très bonne utilisation de bootstrap qui est un site vraiment agréable.
Il fonctionne bien et il utilise bootstrap mais il ne s'appuie pas sur bootstrap 100 pour cent.
Jetons un coup d'oeil à un ou deux plus.
Donc, celui-ci est appelé Indicus ou des indices quelque chose comme ça.
Apparemment, ils concevoir et construire des produits numériques que les gens aiment utiliser.
Alors défilons ici.
Jetez un oeil à ce que nous avons.
Donc, il ya du contenu qui est probablement construit avec le système de grille d'amorçage qui aide à organiser et à poser les choses comme je l'ai mentionné avant est notoirement difficile dans Pearcey SS.
Il est de mieux en mieux, mais bootstrap est vraiment très utile pour nous aider à mettre les choses sur notre application.
Et nous avons une barre de bas de page il ya une barre de navigation ici, donc c'est vraiment amusant d'aller à l'Expo bootstrap prendre un certain temps pour explorer certains des projets qui ont utilisé pour bootstrap et voir comment ils l'utilisent et toutes les différentes façons que les entreprises modifient Il ajouter dans leurs propres polices leurs propres couleurs et vraiment comprendre quels sont les composants de base que beaucoup et beaucoup de sites utilisent et pourquoi décider d'utiliser bootstrap.
Et à mon avis, il s'agit vraiment du système de grille que nous allons consacrer une vidéo dans cette unité à et les barres de nav et la réactivité de tout.
D'ACCORD.
Donc, pour terminer je vais vous montrer un site simple que nous allons faire.
C'est notre startup appelée caresse lourde.
Il vous aide à trouver votre âme sœur féline parfaite et il utilise bootstrap.
Vous pouvez voir que nous avons une barre de navigation ici comme si nous avions signé des boutons Morgan.
Nous obtenons ces petites icônes alors nous avons notre texte ici et la petite étiquette et puis notre bouton.
Et puis, comme je redimensionner les choses tout est réceptif, vous pouvez voir les choses se déplacent autour de se déplacer.
Et le plus important, nous obtenons ce petit hamburger et nous avons une barre de navigation conviviale mobile.