Βάση CSS

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

Επικεφαλίδες & αντίγραφο σώματος

Τυπογραφική κλίμακα

Ολόκληρο το τυπογραφικό πλέγμα βασίζεται σε δύο μεταβλητές Less στο αρχείο μας variables.less: @baseFontSizeκαι @baseLineHeight. Το πρώτο είναι το βασικό μέγεθος γραμματοσειράς που χρησιμοποιείται παντού και το δεύτερο είναι το ύψος γραμμής βάσης.

Χρησιμοποιούμε αυτές τις μεταβλητές, και μερικά μαθηματικά, για να δημιουργήσουμε τα περιθώρια, τα paddings και τα ύψη γραμμής όλων των τύπων μας και πολλά άλλα.

Παράδειγμα κειμένου σώματος

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Αντίγραφο κύριου σώματος

Κάντε μια παράγραφο να ξεχωρίζει προσθέτοντας .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Επικεφαλίδα 1

h2. Επικεφαλίδα 2

h3. Επικεφαλίδα 3

h4. Κεφάλαιο 4

h5. Κεφάλαιο 5
h6. Κεφάλαιο 6

Έμφαση, διεύθυνση και συντομογραφία

Στοιχείο Χρήση Προαιρετικός
<strong> Για την έμφαση σε ένα απόσπασμα κειμένου με σημαντικά Κανένας
<em> Για να τονίσετε ένα απόσπασμα κειμένου με άγχος Κανένας
<abbr> Αναδιπλώνει τις συντομογραφίες και τα ακρωνύμια για να εμφανίζει την εκτεταμένη έκδοση στον δείκτη του ποντικιού

Συμπεριλάβετε προαιρετικό titleχαρακτηριστικό για διευρυμένο κείμενο

Χρησιμοποιήστε .initialismτην κλάση για κεφαλαία συντομογραφίες.
<address> Για στοιχεία επικοινωνίας για τον πλησιέστερο πρόγονό του ή ολόκληρο το έργο Διατηρήστε τη μορφοποίηση τερματίζοντας όλες τις γραμμές με<br>

Χρησιμοποιώντας έμφαση

Fusce dapibus , telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, μια pharetra augue.

Σημείωση: Μη διστάσετε να χρησιμοποιήσετε <b>και <i>σε HTML5, αλλά η χρήση τους έχει αλλάξει λίγο. <b>προορίζεται για την επισήμανση λέξεων ή φράσεων χωρίς να αποδίδει πρόσθετη σημασία, ενώ <i>είναι κυρίως για φωνή, τεχνικούς όρους κ.λπ.

Παραδείγματα διευθύνσεων

Ακολουθούν δύο παραδείγματα για το πώς <address>μπορεί να χρησιμοποιηθεί η ετικέτα:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ονοματεπώνυμο
[email protected]

Παραδείγματα συντομογραφιών

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

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

Η HTML είναι το καλύτερο πράγμα από το ψωμί σε φέτες.

Μια συντομογραφία της λέξης χαρακτηριστικό είναι attr .

Μπλοκ εισαγωγικά

Στοιχείο Χρήση Προαιρετικός
<blockquote> Στοιχείο σε επίπεδο μπλοκ για την παράθεση περιεχομένου από άλλη πηγή

Προσθήκη citeχαρακτηριστικού για τη διεύθυνση URL πηγής

Χρήση .pull-leftκαι .pull-rightκλάσεις για αιωρούμενες επιλογές
<small> Προαιρετικό στοιχείο για την προσθήκη μιας αναφοράς που απευθύνεται στον χρήστη, συνήθως ένας συγγραφέας με τίτλο εργασίας Τοποθετήστε το <cite>γύρω από τον τίτλο ή το όνομα της πηγής

Για να συμπεριλάβετε ένα blockquote, τυλίξτε <blockquote>οποιοδήποτε HTML ως απόσπασμα. Για ευθείες εισαγωγικές προτείνουμε ένα <p>.

Συμπεριλάβετε ένα προαιρετικό <small>στοιχείο για να αναφέρετε την πηγή σας και θα λάβετε μια παύλα &mdash;πριν από αυτό για λόγους στυλ.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis. </p>
  3. <small> Κάποιος διάσημος </small>
  4. </blockquote>

Παραδείγματα μπλοκ εισαγωγικών

