Bootstrap tutorial logo

Element Media

autor: Robert

23 marca 2014

Właściwie to nie wiem jak dokładnie nazwać ten element, więc opiszę do czego można go zastosować

Element "media" można wykorzystać jako szablon komentarzy, listę z miniaturką np. artykułów czy galerii zdjęć, czytnik RSS czy tweetów

Obrazki po lewej

Generic placeholder image

Nagłówek

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Nagłówek

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Zagnieżdzony nagłówek

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Obrazki po prawej

Generic placeholder image

Nagłówek

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Nagłówek

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Zagnieżdzony nagłówek

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Naszym elementem "sklejającym" w całość jest div z klasą .media. Wewnątrz zamieszczamy "kotwicę" czyli element <a href="#"> z klasą .pull-left gdy obrazek ma być po lewej stronie, lub z klasą .pull-right gdy obrazek ma być po prawej. Wewnątrz kotwicy umieszczamy obrazek. Kolejnym elementem wewnątrz jest div z klasą .media-body w którym umieszczamy nagłówek (h1, h2, h3, h4 itp) z klasą .media-heading oraz tekst, który będzie opisem.

Media jako lista

Element media może być stworzony za pomocą elementów listy <li> co umożliwia głębokie zagnieżdzanie kolejnych elementów (np dodawanie kolejnych odpowiedzi na jakiś komentarz).

  • Generic placeholder image

    Nagłówek

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Generic placeholder image

    Zagnieżdzony nagłówek

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Generic placeholder image

    Zagnieżdzony nagłówek

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Generic placeholder image

    Zagnieżdzony nagłówek

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • Generic placeholder image

    Nagłówek

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Tutaj tworzymy listę z klasą .media-list i każdy najwyższy element listy musi mieć klasę .media. Wewnątrz stosujemy już kod identyczny jak w przykładzie wyżej czyli kotwiczka, obrazek, media-body i media-heading. W celu zagnieżdzenia elementów wewnątrz pierwszego elementu listy z klasą .media-body umieszczamy divy z klasą .media i zawartością jak w 1 przykładzie.

Strona z przykładami
Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (2 głosów, średnia: 5,00 na 5)
Loading...

Mister Klikacz 7 grudnia 2014 o 18:01

A czy nie można by było umieścić tego obrazka w zwykłym divie zamiast w kotwicy? Spróbowałem tak zrobić u siebie i wszystko działa tak samo, z tą różnicą, że obrazek nie jest takim „bezsensownym” linkiem. Jeśli akurat nie chcemy, aby obrazek był linkiem, to byłoby to chyba lepsze rozwiązanie, prawda?

Odpowiedz
    Robert 8 grudnia 2014 o 08:59

    Na tym właśnie polega tworzenie stron WWW. Ja pokazuję przykład wykorzystania a Wy robicie z tym coś aby dopasować do swojej strony. Jeśli ktoś nie chce linka do go sobie usuwa, jeśli ktoś chce większą miniaturkę to taką robi. Także w twoim przypadku brak linka jest dobrym rozwiązaniem ale nie wiemy czy dla innych ten link nie jest potrzebny. Łatwiej pokazać jakąś funkcjonalność i z niej później zrezygnować niż jej nie pokazać i inni z niej nie skorzystają.

    Odpowiedz