Συστατικά

Δεκάδες επαναχρησιμοποιήσιμα εξαρτήματα κατασκευασμένα για να παρέχουν πλοήγηση, ειδοποιήσεις, popover και πολλά άλλα.

Παραδείγματα

Δύο βασικές επιλογές, μαζί με δύο πιο συγκεκριμένες παραλλαγές.

Ομάδα με ένα κουμπί

Τυλίξτε μια σειρά από κουμπιά .btnμε .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Αριστερά </button>
  3. <button class = "btn" > Μεσαία </button>
  4. <button class = "btn" > Δεξιά </button>
  5. </div>

Πολλαπλές ομάδες κουμπιών

Συνδυάστε σετ <div class="btn-group">σε ένα <div class="btn-toolbar">για πιο σύνθετα συστατικά.

  1. <div class = "btn-γραμμή εργαλείων" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Ομάδες κάθετων κουμπιών

Κάντε ένα σύνολο κουμπιών να εμφανίζεται κατακόρυφα στοιβαγμένο και όχι οριζόντια.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

Πλαίσιο ελέγχου και γεύσεις ραδιοφώνου

Οι ομάδες κουμπιών μπορούν επίσης να λειτουργούν ως ραδιόφωνα, όπου μόνο ένα κουμπί μπορεί να είναι ενεργό ή πλαίσια ελέγχου, όπου μπορεί να είναι ενεργό οποιοσδήποτε αριθμός κουμπιών. Δείτε τα έγγραφα JavaScript για αυτό.

Αναπτυσσόμενα μενού σε ομάδες κουμπιών

Ψηλά το κεφάλι!Τα κουμπιά με αναπτυσσόμενα μενού πρέπει να τυλίγονται μεμονωμένα .btn-groupμέσα σε ένα .btn-toolbarγια σωστή απόδοση.

Επισκόπηση και παραδείγματα

Χρησιμοποιήστε οποιοδήποτε κουμπί για να ενεργοποιήσετε ένα αναπτυσσόμενο μενού τοποθετώντας το σε ένα .btn-groupκαι παρέχοντας τη σωστή σήμανση μενού.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Δράση
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "αναπτυσσόμενο μενού" >
  7. <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  8. </ul>
  9. </div>

Λειτουργεί με όλα τα μεγέθη κουμπιών

Τα αναπτυσσόμενα κουμπιά λειτουργούν σε οποιοδήποτε μέγεθος: .btn-large, .btn-small, ή .btn-mini.

Απαιτεί JavaScript

Τα αναπτυσσόμενα κουμπιά απαιτούν τη λειτουργία της αναπτυσσόμενης προσθήκης Bootstrap .

Σε ορισμένες περιπτώσεις —όπως για κινητά— τα αναπτυσσόμενα μενού θα επεκταθούν εκτός της θύρας προβολής. Πρέπει να επιλύσετε τη στοίχιση με μη αυτόματο τρόπο ή με προσαρμοσμένη JavaScript.


Αναπτυσσόμενα μενού διαίρεσης κουμπιών

Με βάση τα στυλ της ομάδας κουμπιών και τη σήμανση, μπορούμε εύκολα να δημιουργήσουμε ένα κουμπί διαχωρισμού. Τα κουμπιά διαχωρισμού διαθέτουν μια τυπική ενέργεια στα αριστερά και μια αναπτυσσόμενη εναλλαγή στα δεξιά με συνδέσμους με βάση τα συμφραζόμενα.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Ενέργεια </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "αναπτυσσόμενο μενού" >
  7. <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  8. </ul>
  9. </div>

Μεγέθη

Χρησιμοποιήστε τις επιπλέον κατηγορίες κουμπιών .btn-mini, .btn-smallή .btn-largeγια το μέγεθος.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Ενέργεια </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "αναπτυσσόμενο μενού" >
  7. <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  8. </ul>
  9. </div>

Αναπτυσσόμενα μενού

