Latest web development tutorials

Bootstrap obiektów multimedialnych

W tym rozdziale omówimy Bootstrap obiekty multimedialne (Media Object). To obiekt abstrakcyjny styl wykorzystywane do tworzenia różnego rodzaju komponentów (na przykład komentarze na blogach), możemy użyć foto-tekstu w komponencie, obraz może być wyrównane do lewej lub prawej uzasadnione. Obiekty multimedialne mogą być osiągnięte przy mniejszym kodu i media obiekty tekstowe przepychać.

Lekkie obiekt multimedialny oznaczony cechą jest łatwo rozszerzyć za pomocą prostej aplikacji klasy tag osiągnąć. Można dodać następujące dwie formy tagów HTML, aby ustawić obiekt multimedialny:

  • .media: Ta klasa pozwala multimediów w multimedialne (zdjęcia, video, audio) płynął do lewej lub prawej bloku zawartości.
  • .media-list: Jeżeli zajdzie potrzeba wykaz poszczególnych elementów jest częścią listy nieuporządkowanej, można użyć klasy.Komentarze mogą być wykorzystane do listy, a lista artykułów.

Rzućmy okiem na następujące informacje o mediach domyślnych obiektów .media instancji:

Przykłady

<div class = "media"> <a class = "pull-lewo" href = "#"> <img class = "media-obiekt" src = "/wp-content/uploads/2014/06/64.jpg" alt = "obiekt media"> </ A> <div class = "media-ciało"> <H4 class = "media-nagłówek"> title mediów </ h4> To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. </ Div> </ Div> <div class = "media"> <a class = "pull-lewo" href = "#"> <img class = "media-obiekt" src = "/wp-content/uploads/2014/06/64.jpg" alt = "obiekt media"> </ A> <div class = "media-ciało"> <H4 class = "media-nagłówek"> title mediów </ h4> To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. <div class = "media"> <a class = "pull-lewo" href = "#"> <img class = "media-obiekt" src = "/wp-content/uploads/2014/06/64.jpg" alt = "obiekt media"> </ A> <div class = "media-ciało"> <H4 class = "media-nagłówek"> title mediów </ h4> To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. </ Div> </ Div> </ Div> </ Div>

Spróbuj »

Wyniki przedstawiają się następująco:

Obiekty multimedialne domyślne

Spójrzmy na następujące przykładowe listy mediów obiektów .media-List:

Przykłady

<ul class = "Media-list"> <Li class = "media"> <a class = "pull-lewo" href = "#"> <img class = "media-obiekt" src = "/wp-content/uploads/2014/06/64.jpg" alt = "generic zastępczy obrazu"> </ A> <div class = "media-ciało"> <H4 class = "media-nagłówek"> title mediów </ h4> <P> To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. </ P> <! - Zagnieżdżone obiekty multimedialne -> <div class = "media"> <a class = "pull-lewo" href = "#"> <img class = "media-obiekt" src = "/wp-content/uploads/2014/06/64.jpg" alt = "generic zastępczy obrazu"> </ A> <div class = "media-ciało"> <H4 class = "media-rubryka"> pozycji zagnieżdżone mediów </ h4> To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. <! - Zagnieżdżone obiekty multimedialne -> <div class = "media"> <a class = "pull-lewo" href = "#"> <img class = "media-obiekt" src = "/wp-content/uploads/2014/06/64.jpg" alt = "generic zastępczy obrazu"> </ A> <div class = "media-ciało"> <H4 class = "media-rubryka"> pozycji zagnieżdżone mediów </ h4> To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. </ Div> </ Div> </ Div> </ Div> <! - Zagnieżdżone obiekty multimedialne -> <div class = "media"> <a class = "pull-lewo" href = "#"> <img class = "media-obiekt" src = "/wp-content/uploads/2014/06/64.jpg" alt = "generic zastępczy obrazu"> </ A> <div class = "media-ciało"> <H4 class = "media-rubryka"> pozycji zagnieżdżone mediów </ h4> To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. </ Div> </ Div> </ Div> </ Li> <Li class = "media"> <a class = "pull-prawo" href = "#"> <img class = "media-obiekt" src = "/wp-content/uploads/2014/06/64.jpg" alt = "generic zastępczy obrazu"> </ A> <div class = "media-ciało"> <H4 class = "media-nagłówek"> title mediów </ h4> To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. To jest tekst przykładowy. </ Div> </ Li> </ Ul>

Spróbuj »

Wyniki przedstawiają się następująco:

Lista obiektów multimedialnych