Top 25 des questions et réponses de l'entretien Bootstrap [Pour les débutants et les expérimentés]

Si vous êtes un développeur Web mobile, vous avez probablement déjà entendu parler de Bootstrap et de son importance dans la création d'une interface utilisateur rapide, réactive et esthétique. C'est la priorité de chaque entreprise aujourd'hui de fournir une interface utilisateur intuitive et flexible et une expérience utilisateur (UI/UX). Et Bootstrap vous aide à faire exactement cela !

Étant donné que les entreprises souhaitent développer une conception frontale ajustable pour des appareils de différentes tailles d'écran, être qualifié chez Bootstrap aujourd'hui vaut un énorme salaire.

Donc, si vous commencez une carrière technique ou si vous envisagez un poste plus élevé, voici quelques-unes des questions et réponses les plus fréquemment posées lors des entretiens Bootstrap pour vous aider à décrocher l'emploi de vos rêves. Alors, sans plus tarder, commençons !

Top 25 des questions et réponses de l'entretien Bootstrap

Question 1 : Qu'est-ce que Bootstrap ?

Bootstrap est un framework frontal très réactif et facile à utiliser utilisé pour créer des applications Web avec HTML, CSS et JS. Il a une mise en page rapide et intuitive au profit de ses utilisateurs. Bootstrap permet aux utilisateurs de créer des interfaces utilisateur nettes et esthétiques pour les applications mobiles à l'aide de modèles de conception existants. Ses fonctionnalités incluent les menus déroulants, les boutons, les formulaires, les glyphicons et l'onglet Alertes, pour n'en nommer que quelques-uns.

Question 2 : Quels sont les composants clés de Bootstrap ?

Bootstrap est chargé avec un certain nombre de composants qui permettent une excellente expérience utilisateur. Ceux-ci incluent des fonctionnalités interactives telles que des fenêtres contextuelles, des menus déroulants, des barres de navigation, des boutons, des formulaires, des alertes, etc.

Voici les composants clés de Bootstrap :

1. Plugins JS : c'est là que se trouvent les plugins JS et jQuery
2. Personnaliser : utilisé pour personnaliser les frameworks
3. CSS : inclut les fichiers CSS
4. Échafaudage : contient un système de grille, des styles d'arrière-plan, etc.

Question 3 : Qu'est-ce qui fait de Bootstrap une option efficace pour le développement mobile et Web ?

La mise en page rapide et facile à utiliser de Bootstrap permet un développement plus rapide des applications mobiles et Web. Les modèles de conception inclus sont très réactifs et s'adaptent automatiquement à différentes tailles d'écran sans aucun compromis sur l'essence d'une page Web.

Question 4 : Quelles sont les différentes fonctionnalités de Bootstrap ?

Voici quelques fonctionnalités de Bootstrap :

– Il s'agit d'une plateforme gratuite et open source ; permet aux développeurs de contribuer à son amélioration.

– Bootstrap est rapide, réactif et extrêmement facile à utiliser

– Il est compatible avec tous les navigateurs

– Bootstrap dispose d'une riche bibliothèque de conceptions et de modèles parmi lesquels choisir

Question 5 : Que sont les glyphicons ?

Les glyphicons dans Bootstrap sont des icônes au format de police utilisées pour indiquer des actions telles qu'un avertissement, une suppression, un zoom, une modification, etc. Il existe environ 200 icônes de ce type contenues dans une classe individuelle.

La syntaxe pour utiliser ces glyphicons est :

<p><span class = "glyphicons glyphicon-crayon"></span></p>

Question 6 : Expliquez les listes déroulantes et les groupes de boutons dans Bootstrap.

Une liste déroulante est un menu à bascule dynamique qui contient une liste d'éléments liés en dessous. C'est l'un des éléments de conception les plus propres d'un site Web.

La syntaxe pour utiliser ces Dropdowns est :

<div class= "dropdown"><!– ayez votre liste dedans avec la classe .dropdown-menu –></div>

Les groupes de boutons sont une série de boutons placés de manière adjacente. Ce composant Bootstrap nécessite que les éléments de division avec la classe .btn-group soient définis en premier. Après cela, les éléments du bouton sont imbriqués à l'aide de la classe.btn.