Τα αναπτυσσόμενα μενού μπορούν επίσης να εναλλάσσονται από κάτω προς τα πάνω προσθέτοντας μια κλάση στον άμεσο γονέα του .dropdown-menu. Θα γυρίσει την κατεύθυνση του .caretκαι θα επανατοποθετήσει το ίδιο το μενού ώστε να μετακινείται από κάτω προς τα πάνω αντί για από πάνω προς τα κάτω.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "αναπτυσσόμενο μενού" >
  7. <!-- σύνδεσμοι αναπτυσσόμενου μενού -->
  8. </ul>
  9. </div>

Τυπική σελιδοποίηση

Απλή σελιδοποίηση εμπνευσμένη από το Rdio, ιδανική για εφαρμογές και αποτελέσματα αναζήτησης. Το μεγάλο μπλοκ είναι δύσκολο να το χάσετε, εύκολα κλιμακώνεται και παρέχει μεγάλες περιοχές κλικ.

  1. <div class = "σελιδοποίηση" >
  2. <ul>
  3. <li><a href = "#" > Προηγ . </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > Επόμενο </a></li>
  10. </ul>
  11. </div>

Επιλογές

Αναπηρία και ενεργές καταστάσεις

Οι σύνδεσμοι είναι προσαρμόσιμοι για διαφορετικές περιστάσεις. Χρησιμοποιήστε .disabledτο για συνδέσμους που δεν μπορούν να κάνουν κλικ και .activeγια να υποδείξετε την τρέχουσα σελίδα.

  1. <div class = "σελιδοποίηση" >
  2. <ul>
  3. <li class = "disabled" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Μπορείτε προαιρετικά να ανταλλάξετε ενεργές ή απενεργοποιημένες άγκυρες για διαστήματα για να καταργήσετε τη λειτουργικότητα των κλικ διατηρώντας παράλληλα τα επιδιωκόμενα στυλ.

  1. <div class = "σελιδοποίηση" >
  2. <ul>
  3. <li class = "disabled" ><span> « </span></li>
  4. <li class = "ενεργός" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Μεγέθη

Θέλετε μεγαλύτερη ή μικρότερη σελιδοποίηση; Προσθέστε .pagination-large, .pagination-small, ή .pagination-miniγια επιπλέον μεγέθη.

  1. <div class = "σελιδοποίηση-μεγάλη" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "σελιδοποίηση" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "σελιδοποίηση-μικρή" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "σελιδοποίηση-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

Ευθυγραμμία

Προσθέστε μία από τις δύο προαιρετικές κλάσεις για να αλλάξετε τη στοίχιση των συνδέσμων σελιδοποίησης: .pagination-centeredκαι .pagination-right.

  1. <div class = "σελιδοποίηση με επίκεντρο τη σελιδοποίηση" >
  2. ...
  3. </div>
  1. <div class = "σελιδοποίηση-δεξιά" >
  2. ...
  3. </div>

Pager

Γρήγοροι προηγούμενοι και επόμενοι σύνδεσμοι για απλές υλοποιήσεις σελιδοποίησης με ελαφριά σήμανση και στυλ. Είναι ιδανικό για απλούς ιστότοπους όπως ιστολόγια ή περιοδικά.

Προεπιλεγμένο παράδειγμα

Από προεπιλογή, οι σύνδεσμοι στο κέντρο τηλεειδοποίησης.

  1. <ul class = "pager" >
  2. <li><a href = "#" > Προηγούμενο </a></li>
  3. <li><a href = "#" > Επόμενο </a></li>
  4. </ul>

Ευθυγραμμισμένοι σύνδεσμοι

Εναλλακτικά, μπορείτε να ευθυγραμμίσετε κάθε σύνδεσμο στις πλευρές:

  1. <ul class = "pager" >
  2. <li class = "προηγούμενο" >
  3. <a href = "#" > Παλαιότερο </a>
  4. </li>
  5. <li class = "επόμενο" >
  6. <a href = "#" > Νεότερο → </a>
  7. </li>
  8. </ul>

Προαιρετική κατάσταση απενεργοποίησης

Οι σύνδεσμοι σελιδοποίησης χρησιμοποιούν επίσης τη γενική .disabledκατηγορία χρησιμότητας από τη σελιδοποίηση.

  1. <ul class = "pager" >
  2. <li class = "προηγούμενο απενεργοποιημένο" >
  3. <a href = "#" > Παλαιότερο </a>
  4. </li>
  5. ...
  6. </ul>

