TEMPLATE: Bootstrap - freies responsive Template

[Karl1]

Tobias und Mike schickt mir mal eine Mail.

[plank]

Hallo,

Noch eine Frage zu diesem Them. Wenn ich das richtig verstehe, wäre das mit dem neuen Bootstrap besser möglich.
Im neuen Grid System kann ich verschiedene Layer mit angeben.

http://getbootstrap.com/css/#grid

Würde das in etwa so funktionieren:

Code: PHP  [Auswählen]

<div class="row">
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
</div>
<div class="row">
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
</div>
 

Kann jemand abschätzen was der Aufwand eines Umbaus auf 3.x bedeuten würde?

Danke sg Florian

[miheha]

Hallo Florian,

hier gibt es schon einen Ansatz.

http://www.modified-shop.org/forum/index.php?topic=27486.0

Gruß
Mike

[001blade]

Von dem Ansatz ist aber leider schon lange nix mehr zu sehen.

Ich bin auch der Meinung das es eher auf die v3 gehen sollte.
Error handling wurde verbessert die einzelnen Devices, und fehler pages usw.

[Hobbybastler]

Hallo,

Noch eine Frage zu diesem Them. Wenn ich das richtig verstehe, wäre das mit dem neuen Bootstrap besser möglich.
Im neuen Grid System kann ich verschiedene Layer mit angeben.

http://getbootstrap.com/css/#grid

Würde das in etwa so funktionieren:

Code: PHP  [Auswählen]

<div class="row">
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
</div>
<div class="row">
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
  <div class=".col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>
</div>
 

Kann jemand abschätzen was der Aufwand eines Umbaus auf 3.x bedeuten würde?

Danke sg Florian

@Florian

Für die Listenansicht, mach das mal so,

Code: PHP  [Auswählen]

<div class="row">
{foreach name=aussen item=module_data from=$module_content}

 <div class="col-xs-12 col-sm-6 col-lg-4">
      ....
       Product
      ...
  </div>

{/foreach}
</div>

 

so hast du nur einen Durchlauf und das Spart Ladezeit, da die Schleife nur einmal durchlauft!

Die Breite wird automatisch von den angegebenen Grids angepasst  col-xs-12 col-sm-6 col-lg-4, je nach Device

und wenn du mehrere Produkte z.b. 3.Spaltig haben willst, mach das so

Code: PHP  [Auswählen]

<div class="row">
{foreach name=aussen item=module_data from=$module_content}
{php}
$col++;
{/php}
                   <div class="col-xs-12 col-sm-6 col-lg-4">
                   <div>
                   ....
                  Product
                   ...
                  </div>
                 </div>{*col-xs-12 col-sm-6 col-lg-4*}

 {php}
 if ($col>=3) {
 $col=0;
echo '';
}
 {/php}

 {/foreach}
{/if}
</div>{*row*}
 

und wenn du auf BS 3 wechseln willst ist das eine menge Zeit an Aufwand, da hier alle Template Dateien umgearbeitet (angepasst) werden müssen!!!

gruß Fritz

[plank]

Hallo Fritz

Vielen Dank erst mal für deine erklärung aber jetzt bin ich etwas verwirrt.
Eine solche Lösung wie du beschreibst:

Code: PHP  [Auswählen]

 ... <div class="col-xs-12 col-sm-6 col-lg-4"> ...

funktioniert nur im Bootstrap 3.x.

In unserem Bootstrap 2.3 gibt es diese classen nicht?

Danke

[Hobbybastler]

Hallo

Das war für Florian, da ich mit Bootstrap 3. entwickle, bei der alten Version Bootstrap 2. war es glaube ich <span  XXXXX >

Ja, es war  z.b.  <div class="span9">  im Template von Karl

Bedenke die Span´s müssen immer in der Breite 12 sein

d.h.
<div class"span12">  = ganze Breite deines Templates

<div class"span3"> <div class"span3"> <div class"span3"> <div class"span3"> = ganze Breite deines Templates
<div class"span3">Box links <div class"span6">Content <div class"span3">Box rechts = ganze Breite deines Templates

<div class"span6">Content links  <div class"span6">Content rechts = ganze Breite deines Templates

Code: PHP  [Auswählen]

    <div class="row">
    <div class="span6">Links...</div>
    <div class="span6">Rechts...</div>
    </div>
 

mehr zum Grid System von Bootstrap V2.

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem


Du kannst hier beliebig inneinander auch Verschachteln z.b.

Code: PHP  [Auswählen]

    <div class="row">
    <div class="span12">
    Content ganze Breite
    <div class="row">
    <div class="span6">Content Links</div>
    <div class="span6">Content Rechts</div>
    </div>
    </div>
    </div>

 

ich hoffe du kannst was damit anfangen

Gruß Fritz

[Rufus]

Hallo,

Ich versuche mich auch gerade an dem Template und habe versucht den Slider von Hetfield mit einzubauen - Leider fehlt in der Anleitung die Angabe das die Ordner images/imagesliders/german und english angelegt werden müssen. Alternativ könnte man sie bestimmt auch in dem Installationspaket mit hinterlegen.
Hat mich einen Haufen Nerven gekostet... Jetzt funktioniert auch der Bildupload.

Gruß
Hugo

[Aragorn45]

Hallo Pfeiffer
Hab gesehen das du unten über dem footer eine Grafik drüber gesetzt hast. Das ist eine gute Lösung denke ich, den wenn man die Farbe ändert, ändert man auch die in den rechten Boxen.
Könntest du mir sagen wie du das gemacht hast?

Grüße Reiner

[Pfeiffer]

In der bootstrap.css

Code: CSS  [Auswählen]

.well-large{
        background:url(../img/footer.jpg) repeat-x;
}
 

[Aragorn45]

Hallo Pfeiffer
Habe ich gemacht passiert aber nichts.

Grüße

[Aragorn45]

In der bootstrap.css

Code: CSS  [Auswählen]

.well-large{
        background:url(../img/footer.jpg) repeat-x;
}
 

Hallo Pfeiffer
Habe ich gemacht es tut sich aber nichts muss noch was anderes getan werden?

Grüße Reiner

[Pfeiffer]

Ähh blöde Frage, die Grafik heisst auch footer.jpg und liegt auch im richtigen Ordner??

[Aragorn45]

Ja habe eine footer.jpg gemacht und auch in diesen Ordner gelegt...vielleicht was an der Grafik

[Aragorn45]

Hallo
Ich habe es jetzt mal unter .well-small anstatt unter .well-large ausprobiert und da geht es nur ist es dann auch rechts in den Boxen.
Egal was ich unter .well-large eingebe auch background farben es passiert nichts. Seltsam