Die 25 wichtigsten Fragen und Antworten zu Bootstrap-Interviews [Für Neueinsteiger und Erfahrene]

Wenn Sie ein Entwickler für mobiles Web sind, haben Sie wahrscheinlich schon von Bootstrap und seiner Bedeutung für die Erstellung einer schnellen, reaktionsschnellen und ästhetisch gestalteten Benutzeroberfläche gehört. Es ist heute die Priorität jedes Unternehmens, eine intuitive und flexible Benutzeroberfläche und Benutzererfahrung (UI/UX) bereitzustellen. Und Bootstrap hilft Ihnen dabei!

Da Unternehmen sehr daran interessiert sind, ein anpassbares Front-End-Design für Geräte mit unterschiedlichen Bildschirmgrößen zu entwickeln, ist es heute einen riesigen Gehaltsscheck wert, sich mit Bootstrap auskennen zu können.

Wenn Sie also eine technische Karriere beginnen oder eine höhere Position anstreben, finden Sie hier einige der am häufigsten gestellten Fragen und Antworten zu Bootstrap-Interviews, die Ihnen dabei helfen, Ihren Traumjob zu finden. Also, ohne weitere Umschweife, fangen wir an!

Die 25 wichtigsten Fragen und Antworten zu Bootstrap-Interviews

Frage 1: Was ist Bootstrap?

Bootstrap ist ein äußerst reaktionsschnelles und benutzerfreundliches Front-End-Framework, das zum Erstellen von Webanwendungen mit HTML, CSS und JS verwendet wird. Es hat ein schnelles und intuitives Layout zum Vorteil seiner Benutzer. Bootstrap ermöglicht es Benutzern, mithilfe vorhandener Designvorlagen gestochen scharfe und ästhetische Benutzeroberflächen für mobile Anwendungen zu erstellen. Zu seinen Funktionen gehören Dropdown-Menüs, Schaltflächen, Formulare, Glyphicons und die Registerkarte "Warnungen", um nur einige zu nennen.

Frage 2: Was sind die Schlüsselkomponenten von Bootstrap?

Bootstrap ist mit einer Reihe von Komponenten ausgestattet, die für eine hervorragende Benutzererfahrung sorgen. Dazu gehören interaktive Funktionen wie Popups, Dropdown-Menüs, Navigationsleisten, Schaltflächen, Formulare, Benachrichtigungen usw.

Im Folgenden sind die Schlüsselkomponenten von Bootstrap aufgeführt:

1. JS-Plugins: Hier befinden sich JS- und jQuery-Plugins
2. Anpassen: Wird verwendet, um Frameworks anzupassen
3. CSS: Enthält CSS-Dateien
4. Gerüst: Enthält ein Rastersystem, Hintergrundstile usw

Frage 3: Was macht Bootstrap zu einer effektiven Option für die Mobil- und Webentwicklung?

Das schnelle und benutzerfreundliche Layout von Bootstrap ermöglicht eine schnellere Entwicklung von Mobil- und Webanwendungen. Die enthaltenen Designvorlagen sind sehr reaktionsschnell und passen sich automatisch an verschiedene Bildschirmgrößen an, ohne die Essenz einer Webseite zu beeinträchtigen.

Frage 4: Was sind die verschiedenen Funktionen von Bootstrap?

Im Folgenden sind einige Funktionen von Bootstrap aufgeführt:

– Es ist eine kostenlose Open-Source-Plattform; ermöglicht es Entwicklern, zu seiner Verbesserung beizutragen.

– Bootstrap ist schnell, reaktionsschnell und extrem einfach zu bedienen

– Es ist mit allen Browsern kompatibel

– Bootstrap verfügt über eine umfangreiche Bibliothek mit Designs und Vorlagen zur Auswahl

Frage 5: Was sind Glyphicons?

Glyphicons in Bootstrap sind schriftformatierte Symbole, die verwendet werden, um Aktionen wie eine Warnung, Löschen, Zoomen, Bearbeiten usw. zu kennzeichnen. Es gibt ungefähr 200 solcher Symbole, die in einer einzelnen Klasse enthalten sind.

Die Syntax zur Verwendung dieser Glyphicons lautet:

<p><span class = „glyphicons glyphicon-bleistift“></span></p>

Frage 6: Erklären Sie Dropdowns und Schaltflächengruppen in Bootstrap.

Ein Dropdown-Menü ist ein dynamisches Umschaltmenü, das eine Liste verknüpfter Elemente darunter enthält. Es ist eines der saubersten Designelemente einer Website.

Die Syntax zur Verwendung dieser Dropdowns lautet:

<div class= „dropdown“><!– haben Sie Ihre Liste darin mit der Klasse .dropdown-menu –></div>

