Vollständige Version anzeigen : Bootstrap 3 - Grid Optimierung


elf4
09.02.2014, 15:56

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 (;bootply~com/elf4/112106)


<section>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-8">
<img src=";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=";placehold~it/411x261" class="img-responsive pa-bottom" alt="Responsive image">
<img src=";placehold~it/411x261" class="img-responsive" alt="Responsive image">
</div>
<div class="col-xs-6 col-sm-6 visible-sm visible-xs">
<img src=";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=";placehold~it/411x261" class="img-responsive" alt="Responsive image">
</div>
</div>
</div>
</section>

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
UltimateHulk
10.02.2014, 13:08

<div class="container">
<div class="row">
<div class="col-md-8">
<img src=";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=";placehold~it/411x261" class="img-responsive pa-bottom" alt="Responsive image">
</div>
<div class="col-xs-6 col-md-12">
<img src=";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.


elf4
10.02.2014, 17:28

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 :)


UltimateHulk
11.02.2014, 08:05

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 :-)


elf4
11.02.2014, 15:25

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 (;;;bootply~com/112447)

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


Ähnliche Themen zu Bootstrap 3 - Grid Optimierung
  • [PHP] yii, bootgridview bootstrap, php
    Heyho, EDIT: eigentliches Problem: Ich hab ein bootgridview von bootstrap sieht wie folgt aus und soll ein ranking darstellen: $this->widget('bootstrap;widgets;BootGridView', array( 'type'=>'striped bordered condensed', 'template'=>' ', 'dataProvider'=>$totalData, [...]

  • Bootstrap
    Hallo, ich hab da ein ganz schönes Problem vorliegen.;geht zwar nicht um meinen PC.. aber wäre toll wenn mir irgendjemand sagen kann was ich dagegen tun könnte! Also das Problem tritt unter anderem auf wenn ich z;b. ICQ oder MSN installieren möchte... der einzige Messenger der noch läuft ist [...]

  • Bootstrap CC BY 3.0
    Hallo Zusammen, ich stehe mal wieder vor dem Problem mit der Lizensierung eines meiner Projekte! Ich entwickele ein System, welches ich verkaufen möchte. Hierzu überlege ich das Bootstrap (;twitter;github~com/bootstrap/)-Framwork zu verwenden. Dieses steht unter der CC BY 3;0 (;creativecommons~o [...]

  • Bootstrap 3 Grid Positionierung
    Hallo, nachdem ich den Post von elf4 gelesen habe, wollte ich mich auch einmal mit der Bootstrap 3 auseinander setzen und ein kleines Grid für eine Gallerie machen. Nun bin ich aber auf ein paar Probleme gestoßen: Ich habe mit <div class="row"> <div class="col-md-2"> Bild oder Button [...]



raid-rush.ws | Imprint & Contact pr