La syntaxe est la suivante :

<div class="btn-group"><button class= "btn">Correct</button></div>

<div class="btn-group"><button class= "btn">Mauvais</button></div>

En utilisant les deux composants ci-dessus, vous pouvez créer un nouveau composant appelé Button Dropdown qui vous permettrait de déclencher une liste déroulante à l'aide d'un élément de bouton.

Syntaxe:

<button class = "btn-default dropdown-toggle"><!— le composant déroulant va ici –></button>

Question 7 : Que sont les groupes d'entrée ?

Les groupes de saisie sont une extension de la classe de contrôle de formulaire qui vous permet d'ajouter une chaîne de texte ou d'inclure des boutons sur l'un des côtés d'un champ de saisie.

La classe .input-group et la classe .input-group-addon sont utilisées ensemble pour implémenter un groupe d'entrée.

Syntaxe:

<div class="input-group">

<span class=”input-group-addon” id=”basic-addon1″>@</span>

<input type=”text” class=”form-control” placeholder=”Username” aria-depressedby=”basic-addon1″>

</div>

Question 8 : Quelles sont les quatre classes contextuelles à utiliser avec la barre progressive de Bootstrap.

Voici les quatre classes contextuelles utilisées avec la barre progressive de Bootstrap :

1. Progrès-succès
2. Progrès-info
3. Avertissement de progression
4. Progrès-danger

Question 9 : Combien de styles de boutons différents existe-t-il dans Bootstrap ? Que sont-ils?

Il existe 7 styles différents dans lesquels le bouton Bootstrap peut être utilisé. Ils sont les suivants :

1. .btn-info
2. .btn-avertissement
3. .btn-danger
4. .btn-succès
5. .btn-lien
6. .btn-primaire
7. .btn-default

Question 10 : Expliquez les alertes Bootstrap.

Les alertes d'amorçage sont utilisées dans la création de messages d'alerte présumés. Ceci est fait principalement pour styliser les messages afin qu'ils puissent apparaître plus perceptibles à un utilisateur.

Voici les quatre classes d'alertes :

1. .alerte-succès
2. .alert-info
3. .alerte-avertissement
4. .alerte-danger.

Question 11 : Comment créez-vous un formulaire vertical ou de base dans Bootstrap ?

Voici les étapes pour créer un formulaire de base vertical dans Bootstrap :

Étape 1 : à l'élément parent <form>, ajoutez un formulaire de rôle.

Étape 2 : Ajoutez des étiquettes et des contrôles dans un <div> avec class.form-group

Étape 3 : Ajoutez la classe .form-control à chaque URL de texte <input>, à tous les éléments <textarea> ainsi qu'aux éléments <select>.

Question 12 : Qu'est-ce que la pagination dans Bootstrap ?

Comme le suggère l'étiquette, Pagination vous permet de diviser le contenu de votre site Web en différentes pages pour faciliter la navigation.

Syntaxe:

<ul class = "pagination"><!—Liste des éléments va ici –></ul>

Question 13 : Qu'est-ce qu'un conteneur Bootstrap ?

Le conteneur bootstrap est essentiellement un conteneur pour ajouter un code HTML. Ce site conteneur devient alors une partie de la page où le contenu peut être ajouté. Cela rend votre interface utilisateur plus rapide et plus réactive.

Lire aussi Bootstrap vs Material UI

Question 14 : Énumérez trois composants de Bootstrap.

1. Navbar : agit comme un en-tête pour la navigation sur votre site Web

Syntaxe : <nav class = "navbar"><!—Codez vos éléments DOM de navigation –></nav>

2. Jumbotron : se comporte comme une fenêtre ; peut passer en plein écran pour se concentrer sur un contenu clé

Syntaxe : <div class = "jumbotron"><!—Écrivez votre contenu dans les éléments DOM ici –></div>

3. Barres de progression : affiche des commentaires mettant en évidence la progression d'une action

Syntaxe : <div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>