Ετικέτες

Ετικέτες Σήμανση
Προκαθορισμένο <span class="label">Default</span>
Επιτυχία <span class="label label-success">Success</span>
Προειδοποίηση <span class="label label-warning">Warning</span>
Σπουδαίος <span class="label label-important">Important</span>
Πληροφορίες <span class="label label-info">Info</span>
Αντίστροφος <span class="label label-inverse">Inverse</span>

Σήματα

Ονομα Παράδειγμα Σήμανση
Προκαθορισμένο 1 <span class="badge">1</span>
Επιτυχία 2 <span class="badge badge-success">2</span>
Προειδοποίηση 4 <span class="badge badge-warning">4</span>
Σπουδαίος 6 <span class="badge badge-important">6</span>
Πληροφορίες 8 <span class="badge badge-info">8</span>
Αντίστροφος 10 <span class="badge badge-inverse">10</span>

Εύκολα πτυσσόμενο

Για εύκολη εφαρμογή, οι ετικέτες και τα σήματα απλά θα συμπτύσσονται (μέσω του :emptyεπιλογέα του CSS) όταν δεν υπάρχει περιεχόμενο.

Μονάδα ηρώων

Ένα ελαφρύ, ευέλικτο στοιχείο για την προβολή βασικού περιεχομένου στον ιστότοπό σας. Λειτουργεί καλά σε ιστότοπους μάρκετινγκ και μεγάλου περιεχομένου.

Γειά σου Κόσμε!

Αυτή είναι μια απλή μονάδα ήρωα, ένα απλό εξάρτημα σε στυλ jumbotron για να προσελκύει επιπλέον προσοχή στο επιλεγμένο περιεχόμενο ή πληροφορίες.

Μάθε περισσότερα

  1. <div class = "ηρωική μονάδα" >
  2. <h1> Επικεφαλίδα </h1>
  3. <p> Περιγραφή </p>
  4. <p>
  5. <a class = "btn btn-κύριο btn-large" >
  6. Μάθε περισσότερα
  7. </a>
  8. </p>
  9. </div>

Κεφαλίδα σελίδας

Ένα απλό κέλυφος για τον h1κατάλληλο χώρο και τμηματοποίηση ενοτήτων περιεχομένου σε μια σελίδα. Μπορεί να χρησιμοποιήσει το h1προεπιλεγμένο smallστοιχείο , καθώς και τα περισσότερα άλλα στοιχεία (με πρόσθετα στυλ).

  1. <div class = "page-header" >
  2. <h1> Παράδειγμα κεφαλίδας σελίδας <small> Υποκείμενο για την κεφαλίδα </small></h1>
  3. </div>

Προεπιλεγμένες μικρογραφίες

Από προεπιλογή, οι μικρογραφίες του Bootstrap έχουν σχεδιαστεί για να προβάλλουν συνδεδεμένες εικόνες με ελάχιστη απαιτούμενη σήμανση.

Εξαιρετικά προσαρμόσιμο

Με λίγη επιπλέον σήμανση, είναι δυνατό να προσθέσετε οποιοδήποτε είδος περιεχομένου HTML, όπως επικεφαλίδες, παραγράφους ή κουμπιά σε μικρογραφίες.

  • 300x200

    Ετικέτα μικρογραφίας

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Δράση Δράση

  • 300x200

    Ετικέτα μικρογραφίας

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Δράση Δράση

  • 300x200

    Ετικέτα μικρογραφίας

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Δράση Δράση

Γιατί να χρησιμοποιήσετε μικρογραφίες

Οι μικρογραφίες (προηγουμένως .media-gridμέχρι την έκδοση 1.4) είναι ιδανικές για πλέγματα φωτογραφιών ή βίντεο, αποτελέσματα αναζήτησης εικόνων, προϊόντα λιανικής, χαρτοφυλάκια και πολλά άλλα. Μπορεί να είναι σύνδεσμοι ή στατικό περιεχόμενο.

Απλή, ευέλικτη σήμανση

Η σήμανση μικρογραφιών είναι απλή—α ulμε οποιονδήποτε αριθμό liστοιχείων είναι το μόνο που απαιτείται. Είναι επίσης εξαιρετικά ευέλικτο, επιτρέποντας οποιονδήποτε τύπο περιεχομένου με λίγο περισσότερη σήμανση για να τυλίξει το περιεχόμενό σας.

