Il y a beaucoup de questions ici liées à Bootstrap. Je vois que beaucoup de gens l'utilisent. J'ai donc essayé de faire des recherches et j'ai trouvé site officiel de 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 ... J'ai juste compris qu'il s'agit d'une aide frontale. 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 frontal?
• J'aimerais également avoir 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.

• Plus d'informations et de liens à télécharger

• Commencer

• Exemples

• Thèmes

• Bootply - Bootstrap Editor and Builder

Mise à jour

Le site Web officiel de bootstrap est mis à jour et comprend une définition claire.

"Bootstrap est le framework HTML, CSS et JS le plus populaire pour développer des 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çu pour aider à créer des composants d'interface utilisateur. Bootstrap a également été programmé pour prendre en charge HTML5 et CSS3.

On l'appelle aussi Front-end-framework.

Bootstrap est une collection gratuite d'outils pour créer des sites Web et des applications Web.

Il contient des modèles de conception HTML et CSS pour la typographie, les formulaires, les boutons, la navigation et d'autres composants d'interface, ainsi que des extensions JavaScript en option.

Quelques raisons pour lesquelles les programmeurs préfèrent le framework Bootstrap

1. Facile à démarrer

2. Excellent système de grille

3. Style de base pour la plupart des éléments HTML (typographie, code, tableaux, formulaires, boutons, images, icônes)

4. Liste complète de composants

5. Plugins Javascript fournis

Extrait de About Bootstrap Framework

Bootstrap, comme je le sais, est un CSS bien défini. Bien qu'en utilisant 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, puis vous obtenez la sortie sur le formulaire HTML. par exemple. coloration des boutons mise en forme du texte, mise en page. Pour tout cela, vous n'avez pas à écrire un fichier CSS, il vous suffit d'utiliser le nom de classe correct pour façonner 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 réactives aux appareils. Bootstrap peut également être compris principalement comme une collection 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 affecter des classes aux éléments de page Web pour leur appliquer le style. Bootstrap ici rend la conception plus simple car nous n'avons qu'à inclure des fichiers Bootstrap et mentionner les noms de classe prédéfinis de Bootstrap pour nos éléments de page Web et ils seront stylisés automatiquement via 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 votre appareil de site Web réactif et c'est le principal objectif de celui-ci. D'autres alternatives pour Bootstrap pourraient être - les cadres Foundation , Materialise, etc.

Bootstrap vous libère de l'écriture de beaucoup de code CSS et vous fait également gagner du temps que vous passez sur la conception des pages Web.

Bootstrap est un framework JavaScript CSS open-source qui a été initialement développé pour l'application Twitter par l'équipe de designers et développeurs de Twitter. Ensuite, ils l'ont publié pour l'open source. Étant 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 de modèle rapide. Certaines personnes se plaignent que les fichiers CSS bootstrap sont lourds et prennent du temps à charger, mais ces affirmations sont faites par des gens paresseux. Vous n'avez pas besoin de conserver le fichier bootstrap.css complet dans 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 n'utilisez que des composants de base comme des formulaires et des boutons, vous pouvez supprimer d'autres composants tels que des accordéons, etc. du fichier CSS principal. Pour commencer à essayer le bootstrap, vous pouvez télécharger les modèles et composants de base depuisgetbootstrap site et laissez la magie opérer .

Avertissement: I have used bootstrap in the past, but I never really appreciated what it actually is before, this description comes from me coming to my own definition, today. And I know that bootstrap v4 is out, but I found the bootstrap v3 documentation to be much clearer, so I used that. The library is not going to fundamentally change what it provides.

Brièvement

Bootstrap est une collection de fichiers CSS et javascript qui fournit un joli style par défaut pour les éléments html standard et 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 rend les choses plutôt belles sans trop d'effort initial.

En quoi cela consiste?

La documentation officielle v3 la divise en trois sections:

• CSS
• Composants
• Javascript

Celles-ci correspondent grosso modo aux trois éléments principaux fournis par Bootstrap:

