Statistiken

Benutzer
2
Beiträge
18
Anzahl Beitragshäufigkeit
37548

Wer ist online

Aktuell sind 17 Gäste und keine Mitglieder online

Eigene Inhalte Logo

Eigene Inhalte Info

Diese Web-Präsentation ist zu Testzwecken mit Joomla! 3.x, Bootstrap 2 und eigenem JavaScript installiert. Sie soll aufzeigen was mit Joomla! 3.x und Bootstrap 2 möglich ist, evtl. Fehler aufzeigen, und helfen dafür Lösungen zu finden. Es ist eine reine Demoseite und dient ausschließlich zur Veranschaulichung.

Thumbnails Beispiel

  • Battle

    Obi-Wan Kenobi (Ewan McGregor) confronts Anakin Skywalker (Hayden Christenson) on the planet Mustafar.

  • Padme Amidala

    Senator of Naboo, Amidala (Natalie Portman), secretly married to Anakin Skywalker.

  • Darth Vader

    Going to the dark side of the force, Vader finds his beginnings (James Earl Jones).

 


Aufbau im Beitrag mit Bootstrap für thumbnails

Für den Aufbau in einem Beitrag ist es sehr hilfreich sich einen html-Editor wie zB. Notepad++ zur Hilfe zu ziehen, um dort den Quellcode zu schreiben. Dieser wird dann später in den Beitrag über copy-Funktion, bei ausgeschaltetem WYSIWYG (What You See Is What You Get), über den Button "Editor an/aus" eingefügt. Natürlich kann man es auch direkt im Beitrags-Editor schreiben, doch hat man dort nicht immer die gewünschte Übersicht über den Quell-Code wie ich finde.

HTML

 <div class="row-fluid">
    <ul class="thumbnails">
        <li class="span4">
            <div class="thumbnail"><img class="img-polaroid" src="http://deineURL.jpg" alt="" />
                <h3>Thumbnail 1</h3>
                <p>Inhalt vom Thumbnail</p>
            </div>
        </li>
        <li class="span4">
            <div class="thumbnail"><img class="img-polaroid" src="http://deineURL.jpg" alt="" />
                <h3>Thumbnail 2</h3>
                <p>Inhalt vom Thumbnail</p>
            </div>
        </li>
        <li class="span4">
            <div class="thumbnail"><img class="img-polaroid" src="http://deineURL.jpg" alt="" />
                <h3>Thumbnail 3</h3>
                <p>Inhalt vom Thumbnail</p>
            </div>
        </li>
    </ul>
</div>

CSS

Ich persönlich finde diesen css Eintrag wichtig, da bei meinem Test sonst im responsiven Design das Bild schnell mal über den Rand des Thumnail border rutscht.

 .thumbnail > img {
    margin-top: 2.5%;
    max-width: 90%;
}

Javascript

 Wird vom Framework Bootstrap gesteuert.

Kommentar schreiben

Bitte habt dafür Verständnis, dass erst nach Sichtung der Einträge eure Einträge freigestellt werden, und auch erst dann sichtbar für alle sind.


Sicherheitscode
Aktualisieren