Χρησιμοποιεί μεγέθη στηλών πλέγματος

Τέλος, το στοιχείο μικρογραφιών χρησιμοποιεί υπάρχουσες τάξεις συστήματος πλέγματος—όπως .span2ή — .span3για τον έλεγχο των διαστάσεων των μικρογραφιών.

Σήμανση

Όπως αναφέρθηκε προηγουμένως, η απαιτούμενη σήμανση για τις μικρογραφίες είναι ελαφριά και απλή. Ακολουθεί μια ματιά στην προεπιλεγμένη ρύθμιση για συνδεδεμένες εικόνες :

  1. <ul class = "μικρογραφίες" >
  2. <li class = "span4" >
  3. <a href = "#" class = "μικρογραφία" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Για προσαρμοσμένο περιεχόμενο HTML σε μικρογραφίες, η σήμανση αλλάζει ελαφρώς. Για να επιτρέψουμε περιεχόμενο σε επίπεδο μπλοκ οπουδήποτε, ανταλλάσσουμε το <a>με ένα <div>όπως:

  1. <ul class = "μικρογραφίες" >
  2. <li class = "span4" >
  3. <div class = "μικρογραφία" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Ετικέτα μικρογραφίας </h3>
  6. <p> Λεζάντα μικρογραφίας... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Περισσότερα παραδείγματα

Εξερευνήστε όλες τις επιλογές σας με τις διάφορες κατηγορίες πλέγματος που έχετε στη διάθεσή σας. Μπορείτε επίσης να αναμίξετε και να ταιριάξετε διαφορετικά μεγέθη.

Προεπιλεγμένη ειδοποίηση

Τυλίξτε οποιοδήποτε κείμενο και ένα προαιρετικό κουμπί απόρριψης .alertγια ένα βασικό προειδοποιητικό μήνυμα.

Προειδοποίηση! Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.
  1. <div class = "ειδοποίηση" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Προειδοποίηση! </strong> Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά.
  4. </div>

Κουμπιά απόρριψης

Τα προγράμματα περιήγησης Mobile Safari και Mobile Opera, εκτός από το data-dismiss="alert"χαρακτηριστικό, απαιτούν href="#"την απόρριψη ειδοποιήσεων κατά τη χρήση μιας <a>ετικέτας.

  1. <a href = "#" class = "close" data-dismiss = "ειδοποίηση" > × </a>

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε ένα <button>στοιχείο με το χαρακτηριστικό data, το οποίο έχουμε επιλέξει να κάνουμε για τα έγγραφά μας. Όταν χρησιμοποιείτε <button>το , πρέπει να συμπεριλάβετε type="button"διαφορετικά οι φόρμες σας ενδέχεται να μην υποβληθούν.

  1. <button type = "button" class = "close" data-dismiss = "alert" > × </button>

Παράβλεψη ειδοποιήσεων μέσω JavaScript

Χρησιμοποιήστε την προσθήκη ειδοποιήσεων jQuery για γρήγορη και εύκολη απόρριψη ειδοποιήσεων.


Επιλογές

Για μεγαλύτερα μηνύματα, αυξήστε το padding στο επάνω και στο κάτω μέρος του περιτυλίγματος ειδοποιήσεων προσθέτοντας .alert-block.

Προειδοποίηση!

Ελέγξτε καλύτερα, δεν φαίνεστε πολύ καλά. Nulla vitae elit libero, μια pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <button type = "button" class = "close" data-dismiss = "alert" > × </button>
  3. <h4> Προειδοποίηση! </h4>
  4. Ελέγξτε καλύτερα τον εαυτό σας, δεν είστε...
  5. </div>

Εναλλακτικές λύσεις με βάση τα συμφραζόμενα

Προσθέστε προαιρετικές τάξεις για να αλλάξετε τη σημασία μιας ειδοποίησης.

Λάθος ή κίνδυνος

Ω snap! Αλλάξτε μερικά πράγματα και δοκιμάστε να υποβάλετε ξανά.
  1. <div class = "ειδοποίηση ειδοποίησης-σφάλμα" >
  2. ...
  3. </div>

