Source

Αντικείμενο πολυμέσων

Τεκμηρίωση και παραδείγματα για το αντικείμενο πολυμέσων του Bootstrap να δημιουργεί εξαιρετικά επαναλαμβανόμενα στοιχεία όπως σχόλια ιστολογίου, tweets και παρόμοια.

Παράδειγμα

Το αντικείμενο πολυμέσων βοηθά στη δημιουργία πολύπλοκων και επαναλαμβανόμενων στοιχείων όπου ορισμένα μέσα είναι τοποθετημένα δίπλα σε περιεχόμενο που δεν τυλίγεται γύρω από το εν λόγω μέσο. Επιπλέον, το κάνει αυτό με μόνο δύο απαιτούμενες κλάσεις χάρη στο flexbox.

Παρακάτω είναι ένα παράδειγμα ενός μεμονωμένου αντικειμένου πολυμέσων. Απαιτούνται μόνο δύο κατηγορίες—το περιτύλιγμα .mediaκαι το .media-bodyπεριεχόμενό σας. Η προαιρετική επένδυση και το περιθώριο μπορούν να ελεγχθούν μέσω των βοηθητικών προγραμμάτων Spacing .

Placeholder 64x64
Επικεφαλίδα μέσων ενημέρωσης
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Flexbug #12: Τα ενσωματωμένα στοιχεία δεν αντιμετωπίζονται ως ευέλικτα στοιχεία

Ο Internet Explorer 10-11 δεν αποδίδει ενσωματωμένα στοιχεία όπως συνδέσμους ή εικόνες (ή ::beforeκαι ::afterψευδοστοιχεία) ως ευέλικτα στοιχεία. Η μόνη λύση είναι να ορίσετε μια μη ενσωματωμένη displayτιμή (π.χ., block, inline-blockή flex). Προτείνουμε να χρησιμοποιήσετε .d-flexένα από τα βοηθητικά προγράμματα προβολής μας ως εύκολη λύση.

Πηγή: Flexbugs στο GitHub

Φωλιάζοντας

Τα αντικείμενα πολυμέσων μπορούν να είναι άπειρα ένθετα, αν και σας προτείνουμε να σταματήσετε κάποια στιγμή. Τοποθέτηση ένθετο .mediaμέσα στο .media-bodyγονικό αντικείμενο πολυμέσων.

Placeholder 64x64
Επικεφαλίδα μέσων ενημέρωσης
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.
Placeholder 64x64
Επικεφαλίδα μέσων ενημέρωσης
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

Ευθυγραμμία

Τα μέσα σε ένα αντικείμενο πολυμέσων μπορούν να ευθυγραμμιστούν με βοηθητικά προγράμματα flexbox στην κορυφή (προεπιλογή), στη μέση ή στο τέλος του .media-bodyπεριεχομένου σας.

Placeholder 64x64
Ευθυγραμμισμένα μέσα από την κορυφή

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
Μέσα στοίχισης στο κέντρο

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
Μέσα στοίχισης κάτω

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

Σειρά

Αλλάξτε τη σειρά περιεχομένου σε αντικείμενα πολυμέσων τροποποιώντας το ίδιο το HTML ή προσθέτοντας κάποιο προσαρμοσμένο Flexbox CSS για να ορίσετε την orderιδιότητα (σε έναν ακέραιο αριθμό της επιλογής σας).

Αντικείμενο πολυμέσων
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.
Placeholder 64x64
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

Λίστα πολυμέσων

Επειδή το αντικείμενο πολυμέσων έχει τόσο λίγες δομικές απαιτήσεις, μπορείτε επίσης να χρησιμοποιήσετε αυτές τις κλάσεις σε στοιχεία HTML λίστας. Στο <ul>ή <ol>, προσθέστε το .list-unstyledγια να αφαιρέσετε τυχόν προεπιλεγμένα στυλ λίστας του προγράμματος περιήγησης και, στη συνέχεια, εφαρμόστε .mediaτο στα <li>s. Όπως πάντα, χρησιμοποιήστε τα βοηθητικά προγράμματα Spacing όπου χρειάζεται για να συντονιστείτε με ακρίβεια.

  • Placeholder 64x64
    Αντικείμενο πολυμέσων που βασίζεται σε λίστα
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.
  • Placeholder 64x64
    Αντικείμενο πολυμέσων που βασίζεται σε λίστα
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.
  • Placeholder 64x64
    Αντικείμενο πολυμέσων που βασίζεται σε λίστα
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis στο faucibus.
<ul class="list-unstyled">
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>