Τα προεπιλεγμένα μπλοκ εισαγωγικά διαμορφώνονται ως εξής:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis.

Κάποιος διάσημος στο Body of work

Για να μετακινήσετε το μπλοκ σας στα δεξιά, προσθέστε class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis.

Κάποιος διάσημος στο Body of work

Τόπος αγώνων

Χωρίς παραγγελία

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Ακέραιος μολυσματικός lorem at massa
  • Διευκόλυνση σε pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Αστυλ

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Ακέραιος μολυσματικός lorem at massa
  • Διευκόλυνση σε pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Διέταξε

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Ακέραιος μολυσματικός lorem at massa
  4. Διευκόλυνση σε pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Περιγραφή

<dl>

Λίστες περιγραφής
Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Οριζόντια περιγραφή

<dl class="dl-horizontal">

Λίστες περιγραφής
Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, telus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Ψηλά το κεφάλι! Οι λίστες οριζόντιων περιγραφών θα περικόψουν όρους που είναι πολύ μεγάλοι για να χωρέσουν στην επιδιόρθωση αριστερής στήλης text-overflow. Σε στενότερες θύρες προβολής, θα αλλάξουν στην προεπιλεγμένη διάταξη στοίβαξης.

Στη γραμμή

Τυλίξτε ενσωματωμένα αποσπάσματα κώδικα με <code>.

  1. Για παράδειγμα , η ενότητα < code> </ code > πρέπει να είναι τυλιγμένη ως ενσωματωμένη .

Βασικό μπλοκ

Χρήση <pre>για πολλές γραμμές κώδικα. Φροντίστε να ξεφύγετε από τυχόν γωνίες στον κώδικα για σωστή απόδοση.

<p>Δείγμα κειμένου εδώ...</p>
  1. <προ>
  2. <p>Δείγμα κειμένου εδώ...</p>
  3. </pre>

Σημείωση: Βεβαιωθείτε ότι διατηρείτε τον κώδικα εντός των <pre>ετικετών όσο το δυνατόν πιο κοντά στα αριστερά. θα αποδώσει όλες τις καρτέλες.

Μπορείτε προαιρετικά να προσθέσετε την .pre-scrollableκλάση που θα ορίσει μέγιστο ύψος 350 εικονοστοιχεία και θα παρέχει μια γραμμή κύλισης άξονα y.

Google Prettify

Πάρτε το ίδιο <pre>στοιχείο και προσθέστε δύο προαιρετικές κλάσεις για βελτιωμένη απόδοση.

  1. <p> Δείγμα κειμένου εδώ... </p>
  1. <pre class = "prettyprint
  2. λινά» >
  3. <p>Δείγμα κειμένου εδώ...</p>
  4. </pre>

Κατεβάστε το google-code-prettify και δείτε το readme για τον τρόπο χρήσης.

Σήμανση πίνακα

Ετικέτα Περιγραφή
<table> Στοιχείο αναδίπλωσης για την εμφάνιση δεδομένων σε μορφή πίνακα
<thead> Στοιχείο κοντέινερ για σειρές κεφαλίδας πίνακα ( <tr>) για την επισήμανση στηλών πίνακα
<tbody> Στοιχείο κοντέινερ για σειρές πίνακα ( <tr>) στο σώμα του πίνακα
<tr> Στοιχείο κοντέινερ για ένα σύνολο κελιών πίνακα ( <td>ή <th>) που εμφανίζεται σε μία γραμμή
<td> Προεπιλεγμένο κελί πίνακα
<th> Ειδικό κελί πίνακα για ετικέτες στηλών (ή γραμμής, ανάλογα με το εύρος και την τοποθέτηση)
Πρέπει να χρησιμοποιείται σε<thead>
<caption> Περιγραφή ή περίληψη του τι περιέχει ο πίνακας, ιδιαίτερα χρήσιμο για προγράμματα ανάγνωσης οθόνης
  1. <πίνακας>
  2. <κεφάλι>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Επιλογές τραπεζιού

