Angular Kurs - Bootstrap Darstellung

[CasD]

Hallo,

ich befinde mich momentan in dem Angular Kurs bei den Videos 19-24 und dabei habe ich nun soweit in der index.html Datei den Link zu der CSS-Datei von Bootstrap angegeben. Wenn ich nun aber von Bootstrap beispielweise den Dropdown-Button in mein Projekt einfüge, sieht die Darstellung im Browser nicht so aus wie auf der Internet-Seite von Bootstrap und auch nicht wie in dem Tutorial-Video.
Generell sieht es aber schon anders aus, als wenn man die CSS-Datei nicht angegeben hätte, aber es sieht trotzdem nicht ganz richtig aus. Ich hoffe, dass mir jemand weiterhelfen kann.

Vielen Dank im voraus
CasD

 

[Myhar]

Ohne konkreten Code kann man dir nicht weiterhelfen. So kann man nur die Standardfragen stellen: Was sagt der Netzwerktab in den Browser-Tools, wird die Datei korrekt geladen? Ist es vielleicht ein http/https Problem? Werden die Werte durch eigenes CSS überschrieben?

 

[buerzel]

Bootstrap wird ja auch ständig weiterentwickelt:
und seit Aufzeichnung des Tutorials dürften ebenso ein paar Tage ins Land gezogen sein. Könnte ja sein, dass es einfach daran liegt ...

 

[owieortho]

Mit den Webentwicklertools von Firefox einfach erst einmal nachschauen, was das Aussehen beinflusst (Vererbung etc.). Geht zügig und nimmt einem eine Menge Detektivarbeit ab.

O.

 

[CasD]

Okay, ich kenne mich noch nicht sehr gut mit Webentwicklung aus. Habe nur ein wenig Kenntnisse in JavaScript und HTML. Ich versuche einfach mal zu erklären, wie ich vorgegangen bin.
Zunächst einmal habe ich über die node.js Console ein neues Angular Projekt erstellt. (mit ng new MeinProjekt) Dann habe ich in der index.html Datei den Link zu der CSS-Datei von Bootstrap angegeben. In der app.component.html habe ich erstmal alles gelöscht und dann habe ich einfach einen Listgroup mit genau dem Code von Bootstrap genommen (siehe Anhang) und der app.component.html hinzugefügt. Dann habe ich einmal alles gespeichert und mir dann im Browser angeschaut und die Listgroup ist einfach ein Strich über den Bildschirm, die die Dinge abtrennt. (siehe 2. Bild)




Die linke Linie konnte ich zuvor gar nicht sehen. Die habe ich gerade beim Erstellen des Screentshots gesehen. Kann es vielleicht einfach sein, dass die Dinge so an den Kanten des Browsers anliegen und es deshalb anders aussieht? Kann ich das irgendwie ändern?

Vielen Dank

 

[Myhar]

Auch wenn hier etwas Code zu sehen ist muss ich mich wiederholen: Ohne konkreten Code kann man dir nicht weiterhelfen. Damit du weißt, was damit gemeint ist: Wenn wir den Code kopieren und selber in einer Datei einfügen muss das Problem für uns ersichtlich sein. Alternativ ist auch ein Link wo man das Problem online sehen kann ausreichend.
So kann man deine Frage nur so beantworten: Ja, es kann vielleicht einfach sein. Und ja, das kannst du irgendwie ändern.
Wenn du genaueres wissen willst, brauchen wir genaueren Code.
Bilder sind zwar hübsch, aber du musst schon den Code liefern, der bei dir im Browser dann ankommt. Verwende, wie andere schon angemerkt haben, auch die dev-tools vom Browser um sicherzustellen, dass auch alles korrekt geladen und aufgebaut wird.