• Fichiers CSS simples qui stylisent les éléments html standard. Ainsi, Bootstrap rend vos éléments standard assez attrayants. par exemple html:<input class="btn btn-default" type="button" value="Input">Click me</button>
• Fichiers CSS qui utilisent un style sur les éléments html standard pour en faire quelque chose qui n'est pas un élément html standard mais qui est un élément Bootstrap standard (par exemple https://getbootstrap.com/docs/3.3/components/#progress ). De cette façon, Bootstrap étend la liste des éléments Web "standard" d'une manière visuellement 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, et offre ainsi à l'utilisateur la même capacité. Je crois que cela nécessite plus d'explications, alors ...

Utilisation de Javascript / jQuery

Bootstrap étend un peu jQuery . Si nous regardons le code source, nous pouvons voir qu'il utilise jQuery pour faire des choses comme: configurer des écouteurs pour l'événement keydown pour interagir avec les listes déroulantes . Il fait toute cette configuration jQuery lorsque vous l'importez dans votre <script>balise, vous devez donc vous assurer que jQuery est chargé avant Bootstrap.

De plus, il lie le javascript au DOM plus étroitement que le jQuery ordinaire, fournissant une interface de classe javascript . par exemple, basculer un bouton par programmation . N'oubliez pas que CSS définit simplement à quoi ressemble une chose, donc la tâche principale de ces opérations aura tendance à modifier les classes CSS qui s'appliquent à l'élément à ce moment. Ce type de changement, basé sur les entrées des utilisateurs, ne peut pas être fait avec du CSS simple.

Il existe d'autres interactions standard avec un utilisateur auxquelles nous, habitués d'Internet, ne sommes pas couverts par CSS. Comme, en cliquant sur un lien qui vous fait défiler une page au lieu de changer de page. L'une des choses que Bootstrap vous offre est un moyen simple d'implémenter ce comportement sur votre propre site Web.

Normes

J'ai beaucoup mentionné le mot «standard» ici, et pour cause. Je pense que la meilleure chose que Bootstrap offre est un ensemble de normes attrayantes. Vous êtes libre de modifier le thème par défaut autant que vous le souhaitez, mais c'est une meilleure base de référence que le HTML brut, le CSS et le js. 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, et ont besoin de différents préfixes CSS et autres choses du genre. Un avantage majeur de Bootstrap est qu'il est beaucoup plus fiable que d'écrire vous-même toutes ces choses inter-navigateurs (vous aurez toujours des problèmes, j'en suis sûr, mais c'est plus facile).

Je pense que Bootstrap était plus préféré quand gulp et babel n'étaient pas aussi populaires. En regardant Bootstrap, cela semble venir d'un temps avant que tout le monde ne compile son javascript. C'est toujours pertinent, mais vous pouvez obtenir certains des avantages d'autres sources maintenant.

_{Des versions plus récentes de CSS vous ont permis de définir des transitions entre ces listes statiques à mesure qu'elles changent. La version originale de Bootstrap est antérieure à l'adoption généralisée de cette capacité dans les navigateurs, de sorte qu'ils ont toujours leurs propres classes d'animation. Il y a quelques bits de Bootstrap qui ressemblent à ceci: ces autres choses sont apparues autour de lui et le rendent un peu redondant.}

Bootstrap est un framework HTML, CSS, JS avec de nombreux composants qui vous permettent de créer des sites Web ou des applications Web magnifiques et modernes très rapidement.

Les sites Web suivants contiennent des exemples, des éléments et des composants réutilisables que vous pouvez intégrer à votre projet à l'aide du cadre d'amorçage

bootsnipp.com

startbootstrap.com

bootdey.com