Ονομα Τάξη Περιγραφή
Προκαθορισμένο Κανένας Χωρίς στυλ, μόνο στήλες και σειρές
Βασικός .table Μόνο οριζόντιες γραμμές μεταξύ των σειρών
Με σύνορα .table-bordered Στρογγυλοποιεί τις γωνίες και προσθέτει εξωτερικό περίγραμμα
Ζέβρα-ρίγα .table-striped Προσθέτει ανοιχτό γκρι χρώμα φόντου σε μονές σειρές (1, 3, 5, κ.λπ.)
Συμπυκνωμένο .table-condensed Κόβει την κάθετη επένδυση στη μέση, από 8px σε 4px, μέσα σε όλα tdκαι thτα στοιχεία

Παραδείγματα πίνακες

1. Προεπιλεγμένα στυλ πίνακα

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

  1. <table class = "table" >
  2. </table>
# Ονομα Επίθετο Όνομα χρήστη
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα

2. Τραπέζι ριγέ

Διασκεδάστε λίγο με τα τραπέζια σας προσθέτοντας ζέβρα-απλώς προσθέστε την .table-stripedτάξη.

Σημείωση: Οι ριγέ πίνακες χρησιμοποιούν τον :nth-childεπιλογέα CSS και δεν είναι διαθέσιμος στο IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Ονομα Επίθετο Όνομα χρήστη
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Λάρι το πουλί @κελάδημα

3. Τραπέζι με περίγραμμα

Προσθέστε περιγράμματα γύρω από ολόκληρο το τραπέζι και στρογγυλεμένες γωνίες για αισθητικούς λόγους.

  1. <table class = "table-bordered" >
  2. </table>
# Ονομα Επίθετο Όνομα χρήστη
1 Σημάδι Οθων @mdo
Σημάδι Οθων @getbootstrap
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα

4. Συμπυκνωμένο τραπέζι

Κάντε τα τραπέζια σας πιο συμπαγή προσθέτοντας την .table-condensedκλάση για να κόψετε τα κελιά του πίνακα στη μέση (από 8 εικονοστοιχεία σε 4 εικονοστοιχεία).

  1. <table class = "table table-condensed" >
  2. </table>
# Ονομα Επίθετο Όνομα χρήστη
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα

5. Συνδυάστε τα όλα!

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

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Πλήρες όνομα
# Ονομα Επίθετο Όνομα χρήστη
1 Σημάδι Οθων @mdo
2 Ιάκωβος Θόρντον @Λίπος
3 Larry the Bird @κελάδημα

Ευέλικτο HTML και CSS

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

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

Περιλαμβάνονται τέσσερις διατάξεις

Το Bootstrap έρχεται με υποστήριξη για τέσσερις τύπους διατάξεων φορμών:

  • Κάθετη (προεπιλογή)
  • Αναζήτηση
  • Στη γραμμή
  • Οριζόντιος

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

Έλεγχος καταστάσεων και πολλά άλλα

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

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

Τέσσερις τύποι εντύπων

Το Bootstrap παρέχει απλή σήμανση και στυλ για τέσσερα στυλ κοινών φορμών ιστού.

Ονομα Τάξη Περιγραφή
Κάθετη (προεπιλογή) .form-vertical (δεν απαιτείται) Στοιβαγμένες, αριστερή στοίχιση ετικέτες πάνω από στοιχεία ελέγχου
Στη γραμμή .form-inline Ετικέτα με αριστερή στοίχιση και χειριστήρια inline-block για συμπαγές στυλ
Αναζήτηση .form-search Εξαιρετικά στρογγυλεμένη εισαγωγή κειμένου για μια τυπική αισθητική αναζήτησης
Οριζόντιος .form-horizontal Τοποθετήστε ετικέτες αριστερά, δεξιά στοίχιση στην ίδια γραμμή με τα στοιχεία ελέγχου

Παραδείγματα φορμών που χρησιμοποιούν απλώς στοιχεία ελέγχου φορμών, χωρίς επιπλέον σήμανση

Βασική μορφή

Έξυπνες και ελαφριές προεπιλογές χωρίς επιπλέον σήμανση.

Παράδειγμα κειμένου βοήθειας σε επίπεδο μπλοκ εδώ.

  1. <form class = "καλά" >
  2. <label> Όνομα ετικέτας </label>
  3. <input type = "text" class = "span3" placeholder = "Πληκτρολογήστε κάτι…" >
  4. <span class = "help-block" > Παράδειγμα κειμένου βοήθειας σε επίπεδο μπλοκ εδώ. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Ελέγξτε με
  7. </label>
  8. <button type = "submit" class = "btn" > Υποβολή </button>
  9. </form>