Question 15 : Quels sont les deux types de mises en page dans Bootstrap ?

1. Disposition fluide
2. Disposition fixe

Question 16 : Qu'est-ce que la mise en page fluide ?

La disposition fluide est une fonctionnalité utile lorsque la largeur totale de l'écran doit être utilisée dans la conception. Lorsque vous choisissez cette option, la mise en page s'ajuste en fonction de la taille du navigateur.

Question 17 : Qu'est-ce que la mise en page fixe ?

Une mise en page fixe est différente de la mise en page fluide de sorte qu'elle ne s'ajuste pas en fonction de la taille du navigateur. Cependant, il est toujours rapide et réactif à 940px.

Question 18 : Qu'est-ce que le plugin modal dans Bootstrap ?

Une fenêtre héritée placée en tant que couche sur la fenêtre parente est appelée fenêtre modale. Cette fenêtre ajoute de la valeur à l'expérience utilisateur en la rendant fonctionnelle. Le plugin utilisé pour créer des fenêtres modales est appelé le plugin modal.

Question 19 : Que sont les éléments de repli Bootstrap ?

Vous pouvez réduire n'importe quel élément Bootstrap sans code JavaScript. Cela peut être fait en ajoutant data-toggle= "collapse" à l'élément contrôleur. La cible de données est également incluse pour lui donner le contrôle de réduire l'élément.

Pour utiliser cette fonctionnalité Bootstrap, utilisez .collapse(options).

Question 20 : Définir un puits bootstrap ?

Bootstrap well est similaire au conteneur Bootstrap et aide le contenu à paraître plus supprimé et plus propre sur la page. Il peut également être utilisé pour envelopper le contenu en ajoutant la classe .well.

Question 21 : Qu'est-ce que le plugin Carousel dans Bootstrap.

Le plugin Carousel vous permet de créer des curseurs sur vos pages Web. Les curseurs permettent d'encastrer de grands blocs de contenu dans un petit espace sur la page.

Quelques plugins de carrousel que vous pouvez utiliser sont :

.carrousel(options)

.carrousel('pause')

.carrousel(cycle')

.carrousel('préc')

.carrousel('suivant')

Question 22 : Expliquez la sortie du code suivant.

<div class="progrès">

<div class=”progress-bar progress-bar-success” style=”width: 65%”>

<span class="sr-only">75 % réussi</span>

</div>

<div class=”progress-bar progress-bar-warning” style=”width: 20%”>

<span class="sr-only">30 % terminé avec des avertissements</span>

</div>

<div class=”progress-bar progress-bar-danger” style=”width: 15%”>

<span class="sr-only">15 % n'ont pas terminé</span>

</div>

</div>

Réponse : La sortie du code ci-dessus afficherait un résultat pleine largeur et entièrement rempli sur la barre de progression. En effet, Bootstrap empile plusieurs barres dans une seule barre lorsqu'elles sont placées dans le même élément parent de progression. En outre, la somme totale de la barre de progression est de 100 %.

Question 23 : Indiquez les codes utilisés pour l'affichage du code dans Bootstrap ?

Réponse : Deux codes sont utilisés pour l'affichage du code. Elles sont:

1. balise <code>
2. balise <pre>

Question 24 : Expliquez Normaliser dans Bootstrap.

Bootstrap normalize est une fonctionnalité de Bootstrap à l'aide de laquelle un petit fichier CSS est utilisé pour augmenter la cohérence entre les navigateurs.

Question 25 : Quelle est la méthode pour personnaliser les liens de pagination dans Bootstrap ?

Utilisez .disabled pour les liens qui ne sont pas cliquables et utilisez .active pour référencer la page actuelle.

Paiement : Bootstrap vs Material UI

Apprenez des cours de logiciels en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Conclusion

Nous espérons que ces questions et réponses vous ont aidé à approfondir vos connaissances sur Bootstrap. Bonne chance pour cette interview !

Si vous souhaitez en savoir plus sur le développement de logiciels à pile complète, consultez le programme exécutif PG de upGrad & IIIT-B en développement de logiciels à pile complète, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets et affectations, statut d'anciens élèves de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.