Bootstrap 3 - Grid Optimierung

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

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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. Anzeige
  3. #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.
     
  4. #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 :)
     
  5. #4 11. Februar 2014
    AW: Bootstrap 3 - Grid Optimierung

    falls du zu bootstrap fragen hast, immer her damit! :D
    ich setzte fast kein projekt mehr ohne um... es nimmt einfach so enorm viel arbeit ab :)
     
  6. #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>
     

  7. Videos zum Thema
Die Seite wird geladen...
Similar Threads - Bootstrap Grid Optimierung
  1. Antworten:
    2
    Aufrufe:
    506
  2. Bootstrap 3 Grid Positionierung

    DeltaFox , 14. Februar 2014 , im Forum: Webdesign
    Antworten:
    3
    Aufrufe:
    1.431
  3. bootstrap less @import problem

    onip , 29. Januar 2014 , im Forum: Webdesign
    Antworten:
    2
    Aufrufe:
    866
  4. Bootstrap CC BY 3.0

    Blackb!rd , 9. November 2012 , im Forum: Webentwicklung
    Antworten:
    3
    Aufrufe:
    826
  5. Antworten:
    8
    Aufrufe:
    714