Φόρμα αναζήτησης

Προσθέστε .form-searchστη φόρμα και .search-queryστο input.

  1. <form class = "καλά φόρμα-αναζήτηση" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Αναζήτηση </button>
  4. </form>

Ενσωματωμένη φόρμα

Προσθέστε .form-inlineγια να τελειοποιήσετε την κάθετη στοίχιση και την απόσταση των στοιχείων ελέγχου φόρμας.

  1. <form class = "well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Να με θυμάσαι
  6. </label>
  7. <button type = "submit" class = "btn" > Είσοδος </button>
  8. </form>

Οριζόντιες μορφές

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

  • εισαγωγή κειμένου (κείμενο, κωδικός πρόσβασης, email, κ.λπ.)
  • πλαίσιο ελέγχου
  • ραδιόφωνο
  • επιλέγω
  • πολλαπλή επιλογή
  • εισαγωγή αρχείου
  • textarea

Εκτός από το κείμενο ελεύθερης μορφής, οποιαδήποτε είσοδος που βασίζεται σε κείμενο HTML5 εμφανίζεται έτσι.

Παράδειγμα σήμανσης

Δεδομένου του παραπάνω παραδείγματος διάταξης φόρμας, ακολουθεί η σήμανση που σχετίζεται με την πρώτη ομάδα εισαγωγής και ελέγχου. Τα .control-group, .control-label, και .controlsοι κλάσεις είναι όλα απαραίτητα για το styling.

  1. <form class = "form-horizontal" >
  2. <σύνολο πεδίων>
  3. <legend> Κείμενο μύθου </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Εισαγωγή κειμένου </label>
  6. <div class = "controls" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Υποστήριξη κειμένου βοήθειας </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Καταστάσεις ελέγχου φόρμας

Το Bootstrap διαθέτει στυλ για εστίες και disabledκαταστάσεις που υποστηρίζονται από πρόγραμμα περιήγησης. Αφαιρούμε το προεπιλεγμένο Webkit outlineκαι εφαρμόζουμε ένα box-shadowστη θέση του για :focus.


Επικύρωση φόρμας

Περιλαμβάνει επίσης στυλ επικύρωσης για σφάλματα, προειδοποιήσεις και επιτυχία. Για χρήση, προσθέστε την κλάση σφάλματος στο περιβάλλον .control-group.

  1. <σύνολο πεδίων
  2. class = "σφάλμα ομάδας ελέγχου" >
  3. </fieldset>
Κάποια αξία εδώ
Κάτι μπορεί να πήγε στραβά
Διορθώστε το σφάλμα
Ουάου!
Ουάου!

Επέκταση των στοιχείων ελέγχου φόρμας

Προσθήκη και προσθήκη εισόδων

Οι ομάδες εισαγωγής —με επισυναπτόμενο ή προσαρτημένο κείμενο— παρέχουν έναν εύκολο τρόπο για να δώσετε περισσότερο πλαίσιο για τις εισαγωγές σας. Καλά παραδείγματα περιλαμβάνουν το σύμβολο @ για ονόματα χρήστη Twitter ή $ για οικονομικά.


Πλαίσια ελέγχου και ραδιόφωνα

Μέχρι την έκδοση 1.4, το Bootstrap απαιτούσε επιπλέον σήμανση γύρω από τα πλαίσια ελέγχου και τα ραδιόφωνα για τη στοίβαξή τους. Τώρα, είναι απλό να επαναλάβουμε το <label class="checkbox">που τυλίγει το <input type="checkbox">.

Υποστηρίζονται επίσης ενσωματωμένα πλαίσια ελέγχου και ραδιόφωνα. Απλά προσθέστε .inlineσε οποιοδήποτε .checkboxή .radioκαι τελειώσατε.


Ενσωματωμένες φόρμες και προσάρτηση/προσάρτηση

Για να χρησιμοποιήσετε εισόδους προσάρτησης ή προσθήκης σε ενσωματωμένη μορφή, φροντίστε να τοποθετήσετε το .add-onκαι inputστην ίδια γραμμή, χωρίς κενά.


Κείμενο βοήθειας φόρμας

Για να προσθέσετε κείμενο βοήθειας για τις εισαγωγές της φόρμας σας, συμπεριλάβετε ενσωματωμένο κείμενο βοήθειας με <span class="help-inline">ή ένα μπλοκ κειμένου βοήθειας <p class="help-block">μετά το στοιχείο εισαγωγής.