Bootstrap est le framework open source le plus populaire et le plus utilisé au monde pour le développement avec HTML, CSS et JS. Il s'agit d'un framework frontal de HTML. Bootstrap aide à créer des sites Web ou des applications Web réactifs et un système de grille à 12 colonnes qui permet d'ajuster dynamiquement le site Web à une résolution d'écran appropriée. La version actuelle de bootstrap est 4.3.1 et l'équipe de bootstrap a également officiellement annoncé la version Bootstrap 5 et des changements comme la suppression de jquery du bootstrap. Certaines des raisons cruciales pour lesquelles le framework bootstrap est le plus préférable sont

• C'est facile a utiliser
• Bootstrap a un grand soutien communautaire
• Les personnalisations peuvent être effectuées facilement
• Il augmente la vitesse de développement

• Réactivité

  Pour plus de détails, vous pouvez consulter le site officiel: https://getbootstrap.com/

Source: https://vmokshagroup.com/blog/bootstrap-advantages/

Selon les normes et la terminologie Web d'aujourd'hui, je dirais que Bootstrap n'est en fait pas un cadre , bien que ce soit ce que prétend leur site Web. La plupart des développeurs considèrent les frameworks Angular, Vue et React, tandis que Bootstrap est communément appelé une " bibliothèque ".

Mais, pour être exact et correct, Bootstrap est un open-source, mobile première collection de CSS, JavaScript et HTML utilitaires de conception visant à fournir des moyens de développer couramment utilisés éléments web beaucoup plus rapide (et plus intelligent) que de les avoir à coder à partir de zéro .

Quelques principes de base qui ont contribué au succès de Bootstrap:

• c'est réutilisable
• il est flexible (c'est-à-dire: permet des systèmes de grille personnalisés, modifie facilement les points d'arrêt de réactivité, la taille des gouttières de colonne ou les couleurs d'état; en règle générale, la plupart des paramètres sont contrôlés par des variables globales)
• c'est intuitif
• il est modulaire (JavaScript et (S) CSS utilisent une approche modulaire; on peut facilement trouver des tutoriels sur la création de builds Bootstrap personnalisés, pour inclure uniquement les pièces dont ils ont besoin)
• a une compatibilité inter-navigateurs supérieure à la moyenne
• accessibilité Web prête à l'emploi (prêt pour lecteur d'écran)
• c'est assez bien documenté

Il contient des modèles de conception et des fonctionnalités pour: mise en page, typographie, formulaires, navigation, menus (y compris les menus déroulants), boutons, panneaux, badges, modaux, alertes, onglets, pliables, accordéons, carrousels, listes, tableaux, pagination, utilitaires multimédias (y compris incorporations, images et remplacement d'image), utilitaires de réactivité, utilitaires basés sur les couleurs (primaire, secondaire, danger, avertissement, info, clair, sombre, muet, blanc), autres utilitaires (position, marge, rembourrage, dimensionnement, espacement, alignement, visibilité), scrollspy, affixe, info-bulles, popovers.

Par défaut, il repose sur jQuery, mais vous trouverez des variantes gratuites de jQuery alimentées par chacun des cadres JavaScript progressifs populaires modernes:

• React-Bootstrap - Bootstrap propulsé par React
• BootrapVue - Bootstrap optimisé pour Vue
• ng-bootstrap - Bootstrap motorisé angulaire

Travailler avec Bootstrap repose fortement sur l'application de certaines classes (ou, selon le framework JS: directives, méthodes ou attributs / accessoires) et sur l'utilisation de structures de balisage particulières.

La documentation contient généralement des exemples génériques qui peuvent être facilement copiés-collés et utilisés comme modèles de démarrage.

Un autre avantage du développement avec Bootstrap est sa communauté dynamique, traduite en une abondance de thèmes, de modèles et de plugins disponibles pour lui, dont la plupart sont open-source (par exemple: calendriers, sélecteurs de date / heure, plugins pour la gestion de contenu tabulaire, comme ainsi que des bibliothèques / collections de composants construites au-dessus de Bootstrap, telles que MDB, modèles de portefeuille, modèles d'administration, etc ...)

Enfin et surtout, Bootstrap a été bien entretenu au fil des ans, ce qui en fait un choix solide pour les applications / sites Web prêts pour la production.