HTML/CSS Responive Design mit Bootstrap

[Bububoomt]

Wer von euch hat schon mit Bootstrap gearbeitet?

Wie geht ihr da vor? Habt ihr Tipps? Wie sind eure Erfahrungen?

Ich habe bisher nur mich ein wenig eingelesen und will nun schauen das einmal zu nutzen um zu sehen, wie gut es ist.

Weiß nur nicht wie genau ich anfangen soll. Kann man beim erstellen von Designs schon etwas machen um die spätere Umsetzung zu vereinfachen?

 

[Djdjrjf8e]

Nun Bootstrap ist im Prinzip aufgebaut auf einem 12spaltigen-Container (DIV)-Layout, welche beliebig zusammengefasst werden können, um Bereiche auf unterschiedlichen Ausgabegeräten aus- bzw. einzublenden.

Natürlich kann man sich weiterhin für ein festes oder ein Fluid Design entscheiden, ideal ist es wenn man sich schon in der Entwurfsphase an dem 12-spalten Layout orientiert..

Wie etwas umgesetzt wird, dazu gibt es bei Bootstrap zu den einzelnen Elementen Beispiele...

 

[Smssam]

Ich habe mit Bootstrap gearbeitet. Der Einstieg ist relativ leicht, aber je nach Anwendungsgebiet stellt man schnell fest das Bootstrap zu Überladen ist. Was in der Regel ein allgemeines Problem bei den meisten CSS-"Framewokrs" ist. Das meiste was Bootstrap mitliefert habe ich nie bzw. nie im größeren Umfang für eine Seite benutzt. Dann kommt noch hinzu das mit Bootstrap fast alles irgendwie gleich aussieht...

Ich setze daher mittlerweile auf schlanke Grid Systeme wie z. B. auf Dallas - wobei je nach Einsatzgebiet auch ein einfaches Flexbox-Modell ausreicht. Das erleichtert einem die Arbeit beim erstellen von responsive Designs und man hat hier den Vorteil das man nicht so eingeschränkt ist und sich besser individualisieren kann als mit einem CSS-"Framewokrs".

 

[Djdjrjf8e]

Sehe ich ähnlich, wenn ich eine 0815 Seite haben will, bzw diese schenll am Start sein soll, sind CSS-Frameworks eine gute Wahl (wenn man sich bereits mit ihnen auskennt). Es geht trotzallem nicht über eine gut durch- und vorallem überdachte Website, die nur das enthält was man auch wirklich benötigt, an der Stelle wo man es benötigt.

Aber weder ist eine Bootstrap-Library von 200kb auf allen Seiten sinnvoll für nur eine Animation, noch ein individualisieren auf Deuvel komm raus.. um auch das letzte bit zu sparen. (Gut smartphone.Besitzer freuen sich über jedes eingesparte Bit bei 64kBit/s )

Und je besser die grundlegende Struktur und Bereiche durchdacht sind, desto leichter ist Update / Wechsel und Debuggung in der Seite..

 

[Bububoomt]

Ok, ich glaube ich mach es erst mal selber und versuche mich dann eher einmal in less. Habe das mit den Spalten leider nicht ganz verstanden und will eine Seite relativ fix umsetzen, vielleicht beim nächsten mal.

Meine frage ist, wenn ich in Vollbild quasi eine Zeile 50% und 2*25% haben will, damit es bei kleineren Auflösungen quasi zwei Zeilen 100% und 2*50% sind, wie muss ich das angeben?

Das habe ich nicht so verstanden.

 

[Smssam]

Kurz für das Verständnis, damit ich weiß ob ich dich richtig verstehe:

Desktop:
____________________
|
| ## 50% ##
| #25% # 25%#
|____________________
Soll dann in mobil das werden:

Mobil:
___________________
#####100%#####
##50%## ##50%##
___________________

<div class="row">
  <div class="col-xs-12 col-md-6">Lorem Ipsum</div>
  <div class="col-xs-6 col-md-4">Lorem Ipsum</div>
  <div class="col-xs-6 col-md-4">Lorem Ipsum</div>
</div>

 

[apolle]

... Es geht trotzallem nicht über eine gut durch- und vorallem überdachte Website, ...

Braucht man dafür eigentlich einen roof-Server?

 

[Bububoomt]

@Smssam
Ah ok, jetzt hab ich es gerafft

 

[Killerbear]

Kurz für das Verständnis, damit ich weiß ob ich dich richtig verstehe:

Desktop:
____________________
|
| ## 50% ##
| #25% # 25%#
|____________________
Soll dann in mobil das werden:

Mobil:
___________________
#####100%#####
##50%## ##50%##
___________________

<div class="row">
  <div class="col-xs-12 col-md-6">Lorem Ipsum</div>
  <div class="col-xs-6 col-md-4">Lorem Ipsum</div>
  <div class="col-xs-6 col-md-4">Lorem Ipsum</div>
</div>

Das thema ist schon eine weile her aber ich möchte das hier trotzdem korrigieren um Missverständnisse vorzubeugen.

Die oben geschriebene Lösung wird nicht das gewünschte ergebnis liefern.

Der code müsste folgendermaßen aussehen:
___________

<div class="row">
  <div class="col-xs-12 col-lg-6">Lorem Ipsum</div>
  <div class="col-xs-6 col-lg-3">Lorem Ipsum</div>
  <div class="col-xs-6 col-lg-3">Lorem Ipsum</div>
</div>

Eine gutes framework ist auch foundation.
Dort sind die selectoren etwas lesbarer ausgewählt dort würde die Lösung so aussehen
___________

<div class="row">
  <div class="small-12 large-6 columns">Lorem Ipsum</div>
  <div class="small-6 large-3 columns">Lorem Ipsum</div>
  <div class="small-6 large-3 columns">Lorem Ipsum</div>
</div>

Und eine kurze Erklärung zur Verwendung von frameworks:
Wenn man den workflow in drei phasen teilt:
1. Entwurf
2. Prototyp
3. Finalisierung

Dann greifen die frameworks bei schritt 2. In Erscheinung und helfen dabei einen schnellen und funktionsfähigen prototypen zu bauen.
In diesem schritt können auch noch unnötiger code und zu viele scripte verwendet werden, weil man ja noch nicht ganz genau weiß wie das end-resultat aussehen wird

In schritt 3 wird dann die seite in die finale version gestyled, und unnötiger code und scripte entfernt.