Χρησιμοποιήστε τις ίδιες .span*κατηγορίες από το σύστημα πλέγματος για μεγέθη εισόδου.

Μπορείτε επίσης να χρησιμοποιήσετε στατικές κλάσεις που δεν αντιστοιχίζονται στο πλέγμα, δεν προσαρμόζονται στα αποκριτικά στυλ CSS ή δεν λαμβάνουν υπόψη διαφορετικούς τύπους στοιχείων ελέγχου (π.χ. inputέναντι select).

@

Ακολουθεί κάποιο κείμενο βοήθειας

.00
Ακολουθεί περισσότερο κείμενο βοήθειας
$ .00

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

Κουμπί class="" Περιγραφή
btn Τυπικό γκρι κουμπί με ντεγκραντέ
btn btn-primary Παρέχει επιπλέον οπτικό βάρος και προσδιορίζει την κύρια ενέργεια σε ένα σύνολο κουμπιών
btn btn-info Χρησιμοποιείται ως εναλλακτική λύση στα προεπιλεγμένα στυλ
btn btn-success Υποδεικνύει μια επιτυχημένη ή θετική ενέργεια
btn btn-warning Υποδεικνύει ότι πρέπει να δίνεται προσοχή με αυτήν την ενέργεια
btn btn-danger Υποδεικνύει μια επικίνδυνη ή δυνητικά αρνητική ενέργεια
btn btn-inverse Εναλλακτικό σκούρο γκρι κουμπί, που δεν συνδέεται με σημασιολογική ενέργεια ή χρήση

Κουμπιά για ενέργειες

Κατά κανόνα, τα κουμπιά πρέπει να χρησιμοποιούνται μόνο για ενέργειες, ενώ οι υπερσύνδεσμοι πρέπει να χρησιμοποιούνται για αντικείμενα. Για παράδειγμα, η "Λήψη" θα πρέπει να είναι ένα κουμπί ενώ η "πρόσφατη δραστηριότητα" θα πρέπει να είναι ένας σύνδεσμος.

Τα στυλ κουμπιών μπορούν να εφαρμοστούν σε οτιδήποτε με την .btnκλάση εφαρμοσμένη. Ωστόσο, συνήθως θα θέλετε να τα εφαρμόσετε μόνο σε στοιχεία <a>και <button>.

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

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

Πολλαπλά μεγέθη

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


Κατάσταση αναπηρίας

Για απενεργοποιημένα κουμπιά, προσθέστε την .disabledκλάση στους συνδέσμους και το disabledχαρακτηριστικό για <button>στοιχεία.

Κύριος σύνδεσμος Σύνδεσμος

Ψηλά το κεφάλι! Εδώ χρησιμοποιούμε .disabledως βοηθητική κλάση, παρόμοια με την κοινή .activeκλάση, επομένως δεν απαιτείται πρόθεμα.

Μία τάξη, πολλές ετικέτες

Χρησιμοποιήστε την .btnκλάση σε ένα στοιχείο <a>, <button>, ή <input>.

