#1 9. Februar 2014 Eine Frage an unsere Coder hier. Hab mit Bootstrap 3 eine 8-4 / 12-6 Layout erstellt und würde gern wissen, ob man dies noch besser schreiben kann, denn obwohl es funktioniert sieht es sehr unschön aus. Bootstrap Responsive Grid (8-4) (12-6) example code Code: <section> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-8 col-lg-8"> <img src="http://placehold.it/848x552" class="img-responsive pa-bottom" alt="Responsive image"> </div> <div class="col-md-4 col-lg-4 hidden-sm hidden-xs"> <img src="http://placehold.it/411x261" class="img-responsive pa-bottom" alt="Responsive image"> <img src="http://placehold.it/411x261" class="img-responsive" alt="Responsive image"> </div> <div class="col-xs-6 col-sm-6 visible-sm visible-xs"> <img src="http://placehold.it/411x261" class="img-responsive pa-bottom" alt="Responsive image"> </div> <div class="col-xs-6 col-sm-6 visible-sm visible-xs"> <img src="http://placehold.it/411x261" class="img-responsive" alt="Responsive image"> </div> </div> </div> </section> + Multi-Zitat Zitieren
#2 10. Februar 2014 AW: Bootstrap 3 - Grid Optimierung HTML: <div class="container"> <div class="row"> <div class="col-md-8"> <img src="http://placehold.it/848x552" class="img-responsive pa-bottom" alt="Responsive image"> </div> <div class="col-md-4"> <div class="row"> <div class="col-xs-6 col-md-12"> <img src="http://placehold.it/411x261" class="img-responsive pa-bottom" alt="Responsive image"> </div> <div class="col-xs-6 col-md-12"> <img src="http://placehold.it/411x261" class="img-responsive" alt="Responsive image"> </div> </div> </div> </div> </div> Selbes Ergebnis, weniger Code & Bilder nicht doppelt eingebunden. col-sm-12 brauchst du nicht hinzufügen, diese Eigenschaften erbt das Element automatisch, wenn col-md-8 nichtmehr zutrifft. + Multi-Zitat Zitieren
#3 10. Februar 2014 AW: Bootstrap 3 - Grid Optimierung Vielen Dank ich glaube nun ist der Groschen gefallen im Bezug auf die Thumbnails. Wusste bisher nicht man auch die Spalten wie bei md-4 so schön verschachteln kann. Muss mich da noch genauer rein lesen. Erst einmal viel Dank + Multi-Zitat Zitieren
#4 11. Februar 2014 AW: Bootstrap 3 - Grid Optimierung falls du zu bootstrap fragen hast, immer her damit! ich setzte fast kein projekt mehr ohne um... es nimmt einfach so enorm viel arbeit ab + Multi-Zitat Zitieren
#5 11. Februar 2014 AW: Bootstrap 3 - Grid Optimierung Super darauf komm ich gern gleich zurück. Nächstes Problem (kein Problem aber vermutlich wieder viel zu viel Source). Ich möchte einen Markenslider einbinden der auf sm-lg devices 6 spalten breit ist und auf xs-devices lediglich 3. Mein ersten Ansatz war es nach 3 Spalten mit hidden-xs die letzten auszublenden - diesen hab ich aber wieder verworfen - da ich keine Möglichkeit gefunden habe die 3 ausgeblendeten gleichzeitig in ein neues Item zu verpacken. Nun hab ich einen Markenslider für xs-devices über 3 Spalten erstellt und einen weiteren für alle anderen devices über 6 Spalten. Vielleicht fällt dir ja noch ein kürzer smarter Code ein: Demo: Bootstrap Responsive Grid Carousel example code Code: <div class="row"> <div class="col-sm-12"> <div class="carousel slide media-carousel-xs visible-xs" id="media-xs"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-xs-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100"></a> </div> <div class="col-xs-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100"></a> </div> <div class="col-xs-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100"></a> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-xs-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> <div class="col-xs-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> <div class="col-xs-4"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> </div> </div> </div> <a data-slide="prev" href="#media-xs" class="left carousel-control">‹</a> <a data-slide="next" href="#media-xs" class="right carousel-control">›</a> </div> <div class="carousel slide media-carousel-up hidden-xs" id="media-up"> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE1"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE1"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE1"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE1"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE1"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE1"></a> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> <div class="col-xs-2"> <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&text=SLIDE2"></a> </div> </div> </div> </div> <a data-slide="prev" href="#media-up" class="left carousel-control">‹</a> <a data-slide="next" href="#media-up" class="right carousel-control">›</a> </div> </div> </div> + Multi-Zitat Zitieren