Qu'est-ce que Bootstrap?
Il y a beaucoup de questions ici liées à Bootstrap. Je vois beaucoup de gens qui l'utilisent. Alors j'ai essayé de le rechercher, et j'ai trouvé le site officiel Bootstrap , mais il n'y avait qu'une section de téléchargement et quelques mots après cela. Rien qui explique à quoi ça sert ... Je viens de comprendre que c'est un aide en amont. J'ai essayé de trouver quelque chose par Google, mais je n'ai rien trouvé de spécifique. Tout ce que j'ai trouvé est lié à la définition de l'informatique.
Donc, mes questions sont:
- Qu'est-ce que Bootstrap?
- À quoi sert-il et comment aide-t-il le développement en amont?
- J'aimerais aussi plus de détails pour l'expliquer.
Il s’agit d’un framework open source HTML, CSS et JavaScript (initialement créé par Twitter) que vous pouvez utiliser comme base pour créer des sites Web ou des applications Web.
Mettre à jour
L'officiel site web bootstrap est mis à jour et comprend une définition claire.
"Bootstrap est le framework HTML, CSS et JS le plus populaire pour le développement de premiers projets réactifs et mobiles sur le Web."
"Conçu et construit avec tout l'amour du monde par @ mdo et @ fat ."
Bootstrap est un framework Javascript open-source développé par l'équipe de Twitter. Il s'agit d'une combinaison de code HTML, CSS et Javascript conçue pour aider à créer des composants d'interface utilisateur. Bootstrap a également été programmé pour prendre en charge HTML5 et CSS3.
Aussi, cela s'appelle Front-end-framework.
Bootstrap est un ensemble gratuit d’outils permettant de créer des sites Web et des applications Web.
Il contient des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, la navigation et d'autres composants d'interface, ainsi que des extensions JavaScript facultatives.
Quelques raisons pour lesquelles les programmeurs ont préféré le Bootstrap Framework
Facile à démarrer
Grand système de grille
Style de base pour la plupart des éléments HTML (typographie, code, tableaux, formulaires, boutons, images, icônes)
Liste exhaustive de composants
Plugins Javascript fournis
Extrait de à propos de Bootstrap Framework
Bootstrap, tel que je le connais, est un CSS bien défini. Bien que vous utilisiez Bootstrap, vous pouvez également utiliser JavaScript, jQuery, etc. Mais la principale différence est que, en utilisant Bootstrap, vous pouvez simplement appeler le nom de la classe et obtenir ensuite le résultat sur le formulaire HTML. . pour par exemple. coloration des boutons en forme de texte, en utilisant des mises en page. Pour tout cela, vous n'avez pas besoin d'écrire un fichier CSS, vous devez simplement utiliser le nom de classe correct pour mettre en forme votre formulaire HTML.
En termes plus simples, vous pouvez comprendre Bootstrap comme une infrastructure Web frontale créée par Twitter pour une création plus rapide d’applications Web sensibles aux appareils. Bootstrap peut également être compris principalement comme un ensemble de classes CSS qui y sont définies et qui peuvent simplement être utilisées directement. Il utilise CSS, javascript, jQuery, etc. en arrière-plan pour créer le style, les effets et les actions des éléments Bootstrap.
Vous savez peut-être que nous utilisons CSS pour styliser les éléments de page Web et créer des classes et leur attribuer des éléments pour leur appliquer le style. Bootstrap simplifie ici la conception puisqu'il suffit d'inclure les fichiers Bootstrap et de mentionner les noms de classe prédéfinis de Bootstrap pour les éléments de notre page Web. Ils seront ensuite stylisés automatiquement par Bootstrap. Grâce à cela, nous nous débarrassons de l’écriture de nos propres classes CSS pour styliser les éléments de page Web. Plus important encore, Bootstrap est conçu de manière à rendre le périphérique de votre site Web réactif, ce qui est son objectif principal. D'autres alternatives pour Bootstrap pourraient être - Fondation , Matérialiser etc.
Bootstrap vous évite d'écrire beaucoup de code CSS et vous fait gagner du temps que vous passez à concevoir les pages Web.
Bootstrap est un framework CSS et JavaScript open-source développé à l'origine pour l'application Twitter par l'équipe de concepteurs et de développeurs de Twitter. Ensuite, ils l'ont publié pour open-source. Etant un utilisateur de longue date de Twitter bootstrap je trouve que c'est l'un des meilleurs pour la conception de sites Web réactifs prêts pour les mobiles. De nombreux plugins CSS et Javascript sont disponibles pour concevoir votre site Web en un rien de temps. C'est une sorte de cadre de conception rapide de modèles. Certaines personnes se plaignent du fait que les fichiers CSS bootstrap _ sont lourds et prennent du temps à charger, mais ces revendications sont formulées par des personnes paresseuses. Vous n'avez pas à conserver le fichier bootstrap.css complet sur votre site Web. Vous avez toujours la possibilité de supprimer les styles des composants dont vous n'avez pas besoin pour votre site Web. Par exemple, si vous utilisez uniquement des composants de base tels que des formulaires et des boutons, vous pouvez supprimer d'autres composants tels que les accordéons, etc. du fichier CSS principal. Pour commencer à jouer dans bootstrap, vous pouvez télécharger les modèles et composants de base à partir du site getbootstrap et laisser la magie opérer.
Bootstrap est un framework HTML, CSS, JS avec de nombreux composants qui vous permettent de créer très rapidement des sites Web ou des applications Web magnifiques et modernes.
Disclaimer: J'ai utilisé bootstrap dans le passé, mais je n'ai jamais vraiment apprécié ce que c'était auparavant, cette description vient de moi. venir à ma propre définition, aujourd'hui. Et je sais que bootstrap v4 est sorti, mais j’ai trouvé que la documentation bootstrap v3 était beaucoup plus claire, je l’ai donc utilisée. La bibliothèque ne changera pas fondamentalement ce qu’elle fournit.
Brièvement
Bootstrap est une collection de fichiers CSS et javascript qui fournit un style par défaut plutôt sympa pour les éléments HTML standard, ainsi que quelques objets de contenu Web courants qui ne sont pas des éléments HTML standard.
Pour faire une analogie, c'est un peu comme appliquer un thème dans PowerPoint, mais pour votre site Web: cela donne une belle apparence à Nice sans trop d'effort initial.
En quoi cela consiste?
La documentation officielle de la v3 le divise en trois sections:
Celles-ci correspondent approximativement aux trois choses principales que Bootstrap fournit:
- Fichiers CSS simples qui style les éléments HTML standard. Ainsi, Bootstrap donne à vos éléments standard une belle apparence. par exemple. html:
<input class="btn btn-default" type="button" value="Input">Click me</button> - Les fichiers CSS qui utilisent un style sur des éléments HTML standard pour les transformer en quelque chose qui n'est pas un élément HTML standard mais est un élément standard Bootstrap (par exemple https://getbootstrap.com/docs/3.3/components/#progress ). De cette manière, Bootstrap étend la liste des éléments Web "standard" de manière cohérente. par exemple. html:
<span class="glyphicon glyphicon-align-left"></span> - Les classes CSS sont conçues avec jQuery à l'esprit. En interne, Bootstrap utilise des sélecteurs jQuery pour modifier les styles à la volée et interagir avec le DOM, offrant ainsi la même capacité à l'utilisateur. Je crois que cela nécessite plus d'explications, alors ...
Utiliser Javascript/jQuery
Bootstrap étend jQuery pas mal. Si nous regardons le code source, nous pouvons voir qu'il utilise jQuery pour faire des choses comme: configurer les écouteurs pour que l'événement keydown interagisse avec les menus déroulants . Il effectue toute cette configuration jQuery lorsque vous l'importez dans votre balise <script>. Vous devez donc vous assurer que jQuery est chargé avant que Bootstrap ne le soit.
De plus, il lie le javascript au DOM plus étroitement que le simple jQuery, en fournissant une interface de classe javascript . par exemple. bascule un bouton par programme . N'oubliez pas que CSS définit simplement l'apparence d'une chose. Le principal travail de ces opérations sera donc de modifier les classes CSS qui s'appliquent à l'élément à ce moment-là. Ce type de changement, basé sur les entrées de l'utilisateur, ne peut pas être réalisé avec du CSS simple.
Il existe d'autres interactions standard avec un utilisateur auxquelles nous, internautes, sommes habitués et qui ne sont pas couvertes par CSS. Par exemple, cliquer sur un lien pour faire défiler une page au lieu de changer de page. Une des choses que Bootstrap vous donne est un moyen simple d'implémenter ce comportement sur votre propre site web.
Normes
J'ai beaucoup parlé du mot "standard" ici et pour une bonne raison. Je pense que la meilleure chose que Bootstrap fournit est un ensemble de normes attrayantes. Vous êtes libre de modifier le thème par défaut autant de fois que vous le souhaitez, mais il s'agit d'une meilleure base de référence que les fichiers html, css et js bruts. Et c'est pourquoi on l'appelle "framework".
Différents navigateurs Web ont des styles par défaut différents et peuvent agir différemment. Ils ont donc besoin de préfixes CSS différents, etc. Un avantage majeur de Bootstrap est qu'il est beaucoup plus fiable que d'écrire vous-même tout ce que vous voulez dans tous les navigateurs (vous aurez toujours des problèmes, j'en suis sûr, mais c'est plus facile).
Je pense que Bootstrap a été préféré quand gulp et babel n'étaient pas aussi populaires. En regardant Bootstrap _, il semble que cela remonte à une époque où tout le monde compilait son javascript. C'est toujours pertinent, mais vous pouvez maintenant profiter de certains avantages d'autres sources.
Des versions plus récentes de CSS vous ont permis de définir des transitions entre ces listes statiques au fur et à mesure de leur modification. La version originale de Bootstrap est antérieure à l'adoption généralisée de cette fonctionnalité par les navigateurs. Ils ont donc toujours leurs propres classes d'animation. Il y a quelques fragments de Bootstrap qui ressemblent à ceci: d'autres éléments sont apparus autour d'eux et les rendent redondants.