Bootstrap - 1'000 und 1 Tutorial (und ich stehe auf dem Schlauch)
- Ersteller X_FISH
- Erstellt am
X_FISH
Grand Admiral Special
★ Themenstarter ★
Bootstrap ist toll. Könnte vieles erleichtern. Gibt auch ganz viele Tutorials, aber ich komme nicht weiter. 
An was ich gerade herumbastle: Einfach um mich mal damit zu beschäftigen baue ich ein Layout für einen Blog.
Mein Problem: Ich möchte Werbeflächen mit einplanen - und das klappt nicht da ich nicht mit festen Breiten arbeiten kann (vorgegebene Bannergrößen).
Falls da jemand einen Link parat hat (oder ein Beispiel) ? ich wäre sehr, sehr dankbar und würde dort dann weiterlesen.
Grüße, Martin
An was ich gerade herumbastle: Einfach um mich mal damit zu beschäftigen baue ich ein Layout für einen Blog.
Mein Problem: Ich möchte Werbeflächen mit einplanen - und das klappt nicht da ich nicht mit festen Breiten arbeiten kann (vorgegebene Bannergrößen).
Falls da jemand einen Link parat hat (oder ein Beispiel) ? ich wäre sehr, sehr dankbar und würde dort dann weiterlesen.
Grüße, Martin
Hi,
man kann relativ viel mit Bootstrap machen, auch feste Größen sind da kein Problem.
Du musst dir halt den Grundaufbau gut überlegen und bedenken, dass der ja responsive sein soll.
Wenn Du dir den Grundaufbau definiert hast und zb. auf das Grid-Layout zurück greifst, kannst Du darin ja wieder Bilder oder Boxen mit festen Größen einbauen.
Im Grid Layout sind die Spalten in einer Row ja auch in einer fest definierten Größe und du kannst für Handy (xs), Tablets (sm), mittlere Auflösung wie 1024x768 (md) und großen Monitoren (lg) feste Bereiche definieren.
Ist schwer zu beschreiben wie Du da an die Sache ran gehst, da ich keine Ahnung habe was daraus mal werden soll. Wenn Du Interesse hast, kannst Du mir eine kurze pn schreiben, vlt mit einer Skizze wie Du dir den Seitenaufbau vorstellst und ich kann Dir dann sagen wie ich das mit Bootstrap umsetzen würde und das dann auch erläutern.
Hier mal eine Seite die ich letztes Jahr mit Bootstrap gebaut habe. http://www.kfz-druschke.de/
Grüße Darkwolf
man kann relativ viel mit Bootstrap machen, auch feste Größen sind da kein Problem.
Du musst dir halt den Grundaufbau gut überlegen und bedenken, dass der ja responsive sein soll.
Wenn Du dir den Grundaufbau definiert hast und zb. auf das Grid-Layout zurück greifst, kannst Du darin ja wieder Bilder oder Boxen mit festen Größen einbauen.
Im Grid Layout sind die Spalten in einer Row ja auch in einer fest definierten Größe und du kannst für Handy (xs), Tablets (sm), mittlere Auflösung wie 1024x768 (md) und großen Monitoren (lg) feste Bereiche definieren.
Ist schwer zu beschreiben wie Du da an die Sache ran gehst, da ich keine Ahnung habe was daraus mal werden soll. Wenn Du Interesse hast, kannst Du mir eine kurze pn schreiben, vlt mit einer Skizze wie Du dir den Seitenaufbau vorstellst und ich kann Dir dann sagen wie ich das mit Bootstrap umsetzen würde und das dann auch erläutern.
Hier mal eine Seite die ich letztes Jahr mit Bootstrap gebaut habe. http://www.kfz-druschke.de/
Grüße Darkwolf
X_FISH
Grand Admiral Special
★ Themenstarter ★
Danke für das Angebot. Ich habe nächste Woche Urlaub, dann widme ich mich der Website ausgiebig und ungestört.
Setze dann einen Link rein wie weit ich gerade bin und beschreibe wo es klemmt.
Merci vorab,
Martin
Setze dann einen Link rein wie weit ich gerade bin und beschreibe wo es klemmt.
Merci vorab,
Martin
X_FISH
Grand Admiral Special
★ Themenstarter ★
So, habe noch ein wenig gewerkelt und die Vorschau ist hier erreichbar:
http://astra103kw.de/17/07/25/kofferraumwanne_für_den_astra_j.htm
Inhalte fehlen natürlich noch, aber es geht mir primär um die Werbeflächen rechts. Diese stehen nun artig untereinander (größte Breite und Smartphones), elegant wäre es natürlich wenn ich sie bei der mittleren Breite nebeneinander platzieren könnte (bzw. dies automatisch geschieht).
Grüße, Martin
http://astra103kw.de/17/07/25/kofferraumwanne_für_den_astra_j.htm
Inhalte fehlen natürlich noch, aber es geht mir primär um die Werbeflächen rechts. Diese stehen nun artig untereinander (größte Breite und Smartphones), elegant wäre es natürlich wenn ich sie bei der mittleren Breite nebeneinander platzieren könnte (bzw. dies automatisch geschieht).
Code:
<div class="mx-auto" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div</div>Grüße, Martin
Hi,
naja sieht doch schon mal gut aus.
Was ich versuchen würde wären die Werbe Anzeigen dementsprechend in eine row zu packen. Das ist das schöne an einer row. Du kannst innerhalb einer col eine weitere row erzeugen mit verschachtelten cols quasi.
Also aus
Würde ich in der Art sowas machen:
So hast du das nochmal extra verschachtelt. Und im Falle des Smartphones würde es trotzdem untereinander angezeigt werden.
Kann sein, dass Du daran noch etwas "rumfriemeln" musst, die cols haben ja autom. 15px margin, Du könntest da jetzt noch eine extra css klasse zupacken und das mit margin: 0px!important; wieder relativieren.
Aber ich denke so in der Richtung sollte das gehen.
Grüße Darkwolf
naja sieht doch schon mal gut aus.
Was ich versuchen würde wären die Werbe Anzeigen dementsprechend in eine row zu packen. Das ist das schöne an einer row. Du kannst innerhalb einer col eine weitere row erzeugen mit verschachtelten cols quasi.
Also aus
Code:
<div class="mx-auto text-center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- astra103kw 300 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-4201885467884275"
data-ad-slot="5984662301"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="mx-auto text-center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- astra103kw -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-4201885467884275"
data-ad-slot="6643137850"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>Würde ich in der Art sowas machen:
Code:
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="mx-auto text-center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- astra103kw 300 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-4201885467884275"
data-ad-slot="5984662301"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="mx-auto text-center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- astra103kw -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-4201885467884275"
data-ad-slot="6643137850"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>So hast du das nochmal extra verschachtelt. Und im Falle des Smartphones würde es trotzdem untereinander angezeigt werden.
Kann sein, dass Du daran noch etwas "rumfriemeln" musst, die cols haben ja autom. 15px margin, Du könntest da jetzt noch eine extra css klasse zupacken und das mit margin: 0px!important; wieder relativieren.
Aber ich denke so in der Richtung sollte das gehen.
Grüße Darkwolf
X_FISH
Grand Admiral Special
★ Themenstarter ★
Leider ist nicht der gewünschte Effekt eingetreten.
Small -> Anzeige korrekt.
Medium -> Anzeige korrekt (zwei nebeneinander, eins linksbündig darunter)
Large -> Überlappende div (die ersten beiden wobei das zweite das erste 50% überlappt)
Habe die div auch mit einem <img src> mit Breite von 300 px versehen -> gleiches Verhalten.
Das Update habe ich noch nicht hochgeladen, bastle noch herum. Stehe jedoch (wieder) auf dem Schlauch woran es nun klemmen könnte. Ist heute aber auch schon wieder reichlich spät...
Grüße, Martin
Small -> Anzeige korrekt.
Medium -> Anzeige korrekt (zwei nebeneinander, eins linksbündig darunter)
Large -> Überlappende div (die ersten beiden wobei das zweite das erste 50% überlappt)
Code:
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 1</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 2</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 3</div>
</div>
</div>Habe die div auch mit einem <img src> mit Breite von 300 px versehen -> gleiches Verhalten.
Das Update habe ich noch nicht hochgeladen, bastle noch herum. Stehe jedoch (wieder) auf dem Schlauch woran es nun klemmen könnte. Ist heute aber auch schon wieder reichlich spät...
Grüße, Martin
Zuletzt bearbeitet:
Hmm, mir fällt gerade auf, dass du für lg (large) gar keine Klassen angegeben hast.
Vielleicht hilft das ja:
Schau dir die Tabelle mal an: https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
Vielleicht hilft das ja:
Code:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 1</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 2</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="mx-auto text-center" style="width:300px;height:250px;border:1px solid black;margin-bottom:10px;">zentriertes div 3</div>
</div>
</div>Schau dir die Tabelle mal an: https://v4-alpha.getbootstrap.com/layout/grid/#grid-options
Zuletzt bearbeitet:
X_FISH
Grand Admiral Special
★ Themenstarter ★
Wie ich's auch versuche -> das Problem bleibt bestehen. Habe auch mit anderen Werten experimentiert (welche für mich Sinn ergeben hätten) -> gleiches Problem.
Ich habe die Vorschau aktualisiert, dort siehst du das Problem der überlappenden <div>.
Grüße, Martin
Ich habe die Vorschau aktualisiert, dort siehst du das Problem der überlappenden <div>.
Grüße, Martin
Hmm,
ich glaube du hast da ganz einfach ein mathematisches Problem. Da deine Sidebar in col-lg-4 definiert ist.
Bei lg ist die Containergröße 960px, col-lg-4 ist quasi ein drittel der 960px (geteilt durch 12 * 4, da die 960px in 12 cols aufgeteilt sind)
Oder anders, in einem col-lg-4 stehen dir 320px zur Verfügung. Da du der Werbebox 300px feste breite gibts, wären zwei nebeneinander 600px
und das passt da leider einfach nicht rein...
Das kann man drehen und wenden wie man will, das wird wohl nicht funktionieren außer du gibst der Werbebox eine variable Breite. (width: 100%)
Wird aber glaube ich ein Problem, da die Google schon feste Größen im iframe vorgibt.
Ich glaube die Lösung ist die Boxen untereinander zu machen oder schauen ob google auch webeboxen anbietet, die schmäler sind. Dann kannst Du für lg eine extra Ausgabe basteln und andere Werbeboxen einbinden.
Dies machst du dann ugf. so:
Mit der Klasse hidden-lg wird diese div, bei der "lg"-Auflösung komplett ausgeblendet, bei allen anderen jedoch dargestellt.
Mit der Klasse visible-lg bewirkst du, dass die div-Box ausschließlich bei der "lg"-Auflösung dargestellt wird.
Dies funktioniert äquivalent mit xs,sm,md und xl genauso gut auch bei (soviel ich weiß) allen anderen HTML-Elementen, also nicht nur mit div-Boxen.
Hoffe das führt etwas in die richtige Richtung und du kommst noch zu einem zufriedenstellendem Ergebnis.
Grüße Darkwolf
ich glaube du hast da ganz einfach ein mathematisches Problem. Da deine Sidebar in col-lg-4 definiert ist.
Bei lg ist die Containergröße 960px, col-lg-4 ist quasi ein drittel der 960px (geteilt durch 12 * 4, da die 960px in 12 cols aufgeteilt sind)
Oder anders, in einem col-lg-4 stehen dir 320px zur Verfügung. Da du der Werbebox 300px feste breite gibts, wären zwei nebeneinander 600px
und das passt da leider einfach nicht rein...
Das kann man drehen und wenden wie man will, das wird wohl nicht funktionieren außer du gibst der Werbebox eine variable Breite. (width: 100%)
Wird aber glaube ich ein Problem, da die Google schon feste Größen im iframe vorgibt.
Ich glaube die Lösung ist die Boxen untereinander zu machen oder schauen ob google auch webeboxen anbietet, die schmäler sind. Dann kannst Du für lg eine extra Ausgabe basteln und andere Werbeboxen einbinden.
Dies machst du dann ugf. so:
Code:
<div class="hidden-lg"
<div class="mx-auto text-center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- astra103kw 300 -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-4201885467884275"
data-ad-slot="5984662301"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="mx-auto text-center">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- astra103kw -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-4201885467884275"
data-ad-slot="6643137850"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="visible-lg">
/* Hier kommen die kleineren Werbeboxen rein die nebeneinander passen */
</div>Mit der Klasse hidden-lg wird diese div, bei der "lg"-Auflösung komplett ausgeblendet, bei allen anderen jedoch dargestellt.
Mit der Klasse visible-lg bewirkst du, dass die div-Box ausschließlich bei der "lg"-Auflösung dargestellt wird.
Dies funktioniert äquivalent mit xs,sm,md und xl genauso gut auch bei (soviel ich weiß) allen anderen HTML-Elementen, also nicht nur mit div-Boxen.
Hoffe das führt etwas in die richtige Richtung und du kommst noch zu einem zufriedenstellendem Ergebnis.
Grüße Darkwolf
X_FISH
Grand Admiral Special
★ Themenstarter ★
Du hast recht, ich muss die Boxen wohl immer untereinander platzieren (ohne »row«). Anders geht es nicht (zumindest nicht mit Bootstrap CSS).
Habe mit dem Layout gespielt und versucht den Umbruch zu erzwingen -> klappt nur dann wenn die rechte Spalte entsprechend breit ist.
Beim Studium von anderen Websites -> die blenden Werbung ein und aus und umgehen so die Problematik. Ob das dem Werbeanbieter jedoch gefällt wenn die Werbung mal sichtbar, mal unsichtbar ist? Nun ja, scheint wohl die einfachste (und sicherste) Lösung für das Problem zu sein.
Da bei mir die Werbung nicht der primäre Bestandteil ist, ich sie dennoch möglichst sinnvoll platzieren wollte -> war's eben ein Versuch.
Danke für's »Mitverkopfen« und die investierte Zeit,
Martin
Habe mit dem Layout gespielt und versucht den Umbruch zu erzwingen -> klappt nur dann wenn die rechte Spalte entsprechend breit ist.
Beim Studium von anderen Websites -> die blenden Werbung ein und aus und umgehen so die Problematik. Ob das dem Werbeanbieter jedoch gefällt wenn die Werbung mal sichtbar, mal unsichtbar ist? Nun ja, scheint wohl die einfachste (und sicherste) Lösung für das Problem zu sein.
Da bei mir die Werbung nicht der primäre Bestandteil ist, ich sie dennoch möglichst sinnvoll platzieren wollte -> war's eben ein Versuch.
Danke für's »Mitverkopfen« und die investierte Zeit,
Martin
Ähnliche Themen