Schaltflächengruppen sind eine Reihe von Schaltflächen, die nebeneinander angeordnet sind. Diese Bootstrap-Komponente erfordert, dass zuerst Divisionselemente mit der Klasse .btn-group definiert werden. Danach werden die Button-Elemente mit der Klasse.btn verschachtelt.

Die Syntax ist wie folgt:

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

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

Mit den beiden oben genannten Komponenten können Sie eine neue Komponente namens Button Dropdown erstellen, mit der Sie ein Dropdown mithilfe eines Schaltflächenelements auslösen können.

Syntax:

<button class = „btn-default dropdown-toggle“><!— die Dropdown-Komponente gehört hierher –></button>

Frage 7: Was sind Eingabegruppen?

Eingabegruppen ist eine Erweiterung der Formularsteuerelementklasse, mit der Sie eine Textzeichenfolge hinzufügen oder Schaltflächen auf einer der Seiten eines Eingabefelds einfügen können.

Die Klassen .input-group und .input-group-addon werden zusammen verwendet, um eine Eingabegruppe zu implementieren.

Syntax:

<div class="input-group">

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

<input type=“text“ class=“form-control“ placeholder=“Benutzername“ aria-scribedby=“basic-addon1″>

</div>

Frage 8: Was sind die vier kontextabhängigen Klassen, die mit der progressiven Leiste von Bootstrap verwendet werden sollen?

Im Folgenden sind die vier Kontextklassen aufgeführt, die mit der progressiven Leiste von Bootstrap verwendet werden:

1. Fortschritt-Erfolg
2. Fortschrittsinfo
3. Fortschrittswarnung
4. Fortschrittsgefahr

Frage 9: Wie viele verschiedene Button-Stile gibt es in Bootstrap? Was sind Sie?

Es gibt 7 verschiedene Stile, in denen der Bootstrap-Button verwendet werden kann. Sie sind wie folgt:

1. .btn-info
2. .btn-Warnung
3. .btn-Gefahr
4. .btn-Erfolg
5. .btn-link
6. .btn-primär
7. .btn-Standard

Frage 10: Erklären Sie Bootstrap-Warnungen.

Bootstrap-Warnungen werden bei der Erstellung mutmaßlicher Warnmeldungen verwendet. Dies geschieht hauptsächlich, um die Nachrichten so zu gestalten, dass sie für einen Benutzer auffälliger erscheinen.

Im Folgenden sind die vier Klassen in Warnungen aufgeführt:

1. .alert-Erfolg
2. .alert-info
3. .alert-warnung
4. .Alarm-Gefahr.

Frage 11: Wie erstellt man ein vertikales oder einfaches Formular in Bootstrap?

Im Folgenden sind die Schritte zum Erstellen eines vertikalen Grundformulars in Bootstrap aufgeführt:

Schritt 1: Fügen Sie dem übergeordneten <form>-Element ein Rollenformular hinzu.

Schritt 2: Fügen Sie Beschriftungen und Steuerelemente innerhalb eines <div> mit class.form-group hinzu

Schritt 3: Fügen Sie jeder Text-URL <input>, allen <textarea>- sowie <select>-Elementen die Klasse .form-control hinzu.

Frage 12: Was ist Paginierung in Bootstrap?

Wie das Etikett vermuten lässt, können Sie mit Pagination den Inhalt Ihrer Website auf verschiedene Seiten aufteilen, um die Navigation zu erleichtern.

Syntax:

<ul class = „pagination“><! – Listenelemente kommen hierher –></ul>

Frage 13: Was ist ein Bootstrap-Container?

Der Bootstrap-Container ist im Wesentlichen ein Container zum Hinzufügen eines HTML-Codes. Diese Container-Site wird dann Teil der Seite, auf der der Inhalt hinzugefügt werden kann. Dadurch wird Ihre Benutzeroberfläche schneller und reaktionsschneller.

Lesen Sie auch Bootstrap vs. Material UI

Frage 14: Listen Sie drei beliebige Komponenten von Bootstrap auf.

1. Navbar: fungiert als Kopfzeile für die Navigation auf Ihrer Website

Syntax: <nav class = „navbar“><! – Codieren Sie Ihre Navigations-DOM-Elemente –></nav>

2. Jumbotron: verhält sich wie ein Ansichtsfenster; kann den Vollbildmodus annehmen, um sich auf einen wichtigen Inhalt zu konzentrieren

Syntax: <div class = „jumbotron“><! – Schreiben Sie hier Ihren Inhalt in DOM-Elemente –></div>

3. Fortschrittsbalken: Zeigt Feedback an, das den Fortschritt einer Aktion hervorhebt

Syntax: <div class=“Fortschrittsbalken“ role=“Fortschrittsbalken“ aria-valuenow=“60″ aria-valuemin=“0″ aria-valuemax=“100″ style=“width: 60%;“>

Frage 15: Was sind die zwei Arten von Layouts in Bootstrap?