Επιτυχία

Μπράβο! Διαβάσατε με επιτυχία αυτό το σημαντικό μήνυμα ειδοποίησης.
  1. <div class = "ειδοποίηση ειδοποίησης-επιτυχία" >
  2. ...
  3. </div>

Πληροφορίες

Ψηλά το κεφάλι! Αυτή η ειδοποίηση χρειάζεται την προσοχή σας, αλλά δεν είναι πολύ σημαντική.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Παραδείγματα και σήμανση

Βασικός

Προεπιλεγμένη γραμμή προόδου με κατακόρυφη κλίση.

  1. <div class = "πρόοδος" >
  2. <div class = "bar" style = " πλάτος : 60 %; " </div>
  3. </div>

Ριγέ

Χρησιμοποιεί μια κλίση για να δημιουργήσει ένα ριγέ εφέ. Δεν διατίθεται σε IE7-8.

  1. <div class = "progress progress-striped" >
  2. <div class = "bar" style = " πλάτος : 20 %; " </div>
  3. </div>

Κινούμενα σχέδια

Προσθέστε .activeστο για .progress-stripedνα κάνετε κίνηση των λωρίδων από δεξιά προς τα αριστερά. Δεν είναι διαθέσιμο σε όλες τις εκδόσεις του IE.

  1. <div class = "progress progress-striped active" >
  2. <div class = "bar" style = " πλάτος : 40 %; " </div>
  3. </div>

Στοιβαγμένα

Τοποθετήστε πολλές ράβδους στο ίδιο .progressγια να τις στοιβάξετε.

  1. <div class = "πρόοδος" >
  2. <div class = "bar bar-success" style = " πλάτος : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " πλάτος : 20 %; " </div>
  4. <div class = "bar bar-danger" style = " πλάτος : 10 %; " </div>
  5. </div>

Επιλογές

Πρόσθετα χρώματα

Οι γραμμές προόδου χρησιμοποιούν μερικά από τα ίδια κουμπιά και κλάσεις ειδοποίησης για συνεπή στυλ.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " πλάτος : 20 % " ></div>
  3. </div>
  4. <div class = "πρόοδος-πρόοδος-επιτυχία" >
  5. <div class = "bar" style = " πλάτος : 40 % " ></div>
  6. </div>
  7. <div class = "προειδοποίηση προόδου" >
  8. <div class = "bar" style = " πλάτος : 60 % " ></div>
  9. </div>
  10. <div class = "πρόοδος πρόοδος-κίνδυνος" >
  11. <div class = "bar" style = " πλάτος : 80 % " ></div>
  12. </div>

Ριγέ μπάρες

Παρόμοια με τα συμπαγή χρώματα, έχουμε ποικίλες ριγέ γραμμές προόδου.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " πλάτος : 20 % " ></div>
  3. </div>
  4. <div class = "πρόοδος πρόοδος-επιτυχία πρόοδος-ριγέ" >
  5. <div class = "bar" style = " πλάτος : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-striped" >
  8. <div class = "bar" style = " πλάτος : 60 % " ></div>
  9. </div>
  10. <div class = "πρόοδος πρόοδος-κίνδυνος πρόοδος-ριγέ" >
  11. <div class = "bar" style = " πλάτος : 80 % " ></div>
  12. </div>

Υποστήριξη προγράμματος περιήγησης

Οι γραμμές προόδου χρησιμοποιούν διαβαθμίσεις, μεταβάσεις και κινούμενα σχέδια CSS3 για να επιτύχουν όλα τα εφέ τους. Αυτές οι δυνατότητες δεν υποστηρίζονται στον IE7-9 ή σε παλαιότερες εκδόσεις του Firefox.

Οι εκδόσεις παλαιότερες από τον Internet Explorer 10 και την Opera 12 δεν υποστηρίζουν κινούμενα σχέδια.

Αφηρημένα στυλ αντικειμένων για τη δημιουργία διαφόρων τύπων στοιχείων (όπως σχόλια ιστολογίου, tweets, κ.λπ.) που διαθέτουν μια εικόνα με αριστερή ή δεξιά στοίχιση μαζί με περιεχόμενο κειμένου.

