Frage von Nindane, 23

Hello Bootstrap?

Ich habe mich für ein Firmenprojekt in Bootstrap eingelesen, Grundprinzip verstehe ich soweit. Jetzt habe ich auch fast mein Design fertig und jetzt ist es so dass ich diese Reihenfolge bei einer onepage habe:

Bild Text Grafik

Grafik Text Bild

Bild Text Grafik

usw.

und beim mobile soll es dann so aussehen

Bild

Text

Grafik

Bild

Text

Grafik

Bild

Text

Grafik

so im nomalen Leben würde ich das einfach mit float right bei jeder 2. section lösen damit es schön zurückspringt wenn ich den float für mobile löse. Jetzt muss ich das ganze aber in Bootstrap machen da würde man das ja so lösen:

(sehr vereinfacht) row span4 span 12, span4 span12, span4 span12

aber dann springen mir die sachen nicht in die mobile Reihenfolge wie ich das brauche und ich bin mal wieder dezent verwirrt wie man das in Bootstrap elegant löst.

Some ideas?

Antwort
von Minilexikon, 17

Du scheinst Bootstrap 2 zu benutzen. Aktuell ist die dritte Version und die vierte ist im Kommen. Wenn dein Chef nicht ausdrücklich die zweite Version will, würde ich dir vorschlagen, auf die dritte zu wechseln.

Hier sind alle Änderungen auf einem Blick: http://getbootstrap.com/migration/

Hier wäre das aktuelle Gridsystem: http://getbootstrap.com/css/#grid

Also statt span4 schreibst du jetzt beispielsweise col-lg-4 col-md-4 col-sm-12 col-xs-12

Du musst nicht alle verwenden. Lg und sm kannst du wahrscheinlich weglassen, so wäre es aber gründlicher ;)

Der Tabelle auf der Seite Bootstrap kannst du entnehmen, dass col-xs-12 regelt, dass der div-Container mobile die volle Breite einnimmt und mit col-md-4 auf Desktop-PC nur ein Drittel.

Kommentar von Nindane ,

OH ich hab's gar nicht gelesen gehabt bis eben, ich habs dann selbst gesehen. Jemand hat mir Bootstrap gezeigt und da war noch dieses span zeug drin. Sollte man nicht mobile first machen? Irgendwie stehen da jetzt alle total drauf

Kommentar von Minilexikon ,

Kein Problem ;)

Ja, das kann vorkommen. Funktioniert sicher auch, ist aber sicherlich nicht ganz so gut, wie die neuere Version.

Mobile first (oder wie man auch sagt: "Responsive Design") hat nichts mit der Reihenfolge der Klassen (xs, sm, md, lg) zu tun. Du kannst diese Klassen in einer beliebigen Reihenfolge (am besten auf- oder absteigend, damit wenn jemand den Code liest derjenige auch versteht, was er bedeutet ;)). Das ist egal und hat keine Auswirkungen auf das Ergebnis.

Ja, responsive Design ist auch eine sehr wichtige Sache. Schließlich wollen viele, die einen Internetauftritt haben, von möglichst vielen erreicht werden und ein großer Teil der Internetnutzer ist eben mit Smartphones und Tablets unterwegs. Deshalb sollen diese eine ihrem Gerät etwas angepasste Version der Website bekommen, weil ihre Auflösungen meist geringer und das Bildschirmformat anders als bei herkömmlichen Desktop-PCs ist.

Keine passende Antwort gefunden?

Fragen Sie die Community