1. Fließendes Layout
2. Festes Layout

Frage 16: Was ist Fluid Layout?

Fluid Layout ist eine nützliche Funktion, wenn die gesamte Breite des Bildschirms im Design verwendet werden muss. Wenn Sie diese Option wählen, passt sich das Layout an die Browsergröße an.

Frage 17: Was ist das feste Layout?

Ein festes Layout unterscheidet sich vom fließenden Layout dadurch, dass es sich nicht an die Größe des Browsers anpasst. Es ist jedoch immer noch schnell und reaktionsschnell bei 940px.

Frage 18: Was ist das Modal-Plugin in Bootstrap?

Ein geerbtes Fenster, das als Schicht über dem übergeordneten Fenster platziert wird, wird als modales Fenster bezeichnet. Dieses Fenster wertet die Benutzererfahrung auf, indem es funktionsfähig gemacht wird. Das zum Erstellen von Modalfenstern verwendete Plug-in wird Modal-Plug-in genannt.

Frage 19: Was sind die Bootstrap Collapsing Elements?

Sie können jedes Bootstrap-Element ohne JavaScript-Code reduzieren. Dies kann durch Hinzufügen von data-toggle= „collapse“ zum Controller-Element erfolgen. Das Datenziel ist ebenfalls enthalten, um ihm die Kontrolle zu geben, das Element zu reduzieren.

Um diese Bootstrap-Funktion zu verwenden, verwenden Sie .collapse(options).

Frage 20: Bootstrap gut definieren?

Bootstrap Well ähnelt dem Bootstrap-Container und trägt dazu bei, dass der Inhalt auf der Seite unterdrückter und sauberer aussieht. Es kann auch verwendet werden, um den Inhalt zu umschließen, indem die Klasse .well hinzugefügt wird.

Frage 21: Was ist das Karussell-Plugin in Bootstrap.

Mit dem Karussell-Plugin können Sie Schieberegler auf Ihren Webseiten erstellen. Mit Schiebereglern können große Inhaltsblöcke auf einer kleinen Fläche auf der Seite versenkt werden.

Ein paar Karussell-Plugins, die Sie verwenden können, sind:

.Karussell (Optionen)

.Karussell('Pause')

.Karussell(Zyklus')

.karussell('prev')

.karussell('weiter')

Frage 22: Erklären Sie die Ausgabe des folgenden Codes.

<div class="fortschritt">

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

<span class="sr-only">75 % erfolgreich abgeschlossen</span>

</div>

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

<span class="sr-only">30 % mit Warnungen abgeschlossen</span>

</div>

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

<span class="sr-only">15 % haben nicht abgeschlossen</span>

</div>

</div>

Antwort: Die Ausgabe des obigen Codes würde ein Ergebnis in voller Breite und vollständig ausgefüllt auf dem Fortschrittsbalken anzeigen. Dies liegt daran, dass Bootstrap mehrere Balken zu einem einzigen Balken stapelt, wenn er im selben übergeordneten Fortschrittselement platziert wird. Außerdem beträgt die Gesamtsumme des Fortschrittsbalkens 100 %.

Frage 23: Geben Sie die Codes an, die für die Codeanzeige in Bootstrap verwendet werden?

Antwort: Es werden zwei Codes für die Codeanzeige verwendet. Sie sind:

1. <code>-Tag
2. <pre>-Tag

Frage 24: Erklären Sie Normalize in Bootstrap.

Bootstrap Normalize ist eine Funktion von Bootstrap, mit der eine kleine CSS-Datei verwendet wird, um die browserübergreifende Konsistenz zu erhöhen.

Frage 25: Was ist die Methode zum Anpassen von Paginierungslinks in Bootstrap?

Verwenden Sie .disabled für Links, die nicht anklickbar sind, und verwenden Sie .active, um auf die aktuelle Seite zu verweisen.

Checkout: Bootstrap vs. Material-UI

Lernen Sie Softwarekurse online von den besten Universitäten der Welt. Verdienen Sie Executive PG-Programme, Advanced Certificate-Programme oder Master-Programme, um Ihre Karriere zu beschleunigen.

Fazit

Wir hoffen, dass diese Fragen und Antworten Ihnen geholfen haben, Ihr Wissen über Bootstrap aufzufrischen. Viel Glück mit diesem Interview!

Wenn Sie mehr über Full-Stack-Softwareentwicklung erfahren möchten, schauen Sie sich das Executive PG-Programm in Full-Stack-Softwareentwicklung von upGrad & IIIT-B an, das für Berufstätige konzipiert ist und mehr als 500 Stunden strenge Schulungen, mehr als 9 Projekte und mehr bietet Aufgaben, IIIT-B-Alumni-Status, praktische praktische Schlusssteinprojekte und Arbeitsunterstützung bei Top-Unternehmen.