Σύνδεσμος
  1. <a class = "btn" href = "" > Σύνδεσμος </a>
  2. <button class = "btn" type = "submit" >
  3. Κουμπί
  4. </button>
  5. <input class = "btn" type = "button"
  6. value = "Είσοδος" >
  7. <input class = "btn" type = "submit"
  8. value = "Υποβολή" >

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

  • εικονίδιο-γυαλί
  • εικονίδιο-μουσική
  • εικονίδιο-αναζήτηση
  • εικονίδιο-φάκελος
  • εικονίδιο-καρδιά
  • εικονίδιο-αστέρι
  • εικονίδιο-αστέρι-άδειο
  • εικονίδιο χρήστη
  • εικονίδιο-ταινία
  • εικονίδιο-μεγάλο
  • εικονίδιο-ου
  • εικονίδιο-η-λίστα
  • εικονίδιο-οκ
  • εικονίδιο-αφαίρεση
  • εικονίδιο μεγέθυνσης
  • εικονίδιο-σμίκρυνση
  • εικονίδιο απενεργοποίηση
  • εικονίδιο-σήμα
  • εικονίδιο-γρανάζι
  • εικονίδιο-σκουπίδια
  • εικονίδιο-σπίτι
  • εικονίδιο-αρχείο
  • εικονίδιο-χρόνος
  • εικονίδιο-δρόμος
  • εικονίδιο-λήψη-αλτ
  • εικονίδιο λήψης
  • εικονίδιο-φόρτωση
  • εικονίδιο-εισερχόμενα
  • εικονίδιο-παιχνίδι-κύκλος
  • εικονίδιο-επανάληψη
  • εικονίδιο-ανανέωση
  • εικονίδιο-λίστα-αλτ
  • εικονίδιο-κλείδωμα
  • εικονίδιο-σημαία
  • εικονίδιο-ακουστικά
  • εικονίδιο-όγκος-απενεργοποίηση
  • εικονίδιο-μείωση όγκου
  • εικονίδιο αύξησης όγκου
  • εικονίδιο-qrcode
  • εικονίδιο-γραμμωτός κώδικας
  • εικονίδιο-ετικέτα
  • εικονίδια-ετικέτες
  • εικονίδιο-βιβλίο
  • εικονίδιο-σελιδοδείκτη
  • εικονίδιο-εκτύπωση
  • εικονίδιο-κάμερα
  • εικονίδιο-γραμματοσειρά
  • εικονίδιο-έντονη
  • εικονίδιο-πλάγιο
  • εικονίδιο-κείμενο-ύψος
  • εικονίδιο-κείμενο-πλάτος
  • εικονίδιο-στοίχιση-αριστερά
  • εικονίδιο-ευθυγράμμιση-κέντρο
  • εικονίδιο-στοίχιση-δεξιά
  • εικονίδιο-ευθυγράμμιση-δικαιολογώ
  • λίστα εικονιδίων
  • εικονίδιο-εσοχή-αριστερά
  • εικονίδιο-εσοχή-δεξιά
  • εικονίδιο-facetime-βίντεο
  • εικόνα-εικόνα
  • εικονίδιο-μολύβι
  • εικονίδιο-χάρτης-δείκτης
  • εικονίδιο-προσαρμογή
  • εικονίδιο-απόχρωση
  • εικονίδιο-επεξεργασία
  • εικονίδιο-κοινή χρήση
  • εικονίδιο-έλεγχος
  • εικονίδιο-μετακίνηση
  • εικονίδιο-βήμα-πίσω
  • εικονίδιο-γρήγορη-προς τα πίσω
  • εικονίδιο προς τα πίσω
  • εικονίδιο-παιχνίδι
  • εικονίδιο-παύση
  • εικονίδιο-στάση
  • εικονίδιο προς τα εμπρός
  • εικονίδιο-γρήγορη προώθηση
  • εικονίδιο-βήμα-προς τα εμπρός
  • εικονίδιο-εξαγωγή
  • εικονίδιο-σεβρόν-αριστερά
  • εικονίδιο-σεβρόν-δεξιά
  • εικονίδιο-συν-σύμβολο
  • εικονίδιο-πλην-σημάδι
  • εικονίδιο-αφαίρεση-σημάδι
  • εικονίδιο-ok-sign
  • εικονίδιο-ερώτηση-σημάδι
  • εικονίδιο-πληροφορία-σημάδι
  • εικονίδιο-στιγμιότυπο οθόνης
  • εικονίδιο-αφαίρεση-κύκλος
  • εικονίδιο-οκ-κύκλος
  • εικονίδιο-απαγόρευση-κύκλος
  • εικονίδιο-βέλος-αριστερά
  • εικονίδιο-βέλος-δεξιά
  • εικονίδιο-βέλος-επάνω
  • εικονίδιο-βέλος-κάτω
  • εικονίδιο-κοινή χρήση-αλτ
  • εικονίδιο-αλλαγή μεγέθους-γεμάτο
  • εικονίδιο-μεταβολή μεγέθους-μικρό
  • εικονίδιο-συν
  • εικονίδιο-πλην
  • εικονίδιο-αστερίσκος
  • εικονίδιο-θαυμαστικό-σημάδι
  • εικονίδιο-δώρο
  • εικονίδιο-φύλλο
  • εικονίδιο-φωτιά
  • εικονίδιο με τα μάτια ανοιχτά
  • εικονίδιο-μάτι-κλείσιμο
  • εικονίδιο-προειδοποιητικό σημάδι
  • εικονίδιο-αεροπλάνο
  • εικονίδιο-ημερολόγιο
  • εικονίδιο-τυχαίο
  • εικονίδιο-σχόλιο
  • εικονίδιο-μαγνήτης
  • εικονίδιο-chevron-up
  • εικονίδιο-κάτω
  • εικονίδιο-retweet
  • εικονίδιο-καλάθι αγορών
  • εικονίδιο-φάκελος-κλείσιμο
  • εικονίδιο-φάκελος-άνοιγμα
  • εικονίδιο-αλλαγή μεγέθους-κάθετο
  • εικονίδιο-αλλαγή μεγέθους-οριζόντια
  • εικονίδιο-hdd
  • εικονίδιο-bullhorn
  • εικονίδιο-καμπάνα
  • εικονίδιο-πιστοποιητικό
  • εικονίδιο-αντίχειρες-επάνω
  • εικονίδιο-αντίχειρες-κάτω
  • εικονίδιο-χέρι-δεξιά
  • εικονίδιο-χέρι-αριστερά
  • εικονίδιο-χέρι προς τα πάνω
  • εικονίδιο-κάτω
  • εικονίδιο-κύκλος-βέλος-δεξιά
  • εικονίδιο-κύκλος-βέλος-αριστερά
  • εικονίδιο-κύκλος-βέλος-επάνω
  • εικονίδιο-κύκλος-βέλος-κάτω
  • εικονίδιο-σφαίρα
  • εικονίδιο κλειδί
  • εικονίδιο-εργασίες
  • εικονίδιο-φίλτρο
  • εικονίδιο-χαρτοφύλακας
  • εικονίδιο σε πλήρη οθόνη

