Bootstrap 3 - Grid Optimierung

Dieses Thema im Forum "Webdesign" wurde erstellt von elf4, 9. Februar 2014 .

  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>
    
     
  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.
     
  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
     
  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
     
  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&amp;text=SLIDE2"></a>
     </div> 
     <div class="col-xs-4">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE2"></a>
     </div>
     <div class="col-xs-4">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;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&amp;text=SLIDE1"></a>
     </div> 
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE1"></a>
     </div>
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE1"></a>
     </div>
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE1"></a>
     </div> 
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE1"></a>
     </div>
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;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&amp;text=SLIDE2"></a>
     </div> 
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE2"></a>
     </div>
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE2"></a>
     </div>
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE2"></a>
     </div> 
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;text=SLIDE2"></a>
     </div>
     <div class="col-xs-2">
     <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x100&amp;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>
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.