Προεπιλεγμένο παράδειγμα

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

64x64

Επικεφαλίδα μέσων ενημέρωσης

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 στο faucibus.
64x64

Επικεφαλίδα μέσων ενημέρωσης

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 στο faucibus.
64x64

Επικεφαλίδα μέσων ενημέρωσης

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 στο faucibus.
  1. <div class = "μέσα" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "μέσα-σώμα" >
  6. <h4 class = "media-heading" > Επικεφαλίδα μέσων </h4>
  7. ...
  8.  
  9. <!-- Ένθετο αντικείμενο πολυμέσων -->
  10. <div class = "μέσα" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

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

Με λίγη επιπλέον σήμανση, μπορείτε να χρησιμοποιήσετε μέσα στη λίστα πολυμέσων (χρήσιμο για νήματα σχολίων ή λίστες άρθρων).

  • 64x64

    Επικεφαλίδα μέσων ενημέρωσης

    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.

    64x64

    Ένθετη επικεφαλίδα μέσων

    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.
    64x64

    Ένθετη επικεφαλίδα μέσων

    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.
    64x64

    Ένθετη επικεφαλίδα μέσων

    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.
  • 64x64

    Επικεφαλίδα μέσων ενημέρωσης

    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.
  1. <ul class = "media-list" >
  2. <li class = "μέσα" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "μέσα-σώμα" >
  7. <h4 class = "media-heading" > Επικεφαλίδα μέσων </h4>
  8. ...
  9.  
  10. <!-- Ένθετο αντικείμενο πολυμέσων -->
  11. <div class = "μέσα" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

Πηγάδια

Χρησιμοποιήστε το πηγάδι ως απλό εφέ σε ένα στοιχείο για να του δώσετε ένα ένθετο εφέ.

Κοίτα, είμαι σε ένα πηγάδι!
  1. <div class = "καλά" >
  2. ...
  3. </div>

Προαιρετικά μαθήματα

Ελέγξτε την επένδυση και τις στρογγυλεμένες γωνίες με δύο προαιρετικές κατηγορίες τροποποιητών.

Κοίτα, είμαι σε ένα πηγάδι!
  1. <div class = "καλά καλά-μεγάλο" >
  2. ...
  3. </div>
Κοίτα, είμαι σε ένα πηγάδι!
  1. <div class = "καλά καλά-μικρό" >
  2. ...
  3. </div>

Κλείσιμο εικονίδιο

Χρησιμοποιήστε το γενικό εικονίδιο κλεισίματος για να απορρίψετε περιεχόμενο όπως τρόπους λειτουργίας και ειδοποιήσεις.

  1. <button class = "close" > × </button>

Οι συσκευές iOS απαιτούν href="#"συμβάντα για κλικ, αν προτιμάτε να χρησιμοποιήσετε άγκυρα.

  1. <a class = "close" href = "#" > × </a>

Βοηθητικές τάξεις

Απλά, εστιασμένα μαθήματα για μικρές αλλαγές οθόνης ή συμπεριφοράς.

.τραβά-αριστερά

Επιπλέουν ένα στοιχείο αριστερά

  1. class = "pull-left"
  1. . τραβήξτε - αριστερά {
  2. float : αριστερά ;
  3. }

.τραβήξτε-δεξιά

Επιπλέουν ένα στοιχείο δεξιά

  1. class = "τραβήξτε δεξιά"
  1. . τραβήξτε - δεξιά {
  2. float : δεξιά ;
  3. }

.σίγαση

Αλλάξτε το χρώμα ενός στοιχείου σε#999

  1. class = "σίγαση"
  1. . σίγαση {
  2. χρώμα : #999;
  3. }

.καθαρίζω

Διαγράψτε το floatσε οποιοδήποτε στοιχείο

  1. class = "καθαρή επιδιόρθωση"
  1. . επιδιόρθωση {
  2. * ζουμ : 1 ;
  3. &: πριν ,
  4. &: μετά από {
  5. οθόνη : πίνακας ;
  6. περιεχόμενο : "" ;
  7. }
  8. &: μετά από {
  9. ξεκάθαρο : και τα δύο ;
  10. }
  11. }