Χτισμένο ως sprite

Αντί να κάνουμε κάθε εικονίδιο ένα επιπλέον αίτημα, τα έχουμε μεταγλωττίσει σε ένα sprite—μια δέσμη εικόνων σε ένα αρχείο που χρησιμοποιεί CSS για να τοποθετήσει τις εικόνες με background-position. Αυτή είναι η ίδια μέθοδος που χρησιμοποιούμε στο Twitter.com και μας λειτούργησε καλά.

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

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

Τρόπος χρήσης

Το Bootstrap χρησιμοποιεί μια <i>ετικέτα για όλα τα εικονίδια, αλλά δεν έχουν κατηγορία πεζών-κεφαλαίων — μόνο ένα κοινόχρηστο πρόθεμα. Για χρήση, τοποθετήστε τον ακόλουθο κώδικα σχεδόν οπουδήποτε:

  1. <i class = "icon-search" ></i>

Υπάρχουν επίσης διαθέσιμα στυλ για ανεστραμμένα (λευκά) εικονίδια, έτοιμα με μία επιπλέον κατηγορία:

  1. <i class = "icon-search icon-white" ></i>

Υπάρχουν 140 κατηγορίες για να διαλέξετε για τα εικονίδια σας. Απλώς προσθέστε μια <i>ετικέτα με τις σωστές κλάσεις και είστε έτοιμοι. Μπορείτε να βρείτε την πλήρη λίστα στο sprites.less ή ακριβώς εδώ σε αυτό το έγγραφο.

Ψηλά το κεφάλι! Όταν χρησιμοποιείτε δίπλα σε συμβολοσειρές κειμένου, όπως στα κουμπιά ή στους συνδέσμους πλοήγησης, φροντίστε να αφήσετε ένα κενό διάστημα μετά την <i>ετικέτα για σωστή απόσταση.

Θήκες χρήσης

Τα εικονίδια είναι υπέροχα, αλλά πού θα τα χρησιμοποιούσε κανείς; Εδώ είναι μερικές ιδέες:

  • Ως γραφικά για την πλοήγησή σας στην πλαϊνή γραμμή
  • Για μια πλοήγηση που βασίζεται αποκλειστικά σε εικονίδια
  • Για κουμπιά που βοηθούν στη μετάδοση του νοήματος μιας ενέργειας
  • Με συνδέσμους για κοινή χρήση του περιβάλλοντος στον προορισμό ενός χρήστη

Ουσιαστικά, οπουδήποτε μπορείτε να βάλετε μια <i>ετικέτα, μπορείτε να βάλετε ένα εικονίδιο.

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

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